我无法显示超棒的字体图标。尝试使用多种方法导入 css

Question

我正在使用 HTML 模板构建网站组合。我对 css 没有太多经验，但是在我的 django 项目中将字体超棒的 css 文件作为 link 和文件导入后，图标显示得很少盒子。我知道 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

将它放在所有 css 之上并尝试在没有完整性和跨域参数的情况下使用，因为即使开发人员对文件进行了一点更改也可能与您网站上的完整性和跨域参数不匹配，因此它不会'不能使用。

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

Answer 2

你需要使用fas class 铅笔的不会显示因为它属于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，所以只有这一个包含在免费包中，与其他两个不同。

我无法显示超棒的字体图标。尝试使用多种方法导入 css

I can't get my font-awesome icons to show up. Tried importing css with multiple methods

html

css

font-awesome

font-awesome-5