我想让其中一个 FontAwesome 图标不那么重 - 它比我使用的字体重得多。这是目前的样子：
：
丑陋，对吧？所以我尝试如下重置字体粗细：
.tag .icon-remove {
font-weight: 100;
}
该属性似乎在 CSS 中设置正确，但没有任何效果 - 图标看起来和以前一样重。我也试过font-weight: lighter 和-webkit-text-stroke-width: 1px 没有效果。
有什么办法可以让图标不那么重吗？文档说“Anything you can do with CSS font styles, you can do with Font Awesome”，但我不知道该怎么做。
【问题讨论】：
content: "×"; 与 verdana 字体为例
标签： css twitter-bootstrap font-awesome
Webkit 浏览器支持向字体添加“笔画”的功能。这种风格让字体看起来更细（假设为白色背景）：
-webkit-text-stroke: 2px white;
此处的 codepen 示例：http://codepen.io/mackdoyle/pen/yrgEH 有些人正在使用 SVG 进行跨平台的“中风”解决方案：http://codepen.io/CrocoDillon/pen/dGIsK
【讨论】：
-webkit-text-stroke: 2px black;看看效果。辉煌;)
2018 年更新
Font Awesome 5 现在具有 light、regular 和 solid 变体。此问题中的图标在不同变体下具有以下样式：
这个问题的现代答案是可以使用图标的不同变体使图标显得更粗或更亮。唯一的缺点是，如果您已经在使用 solid 您将不得不退回到此处的原始答案以使它们更大胆，同样如果您正在使用 light你必须这样做才能使它们更轻。
Font Awesome 的 How To Use 文档介绍了如何使用这些变体。
原答案
Font Awesome 使用了Private Use region of Unicode。例如，您正在使用的这个.icon-remove 是使用::before 伪选择器添加的，将其内容设置为\f00d ()：
.icon-remove:before {
content: "\f00d";
}
Font Awesome 仅带有一种字体粗细变体，但是浏览器会渲染它，因为它们会渲染任何只有一种变体的字体。如果你仔细观察，normal font-weight 没有bold font-weight 粗体。不幸的是，正常的字体粗细不是您所追求的。
但是，您可以做的是将其颜色更改为较暗的颜色并减小其字体大小以使其不那么突出。从您的图像中，“标签”文本看起来比图标轻得多，所以我建议使用类似的内容：
.tag .icon-remove {
color:#888;
font-size:14px;
}
这是JSFiddle example，here 进一步证明这绝对是一种字体。
【讨论】：
只是为了帮助任何访问此页面的人。如果您可以灵活地使用其他图标库，这是一种替代方法。
James 是正确的，您不能更改字体粗细，但是如果您正在寻找更现代的图标外观，那么您可以考虑 ionicons
它有 ios 和 android 版本的图标。
【讨论】：
作者似乎对字体库采取了免费增值的方法，并提供Black Tie 为 Font-Awesome 库赋予不同的权重。
【讨论】：
另一个我用来创建更轻的 fontawesome 图标的解决方案，类似于 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;
}
在ie
【讨论】：
.star-light::after {
content: "\f005";
font-family: "FontAwesome";
font-size: 3.2rem;
color: #fff;
font-weight: 900;
background-color: red;
}
【讨论】：