为什么我的社交媒体图标无法正确显示

Question

So I'm trying to add social media icons to the footer of my web application.所以我正在尝试将社交媒体图标添加到我的 web 应用程序的页脚。 I was able to do it in a separate HTML file but when I tried it in my Django app I'm not able to make the icons look the way I want it.我可以在单独的 HTML 文件中执行此操作，但是当我在 Django 应用程序中尝试时，我无法使图标看起来像我想要的那样。 Seems like my css for the icon isn't working and showing.似乎我的 css 图标无法正常工作和显示。 I deleted the css for the icon and it was the same.我删除了图标的 css ，它是一样的。 Not sure what I'm doing wrong不知道我做错了什么

 body { background: #fafafa; color: #333333; margin-top: 5rem; } h1, h2, h3, h4, h5, h6 { color: #444444; } ul { margin: 0; }.bg-steel { background-color: #5f788a; }.site-header.navbar-nav.nav-link { color: #cbd5db; }.site-header.navbar-nav.nav-link:hover { color: #ffffff; }.site-header.navbar-nav.nav-link.active { font-weight: 500; }.content-section { background: #ffffff; padding: 10px 20px; border: 1px solid #dddddd; border-radius: 3px; margin-bottom: 20px; }.article-title { color: #444444; } a.article-title:hover { color: #428bca; text-decoration: none; }.article-content { white-space: pre-line; }.article-img { height: 65px; width: 65px; margin-right: 16px; }.article-metadata { padding-bottom: 1px; margin-bottom: 4px; border-bottom: 1px solid #e3e3e3 }.article-metadata a:hover { color: #333; text-decoration: none; }.article-svg { width: 25px; height: 25px; vertical-align: middle; }.account-img { height: 125px; width: 125px; margin-right: 20px; margin-bottom: 16px; }.account-heading { font-size: 2.5rem; }.fa { padding: 10px; font-size: 30px; width: 50px; text-align: center; text-decoration: none; } /* Add a hover effect if you want */.fa:hover { opacity: 0.7; } /* Set a specific color for each brand */ /* Facebook */.fa-facebook { background: #3B5998; color: white; } /* Twitter */.fa-twitter { background: #55ACEE; color: white; }.fa-instagram { background: #f09433; background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 ); color: white; }.fa-linkedin { background:royalblue; color: white; }

 {% load static %} <,DOCTYPE html> <html> <head> <,-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1. shrink-to-fit=no"> <.-- Bootstrap CSS --> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7:0/css/font-awesome.min.css"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="{% static 'blog/main.css' %}"> {% if title %} <title>Django Blog - {{ title }}</title> {% else %} <title>Django Blog</title> {% endif %} </head> <body> <header class="site-header"> <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> <div class="container"> <a class="navbar-brand mr-4" href="{% url 'blog-home' %}">WOOF</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarToggle"> <div class="navbar-nav mr-auto"> <a class="nav-item nav-link" href="{% url 'blog-home' %}">Home</a> <a class="nav-item nav-link" href="{% url 'blog-about' %}">About</a> </div> <!-- Navbar Right Side --> <div class="navbar-nav"> {% if user.is_authenticated %} <a class="nav-item nav-link" href="{% url 'post-create' %}">+ New Post </a> <a class="nav-item nav-link" href="{% url 'profile' %}">Profile</a> <a class="nav-item nav-link" href="{% url 'logout' %}">Logout</a> {% else %} <a class="nav-item nav-link" href="{% url 'login' %}">Login</a> <a class="nav-item nav-link" href="{% url 'register' %}">Register</a> {% endif %} </div> </div> </div> </nav> </header> <main role="main" class="container " id="content"> <div class="row"> <div class="col-md-8"> {% if messages %} {% for message in messages %} <div class="alert alert-{{ message.tags }}"> {{ message }} </div> {% endfor %} {% endif %} {% block content %}{% endblock %} </div> <div class="col-md-4"> <div class="content-section bg-dark"> <h3 class= text-white>Woof</h3> <p class='text-light'>Blog responsibly <ul class="list-group"> <li class="list-group-item list-group-item-light" > <a href="{% url 'blog-home' %}">Latest Posts </a></li> <li class="list-group-item list-group-item-light"> <a href="{% url 'announcement_page' %}">Announcements </a></li> </ul> </p> </div> </div> </div> <footer> <div class="row bg-dark mt-5"> <div class="col-6 text-center text-info mt-3"> <p> Made by @Bryan & Ismail</p> <p>WOOF</p> </div> <div class="col-6 text-center "> <a href="#" class="fa fa-instagram"></a> <a href="#" class="fa fa-linkedin"></a> </div> </footer> </main> </body> </html>

Answer 1

I can't understand totally what you want but you may use.important tag.我不能完全理解你想要什么，但你可以使用 .important 标签。 So you give priority.所以你优先考虑。

.fa-instagram {
    background: red !important; 
}

Answer 2

Since you say that the CSS you wrote does not get applied, first of all you should check if it gets imported at all.既然你说你写的 CSS 没有被应用，首先你应该检查它是否被导入。

Try the next steps to debug it:尝试以下步骤进行调试：

Try to find why if the file containing the CSS is imported.尝试找出包含 CSS 的文件是否被导入的原因。
If the file is imported, but int the Browser's Styles tab, the rules applied do not appear, try clearing your cache.如果文件已导入，但在浏览器的 Styles 选项卡中，应用的规则不会出现，请尝试清除缓存。
If it is imported, see if all of the rules are ignored, or just some of them.如果是导入的，看看是忽略所有规则，还是只忽略其中的一部分。 If just one of them, try to use ".important", It is not the best practice, but it will get you the desired result.如果只是其中之一，请尝试使用“.important”，这不是最佳做法，但它会为您带来想要的结果。 and if you don't use it too much it is ok.如果你不使用它太多也没关系。
If it IS NOT imported, then you should import it.如果它没有被导入，那么你应该导入它。

I've tried it on my local machine, and it works, the CSS rules are applied successfully.我已经在我的本地机器上尝试过了，它可以工作，CSS 规则已成功应用。 So, my guess is that you file is not imported at all, or it is just a cache issue.所以，我的猜测是你的文件根本没有导入，或者它只是一个缓存问题。 Try from an incognito tab.从隐身标签中尝试。

为什么我的社交媒体图标无法正确显示

问题描述

2 个解决方案

解决方案1
0 2020-12-23 22:42:40

解决方案2
0 2020-12-23 23:05:15

为什么我的社交媒体图标无法正确显示

问题描述

2 个解决方案

解决方案1 0 2020-12-23 22:42:40

解决方案2 0 2020-12-23 23:05:15

解决方案1
0 2020-12-23 22:42:40

解决方案2
0 2020-12-23 23:05:15