如何反转Font Awesome加号圆圈图标颜色并自定义样式

你需要的效果是灰色轮廓圆圈，内部填充灰色加号，圆圈无背景色，不用复杂的伪元素叠加，直接用Font Awesome官方的图标堆叠（fa-stack）就能实现，以下是修正后的代码：

解决方案代码 #

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet"/>
<div class="fa-stack fa-lg custom-icon">
  <!-- 空心圆圈（轮廓） -->
  <i class="fa-regular fa-circle fa-stack-2x"></i>
  <!-- 实心加号 -->
  <i class="fa-solid fa-plus fa-stack-1x"></i>
</div>

CSS

.custom-icon {
  color: #a3a1a1; /* 统一设置轮廓和加号的灰色 */
}

代码说明 #

1. 图标堆叠原理：fa-stack是Font Awesome专门用来叠加图标的容器，fa-stack-2x表示占2倍尺寸的底层图标（空心圆圈），fa-stack-1x表示占1倍尺寸的上层图标（加号），两者自动居中对齐。
2. 选择正确的图标类：
   • fa-regular fa-circle是空心圆圈（仅显示轮廓，无背景），正好符合你需要的圆圈样式；
   • fa-solid fa-plus是实心加号，填充颜色后就是你要的内部效果。
3. 颜色控制：父元素.custom-icon的color会被两个子图标继承，如果你需要单独调整轮廓或加号的颜色，直接给对应图标类设置color即可。

原有代码无效原因 #

你之前用伪元素叠加fa-plus-circle本身，导致图标重复，且没有利用Font Awesome内置的空心圆圈类，反而用了复杂的定位和透明色设置，反而达不到预期效果。

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