更改FontAwesome图标的字体粗细？

Question

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

:

丑,对吧？所以我尝试重置font-weight如下:

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

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

有什么方法可以让图标减轻重量吗？文档说" 你可以用CSS字体样式做什么,你可以用Font Awesome做 ",但我无法弄清楚如何做到这一点.

Answer 1

Webkit浏览器支持向字体添加"笔划"的功能.这种风格使字体看起来更薄(假设为白色背景):

-webkit-text-stroke: 2px white;

关于codepen的例子:http://codepen.io/mackdoyle/pen/yrgEH 有些人正在使用SVG来实现跨平台的"笔画"解决方案:http://codepen.io/CrocoDillon/pen/dGIsK

Answer 2

2018年更新

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

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

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

原始答案

Font Awesome使用Unicode的Private Use区域.例如,.icon-remove您正在使用的是使用::before伪选择器添加它,将其内容设置为\ f00d():

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

Font Awesome只提供一种字体权重变体,但是浏览器会渲染它,因为它们只渲染任何一种变体字体.仔细观察,normalfont-weight不像font-weight那样粗体bold.不幸的是,正常的字体重量不是你想要的.

然而,你可以做的是将它的颜色改为不那么暗的东西,减少它的字体大小,使其显得更加突出.从您的图像,"标签"文本显示比图标轻得多,所以我建议使用类似的东西:

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

这是一个JSFiddle示例,这里进一步证明这绝对是一种字体.

Answer 3

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

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

它有图标的ios和android版本.

Answer 4

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

Answer 5

我用来创建较浅的字体效果图标的另一种解决方案与该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浏览器。