在(免费的)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一起使用。这很容易监管。

粗细:900;

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

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

仔细检查fontawessome -all.css文件-在最底部会有一个webfonts文件夹的路径。我的……“/webfonts”格式，这意味着CSS文件将从它所在的位置往上看一级。由于我所有的css文件都在css文件夹中，我将字体添加到同一个文件夹中，这是行不通的。

只要把你的字体文件夹向上移动一个级别，一切都应该很好:)

用字体Awesome 5.0测试

与上层阶级一起使用

<div class="container">
  <i class="fa fa-facebook"></i>
</div>

我也有同样的问题，字体awesome 5下载纱线， 我添加了min.css文件和all.js文件。

希望这能帮助到某人

<link  rel="stylesheet"   href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css">
<script src="node_modules/@fortawesome/fontawesome-free/js/all.js" charset="utf-8"></script>

如果你正在使用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;
}