更改FontAwesome图标的字体粗细？-Java 学习之路

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

heavy remove icon, next to lightweight font
：

丑，对吗？所以我尝试重置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”，但我无法弄清楚如何做到这一点 .

5 回答

46
2018 Update

Font Awesome 5现在具有轻型，常规和实体变体 . 此问题中的图标在不同的变体下具有以下样式：

对这个问题的现代回答是，可以使用图标的不同变体来使图标看起来更大胆或更轻 . 唯一的缺点是，如果你已经使用固体，你将不得不回到原来的答案，以使那些更大胆，同样如果你使用光，你必须做同样的，使那些更轻 .

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

Original Answer

Font Awesome使用了Private Use region of Unicode . 例如，您正在使用的 .icon-remove 使用 ::before 伪选择器添加，将其内容设置为\ f00d（  ）：
```
.icon-remove:before {
    content: "\f00d";
}
```
Font Awesome只提供一种字体权重变体，但浏览器会渲染它，因为它们只渲染任何一种变体字体 . 如果仔细观察， normal font-weight不会像 bold font-weight那样粗体 . 不幸的是，正常的字体重量不是't what you' .

然而，你可以做的是将它的颜色改为不那么暗的东西，减少它的字体大小，使其显得更加突出 . 从您的图像，“标签”文本显示比图标轻，所以我建议使用类似的东西：
```
.tag .icon-remove {
    color:#888;
    font-size:14px;
}
```
这是JSFiddle example，here进一步证明这绝对是一种字体 .
回复于 2024-05-06T15:34:03+08:00
73
Webkit浏览器支持向字体添加“笔划”的功能 . 这种风格使字体看起来更薄（假设是白色背景）：
```
-webkit-text-stroke: 2px white;
```
有关codepen的示例：http://codepen.io/mackdoyle/pen/yrgEH有些人正在使用SVG来实现跨平台的"stroke"解决方案：http://codepen.io/CrocoDillon/pen/dGIsK
回复于 2024-05-06T15:34:03+08:00
4

只是为了帮助任何人来到这个页面 . 如果您可以灵活使用其他图标库，则可以使用此选项 .

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

它有图标的ios和android版本 .

回复于 2024-05-06T15:34:03+08:00
7

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

回复于 2024-05-06T15:34:03+08:00
26
我用来创建更轻松的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 <10中不起作用，但至少它不限于webkit浏览器 .
回复于 2024-05-06T15:34:03+08:00

更改FontAwesome图标的字体粗细？

5 回答

相关问题