使用最新稳定版Font Awesome CDN后图标显示异常如何解决

问题原因及解决方案 #

你遇到的图标不显示问题由三个核心错误导致，按优先级修正即可：

1. Font Awesome样式引入不完整+图标前缀错误
   Font Awesome 5将图标拆分到了不同分类，社交类品牌图标属于brands分类，有两个要求：
   • 不能仅引入核心的fontawesome.min.css，需要引入包含全量图标样式的all.min.css，或者额外引入brands分类的样式文件
   • 品牌图标的类前缀不能用通用的fa，需要改用fab
     首先将header中的CDN引入替换为：

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css' rel='stylesheet'/>

2. i标签自闭合语法不兼容
   部分浏览器不支持<i/>这种自闭合写法，会导致DOM结构解析异常，需要改为成对的闭合标签。
3. 可选修正：target属性写法错误
   你当前写的target='blank'不符合规范，新窗口跳转的正确属性值是_blank，虽然不影响图标显示，但会导致跳转行为异常。

修正后的footer社交链接代码如下：

<a class='fb' href='#' rel='nofollow' target='_blank' title='Follow Us On Instagram'>
  <i class='fab fa-instagram'></i>
</a>
<a class='twt' href='#' rel='nofollow' target='_blank' title='Follow Us On Twitter'>
  <i class='fab fa-twitter'></i>
</a>
<a class='in' href='#' rel='nofollow' target='_blank' title='Follow Us On Mastodon'>
  <i class='fab fa-mastodon'></i>
</a>

修改完成后清除Blogger缓存刷新页面即可正常显示图标。

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