Css 更改 FontAwesome 图标的字体粗细

发布于07月24日

我想把FontAwese图标中的一个做得更轻一些--它比我使用的字体要重得多.现在看起来是这样的:

重型删除图标，轻量级字体旁边 :

很难看，对吧？因此，我try 按如下方式重置字体粗细:

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

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

有没有办法让这个图标不那么重？doctor 说"Anything you can do with CSS font styles, you can do with Font Awesome"，但我不知道怎么做.

推荐答案

2018 Update个

Font Awese5现在有light、regular和solid个变种.此问题中的图标在不同变体下具有以下样式:

fa times variants

对这个问题的一个现代答案是，可以使用图标的不同变体使图标显得更粗体或更轻.唯一的缺点是，如果你已经在使用solid，你必须回到原来的答案，使这些更大胆，同样，如果你使用light，你也必须做同样的事情，使这些更轻.

Font Asome的How To Use个文档介绍了如何使用这些变体.

Original Answer

字体"棒极了"使用的是Private Use region of Unicode.例如，您正在使用的.icon-remove是使用::before伪 Select 器添加的，将其内容设置为\f00d():

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

Font Awese确实只提供了一个字体粗细变体，但是浏览器会像只使用一个变体呈现任何字体一样呈现该字体.如果仔细观察，normal号字体粗细没有bold号粗体粗体.不幸的是，正常的字体粗细不是您想要的.

然而，您可以做的是将其 colored颜色更改为较暗的 colored颜色，并减小字体大小以使其不那么突出.从您的图像来看，"标记"文本看起来比图标亮得多，所以我建议您使用类似于:

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

这是JSFiddle example，here进一步证明了这绝对是一种字体.