你必须有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

/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 你会得到答案的。

如果你使用sass并且已经导入了main.scss @ import“. . /供应商/ font-awesome / scss / font-awesome.scss”;

错误可能来自字体-awesome。查找相对路径中的字体文件的SCSS文件。

所以记得重写$fa-font-path变量: $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !

这样就不需要在index.html中添加CDN

使用绝对路径代替相对路径解决了这个问题。我使用的是相对路径(见下面的第一个例子)，但这行不通。我通过控制台检查，发现服务器返回404，文件没有找到。

相对路径导致404:

@font-face { 
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
}

绝对路径解决它跨浏览器:

@font-face { 
font-family: "FontAwesome";
src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3");
}

除非迫不得已，否则我不建议你这么做，但这对我来说很管用。当然，您应该对font-awesome.css文件中的所有字体格式重复此操作。

如果您使用的是版本5。*或更大，则必须使用

all.css 或 all.min.css

包括fontawessome .css不能工作，因为它没有对webfonts文件夹的引用，也没有对@font-face或font-family的引用

你可以通过在fontawessome .css或fontawessome .min.css中搜索font-family属性来检查这一点

根据文档(步骤3)，您需要修改提供的CSS文件以指向站点上的字体位置。