Angular中如何优化Font Awesome图标：设置白色背景黑色边框

当然可以实现这个效果，直接通过CSS就能搞定，给你两种适配Angular项目的写法：

方法一：组件内局部样式（推荐，不影响其他组件） #

在使用图标的组件对应的.component.css文件中添加以下样式：

/* 给图标包裹容器，用于设置背景和边框 */
.wallet-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1px solid #000000;
  /* 可选：添加圆角让样式更柔和，和Ordres图标风格统一 */
  border-radius: 4px;
  /* 调整内边距控制图标与边框的间距，可按需修改数值 */
  padding: 3px;
}

/* 确保图标本身为黑色 */
.wallet-icon-wrap .fas.fa-wallet {
  color: #000000;
}

随后在组件模板中这样使用图标：

<span class="wallet-icon-wrap">
  <i class="fas fa-wallet"></i>
</span>
<span>Portefeuille</span>

方法二：全局样式（适用于多组件复用该样式） #

在项目根目录的styles.css全局样式文件中添加上述CSS代码，之后所有组件里只要给钱包图标加上wallet-icon-wrap容器，就能自动应用该样式。

这样设置后，fas fa-wallet图标就会呈现白色背景、黑色边框，同时保持图标本身为黑色的效果，和你理想中的样式一致。

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