Font Awesome图标出现异常内边框/阴影问题 求解决方法

你已经排除了border、box-shadow、outline、text-shadow的影响，剩下可以按下面的步骤排查解决：

• 新增禁用filter和字体平滑属性
  你漏了CSS的filter属性，很多父样式的drop-shadow会被图标继承，产生类似内部阴影的效果，加上字体抗锯齿配置就能解决90%的图标渲染异常，给你的Font Awesome图标统一加如下样式：

.fas {
  filter: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: transparent !important;
}

• 修复代码中多余的闭合标签
  你贴的HTML里<div class="collapsible-header">闭合后，连续多了2个多余的</div>标签，错误的嵌套结构会导致样式异常继承，先删掉这两个多余的闭合标签。
• 移除重复的尺寸定义
  你给马图标同时加了fa-2x类和手动定义font-size: 40px !important，重复的缩放规则会导致浏览器渲染字体图标时出现像素错位，看起来像有阴影边框，删掉其中一个尺寸定义即可。
• 检查Font Awesome资源正确性
  确认你引入的Font Awesome版本支持你用的图标：fa-horse是5.11.0版本才新增的solid类图标，如果你的引入版本低于这个，会出现图标渲染错乱的问题；同时检查浏览器控制台有没有Font Awesome字体文件（.woff/.woff2）加载失败、跨域的报错，资源加载不完全也会导致图标显示异常。

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