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

您可以使用以下命令在webkit中修复它：

_.first

Answer 2

试试这个

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

Answer 3

很抱歉，使用标准是不可能的（如果在您的项目中不重要，您可以使用Kiryl Ply建议）。 Font-Awesome只有一个字体重量变体。有一个新项目来解决这个问题（尚未准备好）：

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

你可以寻找另一个更薄一点的图书馆，在Google中尝试“icon font”。

Answer 4

我知道这是一个老问题，但希望我的回答可以帮助那些想要一个更薄的圆圈，当堆叠两个字体真棒图标时。在我偶然发现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 5

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

这为我完成了工作，将颜色更改为透明并添加了您喜欢的颜色的文本笔触，并且您还可以根据需要将文本笔触更改为1px或更多。

想要使字体真棒图标更薄

5 个答案: