我无法显示我的字体超赞图标。尝试使用多种方法导入CSS。使用html模板

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）

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/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软件包 ² ，因此它们不会显示

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/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，因此无法在Free软件包中使用此图标：

2 正如您在下面看到的那样，只有固定版本不是PRO，因此与其他2个版本不同，Free软件包中仅包含一个版本。

---

相关问题：

Font Awesome shows square instead of icon when used directly in CSS

FontAwesome - Choosing the correct font-family in CSS pseudo-elements

Answer 2

将其放在所有CSS之上，并尝试在没有完整性和跨域参数的情况下使用，因为即使开发人员对文件进行的少量更改也可能与您在网站上拥有的完整性和跨域参数不匹配，所以将无法使用它。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

Answer 3

将fontawesome文件保留在本地目录中（资产/ fontawesome） 然后使用静态

加载fontawesome

<link rel="stylesheet" href="{% static 'css/font-awesome.min.css'%}">

您可以查看此github存储库here