已引入FontAwesome资源但图标无法正常显示是什么原因？

FontAwesome 图标不显示的常见原因如下： #

• 脚本引入属性错误（核心问题）
  <script>标签加载外部资源必须使用src属性，你当前代码中错误使用了仅适用于<link>标签的href属性，导致脚本完全没有加载。修正后的引入代码如下：

  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  

• 脚本加载失败
  修正属性后如果仍不显示，可以打开浏览器控制台的网络面板，检查该js资源的请求状态：如果返回4xx/5xx错误，说明当前使用的公共kit地址已失效、被官方限制访问；如果请求被拦截，说明是浏览器广告拦截插件、站点安全策略阻止了第三方资源加载。
• 类名版本不匹配
  你当前使用的fa fa-arrow-up是FontAwesome 4版本的类名写法，如果你引入的是FontAwesome 5/6版本的kit，免费实心图标的默认前缀已经改为fas，旧版fa前缀可能不兼容，可以尝试修改为以下写法测试：

  <i class="fas fa-arrow-up" aria-hidden="true"></i>
  

  另外还要确认你使用的所有图标都属于你引入kit对应的免费图标库，付费图标在免费kit中无法正常显示。
• 自定义样式冲突
  检查你的全局CSS规则是否覆盖了<i>标签或fa系列类的默认样式，包括但不限于设置了display: none、opacity: 0、font-family被自定义字体覆盖、图标颜色和页面背景色一致等，都会导致图标不可见。

内容的提问来源于stack exchange，提问作者abood sabbag