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

我遇到了这个问题，仔细地走了每一步……尽管我已经使用FA很多年了……然后我意识到我的邮件css文件中有这一行:

* {
font-family: Arial !important;
}

愚蠢的错误，但这可能会在将来提示某人!

如果你正在使用LESS或SASS，打开字体-真棒。减少/sass文件，编辑路径变量@fa-font-path: "../font";它指向实际的字体:

@fa-font-path: "../font";

@font-face {
  font-family: 'FontAwesome';
  src: url('@{fa-font-path}/fontawesome-webfont.eot?v=3.0.1');
  src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('@{fa-font-path}/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('@{fa-font-path}/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

与CSS一样，除了你在@font-face声明块中编辑路径:

@font-face {
  font-family: 'FontAwesome';
  src: url('your/path/fontawesome-webfont.eot?v=3.0.1');
  src: url('your/path/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('your/path/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('your/path/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

在(免费的)Font Awesome 5版本中，有一个小细节对我来说很难理解，我没有注意到它:

Style   Availability    Style Prefix    Example Rendering
Solid   Free            fas             <i class="fas fa-camera"></i>
Brands  Free            fab             <i class="fab fa-font-awesome"></i>

(摘自文档)

因此，品牌图标如fa-twitter或fa-react需要与类fab一起使用，而所有其他(免费)图标需要与类fas一起使用。这很容易监管。

我尝试了上面的一些建议，但都没有成功。

我使用NuGeT包。 (出于某种原因)有多个命名版本(font-awesome, fontawesome, font。太棒了,等等)。

无论如何: 我删除了所有安装的版本，然后只安装了最新版本的font.awesome。字体。Awesome不需要调整或配置任何东西就可以工作。

我认为在其他已命名的版本中有许多东西是缺失的。

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