更改FontAwesome图标的字体粗细？

我想减轻其中一个FontAwesome图标的重量-比我使用的字体重得多。目前的样子：

：

丑陋吧？因此，我尝试按以下方式重置font-weight：

.tag .icon-remove  { 
  font-weight: 100;
}

该属性在CSS中似乎已正确设置，但没有效果-图标看起来和以前一样重。我也试着font-weight: lighter和-webkit-text-stroke-width: 1px没有效果。

有什么办法可以减轻图标的重量？文档说“您可以使用CSS字体样式进行的任何操作，都可以使用Font Awesome进行处理”，但是我不知道该怎么做。

2018更新

Font Awesome 5现在具有浅色，常规和纯色变体。该问题中的图标在不同的变体中具有以下样式：

这个问题的现代答案是可以使用图标的不同变体来使图标显得更大或更亮。唯一的缺点是，如果您已经在使用固体，则必须退回到此处的原始答案以使这些字体更大胆，并且同样，如果您使用的是光，则也必须这样做以使其更轻。

Font Awesome的“如何使用”文档介绍了如何使用这些变体。

原始答案

Font Awesome利用Unicode的Private Use区域。例如，.icon-remove您使用的是使用::before伪选择器添加的，将其内容设置为\ f00d（）：

.icon-remove:before {
    content: "\f00d";
}

Font Awesome确实仅带有一个字体粗细变体，但是浏览器将渲染此字体，因为它们将仅渲染具有一种变体的任何字体。如果仔细观察，normal字体粗细不如bold字体粗细大。不幸的是，普通字体的粗细并不是您想要的。

但是，您可以做的是将其颜色更改为更暗的颜色，并减小其字体大小，以使其显得更突出。从您的图像中，“标签”文本看起来比图标浅得多，因此，我建议使用类似以下的内容：

.tag .icon-remove {
    color:#888;
    font-size:14px;
}

这是一个JSFiddle示例，这进一步证明了这绝对是一种字体。

Webkit浏览器支持将“笔画”添加到字体的功能。这种风格使字体看起来更细（假设白色背景）：

-webkit-text-stroke: 2px white;

此处关于codepen的示例：http ://codepen.io/mackdoyle/pen/yrgEH 某些人正在将SVG用于跨平台的“笔画”解决方案：http : //codepen.io/CrocoDillon/pen/dGIsK

只是为了帮助任何人进入此页面。如果您灵活使用其他图标库，则这是一种替代方法。

James是正确的，您不能更改字体粗细，但是如果您正在寻找更现代的图标外观，则可以考虑 ionicons

它同时具有ios和android版本的图标。

作者似乎对字体库采取了免费增值的方法，并提供了Black Tie来给Font-Awesome库赋予不同的权重。

我用来创建较轻字体效果的另一种解决方案与该webkit-text-stroke方法类似，但更便于携带，它是将图标的颜色设置为与背景相同（或透明），并使用文本阴影创建轮廓：

.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 <10中运行，但至少不限于Webkit浏览器。

.star-light::after {
    content: "\f005";
    font-family: "FontAwesome";
    font-size: 3.2rem;
    color: #fff;
    font-weight: 900;
    background-color: red;
}