如何修改Vue 3项目中Font Awesome图标的颜色？

问题原因 #

全局通配符*选择器的CSS规则覆盖了Font Awesome图标的颜色继承逻辑：*会匹配到图标渲染后生成的path元素，强制给所有元素设置了color: var(--primary)，导致你在<fa>标签上设置的color样式优先级不足，无法生效。

解决方法 #

方案1（推荐：调整全局CSS规则） #

将通配符中的color定义移到body选择器下，避免通配符强制覆盖所有子元素的颜色属性，修改后main.css的代码如下：

/* variables */
:root {
  --primary: rgb(33, 37, 41); /* was #4f515a; */
  --secondary: rgb(28, 117, 188); /* was #ebebeb; */
  --warning: #da0f41;
}

* {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif; 
  line-height: 1.40; 
  font-size: 1.07rem; 
}
body {
  color: var(--primary);
}

方案2（无需改动原有全局样式） #

新增一条专门针对Font Awesome图标的CSS规则，强制让图标继承父元素的颜色：

svg.svg-inline--fa {
  color: inherit !important;
}

额外优化建议 #

1. 你当前main.js中只导入了FontAwesomeIcon组件，没有完成全局注册，需要补充注册代码才能正常使用<fa>标签：

// 在main.js中创建Vue实例后添加
app.component('fa', FontAwesomeIcon)

2. 导入时重复声明的小写fontAwesomeIcon无实际作用，可以删除避免冲突。
3. 不需要在<fa>标签上写fill属性，Font Awesome图标默认会自动继承当前元素的color作为填充色。

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