CSS 更改 FontAwesome 图标的字体粗细？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17836851/
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
Change font-weight of FontAwesome icons?
提问by Richard
I'd like to make one of the FontAwesome icons a bit less heavy - it's much heavier than the font I am using. This how it looks presently:
我想让其中一个 FontAwesome 图标轻一点 - 它比我使用的字体重得多。这是它目前的样子：
:
：
Ugly, right? So I've tried resetting the font-weight as follows:
丑对不对？所以我尝试按如下方式重置字体粗细：
.tag .icon-remove {
font-weight: 100;
}
The attribute appears to be set correctly in the CSS, but it has no effect - the icon looks just as heavy as before. I've also tried font-weight: lighterand -webkit-text-stroke-width: 1pxwith no effect.
该属性似乎在 CSS 中设置正确，但没有任何效果 - 图标看起来和以前一样沉重。我也试着font-weight: lighter和-webkit-text-stroke-width: 1px没有效果。
Is there any way I can make the icon less heavy? The docs say "Anything you can do with CSS font styles, you can do with Font Awesome" but I can't figure out how to do this.
有什么办法可以让图标不那么重吗？文档说“你可以用 CSS 字体样式做任何事情，你可以用 Font Awesome 做”，但我不知道如何做到这一点。
采纳答案by James Donnelly
2018 Update
2018 更新
Font Awesome 5 now features light, regularand solidvariants. The icon featured in this question has the following style under the different variants:
Font Awesome 5 现在具有light、regular和solid变体。此问题中的图标在不同变体下具有以下样式：
A modern answer to this question would be that different variants of the icon can be used to make the icon appear bolder or lighter. The only downside is that if you're already using solidyou will have to fall back to the original answers here to make those bolder, and likewise if you're using lightyou'd have to do the same to make those lighter.
这个问题的现代答案是可以使用图标的不同变体来使图标显得更粗或更亮。唯一的缺点是，如果你已经在使用solid，你将不得不回到这里的原始答案来使那些更大胆，同样，如果你使用光，你必须做同样的事情来使那些更轻。
Font Awesome's How To Usedocumentation walks through how to use these variants.
Font Awesome 的How To Use文档介绍了如何使用这些变体。
Original Answer
原答案
Font Awesome makes use of the Private Use region of Unicode. For example, this .icon-removeyou're using is added in using the ::beforepseudo-selector, setting its content to \f00d ():
Font Awesome 使用Unicode的Private Use 区域。例如，.icon-remove您正在使用的这个是使用::before伪选择器添加的，将其内容设置为 \f00d ( )：
.icon-remove:before {
content: "\f00d";
}
Font Awesome does only come with one font-weight variant, however browsers will render this as they would render any font with only one variant. If you look closely, the normalfont-weight isn't as bold as the boldfont-weight. Unfortunately a normal font weight isn't what you're after.
Font Awesome 只提供一种字体粗细的变体，但是浏览器会渲染它，就像它们只用一种变体渲染任何字体一样。如果仔细观察，normal字体粗细不像字体粗细那么粗bold。不幸的是，正常的字体粗细不是您所追求的。
What you can do however is change its colour to something less dark and reduce its font size to make it stand out a bit less. From your image, the "tags" text appears much lighter than the icon, so I'd suggest using something like:
但是，您可以做的是将其颜色更改为不那么暗的颜色并减小其字体大小以使其不那么突出。从您的图像中，“标签”文本看起来比图标轻得多，因此我建议使用以下内容：
.tag .icon-remove {
color:#888;
font-size:14px;
}
Here's a JSFiddle example, and hereis further proof that this is definitely a font.
这是一个JSFiddle 示例，这里进一步证明这绝对是一种字体。
回答by user3303554
Webkit browsers support the ability to add "stroke" to fonts. This bit of style makes fonts look thinner (assuming a white background):
Webkit 浏览器支持向字体添加“笔画”的功能。这种风格使字体看起来更细（假设背景为白色）：
-webkit-text-stroke: 2px white;
Example on codepen here: http://codepen.io/mackdoyle/pen/yrgEHSome people are using SVG for a cross-platform "stroke" solution: http://codepen.io/CrocoDillon/pen/dGIsK
codepen 示例：http://codepen.io/mackdoyle/pen/yrgEH 有些人将 SVG 用于跨平台“中风”解决方案：http: //codepen.io/CrocoDillon/pen/dGIsK
回答by Abhi
Just to help anyone coming to this page. This is an alternate if you are flexible with using some other icon library.
只是为了帮助任何来到此页面的人。如果您可以灵活地使用其他一些图标库，这是一种替代方法。
James is correct that you cannot change the font weight however if you are looking for more modern look for icons then you might consider ionicons
James 是正确的，您不能更改字体粗细，但是如果您正在寻找更现代的图标外观，那么您可以考虑使用ionicons
It has both ios and android versions for icons.
它有 ios 和 android 版本的图标。
回答by Matthew Steeples
回答by MBrizzle
Another solution I've used to create lighter fontawesome icons, similar to the webkit-text-strokeapproach but more portable, is to set the color of the icon to the same as the background (or transparent) and use text-shadow to create an outline:
我用来创建更轻的字体图标的另一个解决方案，类似于该webkit-text-stroke方法但更便携，是将图标的颜色设置为与背景（或透明）相同，并使用 text-shadow 创建轮廓：
.fa-outline-dark-gray {
color: #fff;
text-shadow: -1px -1px 0 #999,
1px -1px 0 #999,
-1px 1px 0 #999,
1px 1px 0 #999;
}
It doesn't work in ie <10, but at least it's not restricted to webkit browsers.
它在 ie <10 中不起作用，但至少它不限于 webkit 浏览器。
回答by ?zay Akba?
.star-light::after {
content: "\f005";
font-family: "FontAwesome";
font-size: 3.2rem;
color: #fff;
font-weight: 900;
background-color: red;
}
