使用这个<i class="fa fa-camera-retro" ></i>你还没有定义fa类

如果你通过包管理器(yarn或npm)安装了font-awesome，请注意安装的是哪个版本。或者，如果你很久以前就安装了font-awesome，检查一下安装的版本。

本质上，通过包管理器安装的版本可能落后于https://fontawesome.com/网站上显示的版本。因此，今天(2019年6月21日)包管理器将安装v4.7.0作为最新版本，但网站将指向v5.*的文档。

解决方案，访问v4.7.0的图标文档网站https://fontawesome.com/v4.7.0，复制适当的图标，例如<i class="fa fa-sign-in" aria-hidden="true"></i>，并将其合并到您的html中。更多信息可以在这里找到。

在我的例子中，我只是复制

<i class="fa-solid fa-tags"></i> //provided by font awesome

对于现有的前端模板，包括一些其他图标从字体真棒，但这没有工作，所以通过添加'fas'类，它工作;

<i class="fas fa-solid fa-tags"></i> //working

与上层阶级一起使用

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

检查以确保您没有无意中更改图标上的字体族。如果你改变了。fa项目的字体族从:FontAwesome图标将不会显示。总是一些愚蠢的小事情。

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