使用Font Awesome时子菜单图标不显示，找不到图标代码该如何调试

1 排查CSS伪元素注入的图标 #

90%以上的子菜单展开箭头不会显式写<i>标签，而是通过CSS伪元素::before/::after动态注入，这是你在原有代码里找不到对应声明的最常见原因，排查方法：

• 打开浏览器开发者工具（F12），在元素面板选中子菜单的父元素，也就是你代码里的li.sub-menu或者内部的<a>标签
• 查看右侧样式面板的规则列表，找到带::before/::after后缀的CSS规则
• 核对规则中的font-family属性是否为"Font Awesome 5 Free"，content属性是否对应下拉箭头的Unicode编码（\f0d7就是fa-caret-down的官方编码）
• 如果找到对应规则，直接修改该CSS的content值或者选择器即可调整图标样式。

2 排查JS动态插入的图标 #

如果确认不是伪元素生成，大概率是菜单交互逻辑的JS代码在运行时动态给有子菜单的选项追加了图标标签：

• 打开开发者工具的Sources面板，按Ctrl+Shift+F（Mac系统为Cmd+Opt+F）全局搜索关键词：fa-caret-down、caret-down、sub-menu、toggle
• 查看匹配到的JS代码，确认是否有动态创建<i>标签、添加Font Awesome类名后插入到子菜单头部的逻辑。

3 排查版本兼容与图标类名问题 #

你当前使用的是Font Awesome 5.15.4版本，部分图标命名和前缀规则和旧版4.x存在差异：

• 实心风格的图标必须用fas前缀，fa前缀在5.x版本中仅作兼容用，部分图标如果只写fa类不会正常渲染
• 你可以临时在控制台运行以下代码，打印页面所有渲染出来的Font Awesome图标类名和坐标，直接定位目标箭头：

document.querySelectorAll('i[class*="fa-"]').forEach(el => console.log(el.className, el.getBoundingClientRect()))

通过打印的坐标位置就能对应到你要找的箭头图标对应的类名。

4 排查样式覆盖问题 #

如果以上步骤都没找到，有可能是你现有声明的图标被其他高优先级样式覆盖了content值：

• 选中你代码里写的<i class="fa fa-cog">元素，查看右侧样式面板中::before的content属性是否被其他样式覆盖，改成了下拉箭头的编码。

内容的提问来源于stack exchange，提问作者code-8