Font Awesome 4与5版本冲突：图标不显示原因及简易解决方法

你的问题本质是CSS层叠规则和字体文件加载优先级共同导致的：当两个版本的Font Awesome同时加载时，后加载的CSS会覆盖先加载的同名类样式；而字体文件的加载顺序又会影响浏览器优先使用哪个版本的字形——你发现先加载FA5能解决，就是因为FA5的字体先被浏览器识别，后续FA4的样式覆盖上来时，对应的字形已经存在了。

下面是几个最简便的处理方案，按推荐程度排序：

1. 彻底移除重复版本（最推荐） #

没必要同时加载两个功能重叠的图标库，直接删掉其中一个是最根本的解决办法。在WordPress里可以这么做：

• 先确定多余版本的样式handle：打开浏览器开发者工具的「网络」面板，找到加载的Font Awesome CSS文件，看它的handle（WordPress加载样式时会在link标签的id里包含handle，比如id="font-awesome-4-css"）。
• 在主题的functions.php里添加代码，取消注册这个多余的样式：

  add_action( 'wp_enqueue_scripts', 'remove_duplicate_font_awesome', 100 );
  function remove_duplicate_font_awesome() {
      // 替换成你找到的多余版本的handle
      wp_deregister_style( 'font-awesome-4' );
  }
  

• 之后只保留一个版本的Font Awesome（比如FA5），如果插件还在使用旧版本的类名（比如.fa开头的FA4类），可以搭配FA5的兼容性垫片（看方案2）来兼容。

2. 用FA5兼容性垫片兼容旧类名 #

如果暂时没法移除FA4（比如插件深度依赖FA4的类名），可以用FA5官方提供的fa4-shims.css垫片，它会自动把FA4的类名映射到FA5的对应图标，这样不管是插件的旧类还是网站的新类，都能共用FA5的字体文件，彻底避免冲突。

• 只需要在加载FA5核心CSS之后，再加载这个垫片即可（WordPress里用wp_enqueue_style()添加就行）。

3. 调整加载顺序（临时应急） #

就是你发现的临时解决办法：把FA5的CSS放在FA4之前加载。这样FA5的字体文件先被浏览器加载并优先使用，后续FA4的样式覆盖上来时，同名:before内容的图标就能找到对应的字形。不过这只是权宜之计，长期来看还是推荐前两种方案彻底解决冲突。

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