84

我想让其中一个 FontAwesome 图标不那么重——它比我使用的字体重得多。这是它目前的样子：

重删除图标，在轻量字体旁边：

丑陋，对吧？所以我尝试如下重置字体粗细：

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

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

有什么办法可以让图标不那么重吗？文档说“任何你可以用 CSS 字体样式做的事情，你都可以用 Font Awesome 做”，但我不知道该怎么做。

4

6 回答 6

125

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

-webkit-text-stroke: 2px white;

这里的 codepen 示例：http://codepen.io/mackdoyle/pen/yrgEH有些 人使用 SVG 进行跨平台“中风”解决方案：http ://codepen.io/CrocoDillon/pen/dGIsK

于 2016-04-30T01:14:29.623 回答
61

2018 更新

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

fa-time 变体

这个问题的现代答案是，可以使用图标的不同变体使图标看起来更粗或更亮。唯一的缺点是，如果你已经在使用纯色，你将不得不回到这里的原始答案以使它们更大胆，同样，如果你使用光，你必须做同样的事情来使它们更轻。

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

于 2013-07-24T15:05:50.660 回答
30

只是为了帮助任何来到这个页面的人。如果您可以灵活地使用其他图标库，这是一种替代方法。

James 是正确的，您无法更改字体粗细，但是如果您正在寻找更现代的图标外观，那么您可能会考虑使用 ionicons

它有 ios 和 android 版本的图标。

于 2015-02-10T15:30:35.380 回答
7

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

于 2015-05-13T13:53:56.480 回答
6

我用来创建更轻的 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 <10，但至少它不限于webkit 浏览器。

于 2016-05-17T16:57:28.027 回答
0 
.star-light::after {
    content: "\f005";
    font-family: "FontAwesome";
    font-size: 3.2rem;
    color: #fff;
    font-weight: 900;
    background-color: red;
}
于 2019-10-09T03:19:12.393 回答