想要使超棒的字体图标更薄

Question

我正在使用很棒的字体图标，但问题是它们有默认的字体粗细。我想要它薄一点。但它不起作用

我的html代码

    <span class="fa-stack fa-lg fa-5x color-red">
    <i class="fa fa-circle-thin fa-stack-2x"></i>
    <i class="fa fa-trophy"></i>
    </span>

我的css代码

    .fa-trophy{
      font-weight:lighter;
     }

Answer 1

抱歉，使用标准无法做到这一点（如果它在您的项目中不重要，您可以使用 Kiryl Ply 的建议）。 Font-Awesome 仅带有一种字体粗细变体。有一个新项目可以解决这个问题（尚未准备好）：

https://www.kickstarter.com/projects/232193852/font-awesome-black-tie

您可以寻找另一个更薄的库，尝试 Google 中的 "icon font"。

Answer 2

您可以在 webkit 中修复它：

-webkit-text-stroke: 1px background-color;

Answer 3

我知道这是一个老问题，但希望我的回答可以帮助那些在堆叠两个很棒的字体图标时想要更细的圆圈的人。在我偶然发现这个 article 之前，我花了很多时间和精力，它帮助我朝着正确的方向前进。我的解决方案：

<span class="fa-stack fa-3x">
   <i class="fa fa-circle fa-stack-2x icon-circle"></i>
   <i class="fa fa-leaf fa-stack-1x"></i>
</span>

.icon-circle{
color: transparent !important;
border: 5px solid #YourColor;
border-radius: 50%;}

当我清理代码时，我可能会删除 !important 标记，但这是我找到解决方案 5 分钟后代码的样子。

Answer 4

试试这个

  .class-name i{
        -webkit-text-stroke: 2px white;
    }

Answer 5

.yourclass::before{    
content: "\f07a";
    font-family: 'Font Awesome 5 Free';
    margin-right: 10px;
    -webkit-text-stroke: 0.5px white;
    color: transparent;
}

这对我有用，将颜色更改为透明并添加您喜欢的颜色的文字描边，如果需要，您还可以将文字描边更改为 1px 或更大。

想要使超棒的字体图标更薄

Want to make font-awesome icons thinner

html

css

twitter-bootstrap

font-awesome