更改FontAwesome图标的字体粗细？

Question

我想让其中一个FontAwesome图标稍微沉重一点 - 它比我使用的字体重得多。这就是它目前的样子：

：

丑陋，对吗？所以我尝试重置font-weight，如下所示：

.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”，但我无法弄清楚如何做到这一点。

Answer 1

Webkit浏览器支持添加＆＃34; stroke＆＃34;字体。这种风格使字体看起来更薄（假设是白色背景）：

-webkit-text-stroke: 2px white;

有关codepen的示例：http://codepen.io/mackdoyle/pen/yrgEH 有些人正在使用SVG进行跨平台的行程＆＃34;解决方案：http://codepen.io/CrocoDillon/pen/dGIsK

Answer 2

2018年更新

Font Awesome 5现在具有 light ，常规和 solid 变体。此问题中的图标在不同的变体下具有以下样式：

这个问题的现代答案是，图标的不同变体可用于使图标显得更大或更亮。唯一的缺点是，如果你已经使用 solid ，那么你将不得不回到这里的原始答案，以使那些更大胆，同样如果你使用光你必须做同样的事情来制造那些更轻的。

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进一步证明这绝对是一种字体。

Answer 3

只是为了帮助任何人访问此页面。如果您可以灵活使用其他图标库，则可以使用此选项。

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

它有图标的ios和android版本。

Answer 4

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

Answer 5

我用来创建更轻松的fontawesome图标的另一个解决方案，类似于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＆lt; 10中不起作用，但至少它不限于webkit浏览器。

Answer 6

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