Font Awesome 5图标样式表中Unicode显示异常，求技术排查

嘿，我来帮你搞定这个FontAwesome的问题！你遇到的显示异常其实是两个常见问题叠加导致的，咱们一步步拆解解决：

问题根源 #

1. BBcode解析的转义坑：InvisionFree的[dohtml]标签在处理内容时，会把CSS里的单个反斜杠\转义成HTML实体\（也就是你看到的\，是二次转义后的结果）。这直接搞乱了FontAwesome需要的图标编码\f0d7，自然没法正确显示图标。
2. FontAwesome v5的配置错误：从v5版本开始，FontAwesome拆分了字体族，原来的FontAwesome字体名已经失效了；而且你要的向下箭头图标属于solid样式，需要设置font-weight: 900，你用的bold（对应权重700）并不匹配。

具体修复步骤 #

方案一：修正CSS代码（推荐） #

把CSS里的反斜杠改成双重的，同时更新字体族和权重，让论坛解析后能保留正确的编码：

.accordion:after {
    content: "\\f0d7"; /* 双重反斜杠避免被转义 */
    color: #9E3E39;
    font-weight: 900; /* 适配v5 solid图标必须的权重 */
    float: right;
    font-size: 15px;
    margin-left: 5px;
    margin-top: -80px;
    font-family: 'Font Awesome 5 Free'; /* v5正确的字体族名 */
}

方案二：绕过CSS，直接插图标元素 #

如果CSS方法还是有问题，咱们换个思路，直接用FontAwesome的类名插入图标，完全避开转义问题：

<div class="accordion">
    你的折叠面板内容
    <i class="fas fa-caret-down" style="color: #9E3E39; font-weight: 900; float: right; font-size: 15px; margin-left: 5px; margin-top: -80px;"></i>
</div>

测试小技巧 #

修改完代码后，先在论坛的测试帖里用[dohtml]包裹测试。可以打开浏览器的开发者工具，查看.accordion:after的CSS属性，确认content值是不是显示为\f0d7，而不是转义后的实体——如果是前者，那就没问题啦。

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