html - 我无法显示 Font Awesome 图标。尝试使用多种方法导入 css

Question

我正在使用 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>

Answer 1

您需要使用 fas 类，铅笔不会显示，因为它属于 PRO 包¹ ( 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 包² 所以它们不会显示

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