为什么我的社交媒体图标无法正确显示
[英]Why doesn't my social media icon display correctly
问题描述
所以我正在尝试将社交媒体图标添加到我的 web 应用程序的页脚。 我可以在单独的 HTML 文件中执行此操作，但是当我在 Django 应用程序中尝试时，我无法使图标看起来像我想要的那样。 似乎我的 css 图标无法正常工作和显示。 我删除了图标的 css ，它是一样的。 不知道我做错了什么
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>
2 个解决方案
解决方案1
0 2020-12-23 22:42:40
我不能完全理解你想要什么，但你可以使用 .important 标签。 所以你优先考虑。
.fa-instagram {
background: red !important;
}
解决方案2
0 2020-12-23 23:05:15
既然你说你写的 CSS 没有被应用，首先你应该检查它是否被导入。
尝试以下步骤进行调试：
- 尝试找出包含 CSS 的文件是否被导入的原因。
- 如果文件已导入，但在浏览器的 Styles 选项卡中，应用的规则不会出现，请尝试清除缓存。
- 如果是导入的，看看是忽略所有规则，还是只忽略其中的一部分。 如果只是其中之一，请尝试使用“.important”，这不是最佳做法，但它会为您带来想要的结果。 如果你不使用它太多也没关系。
- 如果它没有被导入，那么你应该导入它。
我已经在我的本地机器上尝试过了，它可以工作，CSS 规则已成功应用。 所以，我的猜测是你的文件根本没有导入，或者它只是一个缓存问题。 从隐身标签中尝试。
（SCSS）我的媒体查询在display上无法正常工作：flex;
[英](SCSS) My media queries aren't working correctly with display: flex;
当指针悬停在图标上时，为什么此按钮无法正常工作？
[英]Why doesn't this button work correctly when the pointer is over the icon?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.