一个字体很棒的图标正在呈现，而另一个不是？

Question

这可能是一个菜鸟问题，但我一直坚持这个问题并完成了故障排除步骤 here。

我在 main.css 中导入的资产中使用 fontawesome-all.min.css 的本地副本，如下所示：

@import url(fontawesome-all.min.css);

fontawesome-all.min.css 中有我正在寻找的字体 fa-envelope 和 fa-graduation-cap。但是，当我在我的网页上使用它们时，fa-envelope 呈现但 fa-graduation-cap 不呈现。我哪里错了？

<li><a href="#" class="fa-envelope"><span class="label">Email</span></a></li>
<li><a href="#" class="fa-graduation-cap"><span class="label">Google Scholar</span></a></li>

Answer 1

不要在 a 标签上添加 class。在 <i> 标签内添加超棒的 classes，如下所示：

<li><a href="#"><i class="fas fa-envelope"></i> <span class="label">Email</span></a></li>
<li><a href="#"><i class="fas fa-graduation-cap"></i><span class="label">Google Scholar</span></a></li>

代码笔：https://codepen.io/manaskhandelwal1/pen/NWROWmZ

如果您没有最新版本，您可以下载此文件或直接在 link 标签内使用：https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css

要获取最新版本 classes，请访问此处的官方文档，只需在此处搜索图标并单击它即可找到有关它的所有详细信息：https://fontawesome.com/icons?d=gallery

Answer 2

fa 和 fas 丢失

<ul>
<li><a href="#" class="fa fa-envelope"><span class="label">Email</span></a></li>
<li><a href="#" class="fas fa-graduation-cap"><span class="label">Google Scholar</span></a></li>
</ul>

一个字体很棒的图标正在呈现，而另一个不是？

One fontawesome icon is rendering while the other isn't?

css

font-awesome