如何在Vue和Nuxt.js项目中正确引入Font Awesome？

你原本的引入配置如下：

css: [
'@/assets/front_end/fontawesome-free-5.15.3-web/css/fontawesome.css'
],

异常显示效果如下：

该问题是因为仅引入了Font Awesome核心基础样式，缺少对应图标分类样式、字体文件路径配置错误、图标类名前缀错误都会导致图标显示异常，可按照以下步骤逐一排查修复：

• 补充引入完整的图标分类样式
  Font Awesome 5 按图标类型拆分了样式文件，仅引入fontawesome.css核心文件无法渲染具体图标，需要补充你用到的图标所属分类的样式：

css: [
'@/assets/front_end/fontawesome-free-5.15.3-web/css/fontawesome.css',
'@/assets/front_end/fontawesome-free-5.15.3-web/css/solid.css',
'@/assets/front_end/fontawesome-free-5.15.3-web/css/regular.css',
'@/assets/front_end/fontawesome-free-5.15.3-web/css/brands.css'
],

• 校验字体文件路径有效性
  Font Awesome 样式文件内部会通过相对路径引用webfonts目录下的.woff2、.ttf等字体文件，你需要确保：
  1. 本地fontawesome目录下存在完整的webfonts文件夹，所有字体文件未缺失
  2. 项目中配置的@别名解析规则正确，打包后静态资源路径不会出现404问题
• 核对图标类名写法
  Font Awesome 5 不同分类的图标前缀不同，solid类图标前缀为fas、regular类为far、品牌类为fab，需确保类名前缀和图标所属分类匹配，例如正确写法为<i class="fas fa-search"></i>，前缀写错会直接导致显示异常。

内容的提问来源于stack exchange，提问作者Kallol Ray