带有 Font Awesome 灯图标的 CSS 内容答案

【问题标题】：CSS Content with a Font Awesome light icon带有 Font Awesome 灯图标的 CSS 内容
【发布时间】：2018-11-11 00:59:41
【问题描述】：

我有以下 CSS 代码

content: "\f061";
color: #006697;
font-family: FontAwesome;

在元素之后添加一个右箭头，但我希望箭头是浅色而不是粗体。字体粗细属性不起作用，我不能在内容属性中添加像“i class="fal fa-arrow-right" 这样的 HTMT。

有谁知道我怎么能做到这一点？谢谢

编辑：我发现这种方法可以减轻笔画的重量
-webkit-text-stroke: 2px #3EC5E6; 但我的问题是我正在使用不透明的背景，并且由于 alpha 的原因，我在匹配颜色方面遇到了一些问题

编辑2 我切换到 RGB 颜色而不是 RGBA，上面的解决方案现在效果很好

【问题讨论】：

【解决方案1】：

不确定 FA5 Pro 中的某些内容在最近的版本中是否发生了变化，但 Reza Saadati 接受的答案对我不起作用 - 我必须这样做：

p:before{
    font-family:"Font Awesome 5 Pro";
    font-weight:300;
    content:"\f10d";
}

【讨论】：

【解决方案2】：

您可能使用fas 和fa-arrow-right 类。而不是fas 使用fal。但这仅适用于 Font Awesome 5 Pro。

编辑：

使用font-family: "Font Awesome 5 Light"，这也适用于 Font Awesome 5 Pro。

【讨论】：