FontAwesome图标样式失效问题排查（疑似Bug，移除JS CDN后恢复）

这可不是FontAwesome的Bug哦，而是你同时加载了CSS版本和JS版本的FontAwesome导致的元素替换冲突，我给你理清楚来龙去脉：

1. 两种加载方式的核心差异 #

• CSS版本：直接通过<i>标签加类名（比如fa fa-user）来渲染图标，本质是用CSS伪元素或字体文件来展示，<i>标签本身会保留在DOM里。
• JS版本：它会自动把页面里的<i>图标标签替换成<svg>元素，用矢量SVG来渲染图标——这就导致你原来给<i>写的自定义CSS样式直接“失效”了，因为目标元素已经变成<svg>，你的样式找不到对应的标签了。

2. 为什么移除JS CDN就正常？ #

当你删掉JS CDN后，页面只会用CSS版本渲染图标，<i>标签不会被替换，你写的.input-with-icon i样式就能准确作用到图标上，自然显示正常。

3. 解决办法（二选一） #

方案一：只用CSS版本（推荐静态图标场景） #

就像你现在做的这样，只保留<link>引入的CSS文件，不需要加载JS——这种方式轻量，适合不需要动态修改图标的场景。

方案二：适配JS版本（需要动态图标功能时） #

如果你需要用JS版本的特性（比如动态切换图标、图标动画等），只需要把你的CSS选择器从<i>改成<svg>，同时调整尺寸匹配原图标大小：

.input-with-icon svg {
  position: absolute;
  left: 0;
  top: 8px;
  padding: 9px 8px;
  color: #aaa;
  transition: 0.3s;
  width: 1.375em; /* 对应fa-lg的默认尺寸，保证和原图标大小一致 */
  height: 1.375em;
}

简单来说，这是两种加载模式的设计差异，并不是Bug——根据你的需求选对加载方式，再适配对应的CSS选择器就可以啦～

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