我正在使用 HTML 模板构建网站组合。我对 css 没有太多经验,但是在我的 django 元素中将字体超棒的 css 文件作为链接和文件导入后,图标显示为小框。我知道 css 文件正在被识别,因为当我将其注释掉时,这些框就会消失。我认为 css 可能存在一些我不理解的更深层次的问题。
如果有人可以帮助我,我怀疑主 css 文件中发生了什么。谢谢!
这是模板中的代码:
<ul class="special">
<li><i class="fab fa-pencil" title="Edit"></i></li>
<li><a href="#" class="icon fa-search"><span class="label">Magnifier</span></a></li>
<li><a href="#" class="icon fa-tablet"><span class="label">Tablet</span></a></li>
<li><a href="#" class="icon fa-flask"><span class="label">Flask</span></a></li>
<li><a href="#" class="icon fa-cog"><span class="label">Cog?</span></a></li>
</ul>
这是我导入的内容:
<link rel="stylesheet" type='text/css' href="{% static "css/main.css" %}" />
<!-- <link rel="stylesheet" href="{% static "css/all.css" %}" > -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
最佳答案
您需要使用 fas
类,铅笔不会显示,因为它属于 PRO 包1 ( https://fontawesome.com/icons/pencil?style=solid )
ul a {
text-decoration:none;
font-size:25px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<ul class="special">
<li><i class="fas fa-pencil" title="Edit"></i></li>
<li><a href="#" class="fas fa-search"><span class="label">Magnifier</span></a></li>
<li><a href="#" class="fas fa-tablet"><span class="label">Tablet</span></a></li>
<li><a href="#" class="fas fa-flask"><span class="label">Flask</span></a></li>
<li><a href="#" class="fas fa-cog"><span class="label">Cog?</span></a></li>
</ul>
这些图标 far
不能使用普通版,因为它们都属于 PRO 包2 所以它们不会显示
ul a {
text-decoration:none;
font-size:25px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<ul class="special">
<li><i class="far fa-pencil" title="Edit"></i></li>
<li><a href="#" class="far fa-search"><span class="label">Magnifier</span></a></li>
<li><a href="#" class="far fa-tablet"><span class="label">Tablet</span></a></li>
<li><a href="#" class="far fa-flask"><span class="label">Flask</span></a></li>
<li><a href="#" class="far fa-cog"><span class="label">Cog?</span></a></li>
</ul>
https://fontawesome.com/icons/tablet?style=regular
https://fontawesome.com/icons/search?style=regular
https://fontawesome.com/icons/flask?style=regular
https://fontawesome.com/icons/cog?style=regular
1 正如您在下面看到的,这个图标的所有版本都是 PRO,所以没有办法在免费包中使用这个图标:
2 正如您在下面看到的,只有实体版本不是 PRO,因此与其他 2 个不同,只有这个包含在免费包中。
相关问题:
Font Awesome 5 on pseudo elements shows square instead of icon
Font Awesome 5 Choosing the correct font-family in pseudo-elements
关于html - 我无法显示 Font Awesome 图标。尝试使用多种方法导入 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54095574/