改变FontAwesome图标的字体重量？

我想让其中一个FontAwesome图标重一点 – 它比我使用的字体重得多。这看起来如何：

沉重的删除图标，旁边的轻量级字体：

丑，对吗？所以我尝试重置字体重量如下：

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

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

有什么办法可以让图标不那么沉重？该文档说：“ 任何你可以用CSS字体样式，你可以做Font Awesome ”，但我不知道如何做到这一点。

Font Awesome使用Unicode的专用区域。例如，你使用的这个.icon-remove是使用::before伪select器添加的，它的内容设置为\ f00d（  ）：

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

字体真棒只有一个字体重量的变体，但是浏览器将渲染这个，因为他们将呈现任何字体只有一个变种。如果仔细观察， normal字体重量不会像bold字体一样粗体。不幸的是，一个正常的字体重量不是你所追求的。

然而，你可以做的是将其颜色改变为较暗的颜色，并减小其字体大小以使其突出一点。从您的图片中，“标签”文本看起来比图标轻得多，所以我build议使用如下所示的内容：

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

这里有一个JSFiddle的例子，这里进一步certificate，这绝对是一个字体。

Webkit浏览器支持向字体添加“笔触”的function。这一点的风格使字体看起来更薄（假设白色背景）：

 -webkit-text-stroke: 2px white;

在这里codepen的例子： http ://codepen.io/mackdoyle/pen/yrgEH有些人正在使用SVG的跨平台“中风”解决scheme： http : //codepen.io/CrocoDillon/pen/dGIsK

只是为了帮助任何人来到这个网页。如果您使用其他图标库的灵活性，这是一个替代scheme。

詹姆斯是正确的，你不能改变字体的重量，但是如果你正在寻找更现代的图标，那么你可能会考虑ionicons

它有图标的ios和android版本。

作者似乎采取了免费的方式来提供字体库，并提供黑领带给不同的权重Font-Awesome库。

我用来创build更轻松的fontawesome图标的另一种解决scheme，类似于webkit-text-stroke方法，但更便于携带，将图标的颜色设置为与背景相同（或透明），并使用文本阴影创build一份大纲：

 .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中不起作用，但至less不限于webkit浏览器。