时间戳

首页 > 解决方案 > 带有 Font Awesome 灯图标的 CSS 内容

css - 带有 Font Awesome 灯图标的 CSS 内容

问题描述

我有以下 CSS 代码

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

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

任何人都知道我怎么能做到这一点？谢谢

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

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

标签： cssfont-awesome

解决方案

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

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

推荐阅读