我的问题在于

<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">

在一个

<!-- build:css assets/styles/main.css -->
<!-- endbuild -->

tag

我把它放在标签的外面。

你必须有两个类，fas类和fa-*类。参考文档中的基本用法:

fa前缀在版本5中已弃用。新的默认是fas实体样式和fab品牌样式。

// Correct (version >= 5)
<i class="fas fa-search"></i>    

// Wrong (version < 5)
<i class="fa fa-search"></i>

/css/all.css文件包含核心样式和所有图标样式，当你使用字体Awesome时需要。/webfonts文件夹包含了上面CSS引用和依赖的所有字体文件。

复制整个/webfonts文件夹和/css/all.css到你的项目的静态资产目录(或任何你喜欢保留前端资产或供应商的东西)。

将复制的/css/all.css文件的引用添加到你想要使用字体Awesome的每个模板或页面。

只需访问- https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself 你会得到答案的。

必须这样工作

确保你有fontawesome CDN链接在你的页面顶部 fontawesome cdn 确保.fa类没有被赋予另一个font-family属性。当我们给页面中的所有标记一个样式时，通常会发生这种情况。像这样

* { 字体类型:Arial; ｝

而是使用这个

*:没有(.fa) { 字体类型:Arial; ｝

确保你输入的是fontawesome网站上给出的确切的类名。复制粘贴以确保。

如果你正在使用Cloudflare CDN，你可以使用下面的链接标签在你的页面中使用字体awesome <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <i class="fa fa-home"></i>

你必须有2个类，fa类和类识别所需的图标fa-twitter, fa-search，等等…

<!-- Wrong -->
<i class="fa-search"></i>    

<!-- Correct -->
<i class="fa fa-search"></i>

引导5更新

注意:“fa前缀在版本5中已弃用。新的默认是fas固态样式和fab品牌样式。”- Terje Solem

粗细:900;

我在Font Awesome 5上遇到了不同的问题。 对于fontaweesome图标，默认的字体重量应该是900，但对于span和I标签，我将其重写为400。 当我纠正它的时候，它就起作用了。

这是他们Github页面上的问题参考，https://github.com/FortAwesome/Font-Awesome/issues/11946