Font Awesome图标插入HTML失败问题求助

核心原因：版本不匹配 #

你引入的是Font Awesome 5.15.3版本，但使用的是Font Awesome 6才启用的命名规则：

• 5.x版本没有fa-solid这类前缀，统一用fa作为基础前缀；
• fa-magnifying-glass-minus是6.x的图标名称，5.x中对应的图标名为fa-search-minus。

这就是为什么fa fa-envelope能正常显示（符合5.x命名规则），而新写法失效的原因。

两种解决办法 #

• 适配当前5.x版本：把图标代码改成5.x的写法

  <p class="icon"><i class="fa fa-search-minus"></i></p>
  

• 升级到Font Awesome 6版本：更换引入的CSS文件为6.x版本，之后就可以正常使用fa-solid fa-magnifying-glass-minus这类新命名的图标。

内容的提问来源于stack exchange，提问作者Tran Thi Diem Quynh