Html 想让字体很棒的图标更薄
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28560118/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Want to make font-awesome icons thinner
提问by Daniel
I was working with font awesome icons but the problem is they have default font weight . i want it a little bit thinner. but its not working
我正在使用字体真棒图标，但问题是它们具有默认字体粗细。我想要它更薄一点。但它不工作
my html code
我的 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>
my css code
我的 css 代码
.fa-trophy{
font-weight:lighter;
}
采纳答案by kurroman
Sorry, it′s not possible to do that using standards (if it is not important in your project you can use the Kiryl Ply suggestion). Font-Awesome comes with just one font-weight variant. There is a new project to solve that problem (not ready yet):
抱歉，使用标准无法做到这一点（如果它在您的项目中不重要，您可以使用 Kiryl Ply 建议）。Font-Awesome 只有一种字体粗细变体。有一个新项目可以解决这个问题（还没准备好）：
https://www.kickstarter.com/projects/232193852/font-awesome-black-tie
https://www.kickstarter.com/projects/232193852/font-awesome-black-tie
you could look for another library with a bit thinner aspect, try "icon font" in Google.
你可以寻找另一个更薄的库，试试谷歌中的“图标字体”。
回答by Kiryl Plyashkevich
You can fix it in webkit with:
您可以在 webkit 中修复它：
-webkit-text-stroke: 1px background-color;
回答by Milan Panigrahi
try with this
试试这个
.class-name i{
-webkit-text-stroke: 2px white;
}
回答by Preben Hesvik
I know this is an old question, but hopefully my answer can help someone who wants a thinner circle when stacking two font awesome icons. I spent a lot of time and energy before I stumbled across this articlewhich helped me in the right direction. My solution:
我知道这是一个老问题，但希望我的回答可以帮助那些在堆叠两个字体真棒图标时想要更薄圆圈的人。在我偶然发现这篇帮助我朝着正确方向前进的文章之前，我花了很多时间和精力。我的解决方案：
<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%;}
When I clean up my code I can probably remove the !importanttag, but this is how my code looks 5 minutes after I found my solution.
当我清理我的代码时，我可能可以删除!important标签，但这就是我找到解决方案 5 分钟后我的代码的样子。
