更改FontAwesome图标的字体重量？ [英] Change font-weight of FontAwesome icons?

问题描述

我想使其中一个FontAwesome图标少一点 - 它比我使用的字体更重。这是目前的样子：

I'd like to make one of the FontAwesome icons a bit less heavy - it's much heavier than the font I am using. This how it looks presently:

：

丑陋，对不对？所以我试过重置font-weight如下：

Ugly, right? So I've tried resetting the font-weight as follows:

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

该属性似乎在CSS中正确设置， - 图标看起来像以前一样重。我也尝试过 font-weight：lighter 和 -webkit-text-stroke-width：1px 。

The attribute appears to be set correctly in the CSS, but it has no effect - the icon looks just as heavy as before. I've also tried font-weight: lighter and -webkit-text-stroke-width: 1px with no effect.

有没有办法使图标变得更轻？文档说任何你可以做的CSS字体样式，你可以做的Font Awesome 但我不知道如何做到这一点。

Is there any way I can make the icon less heavy? The docs say "Anything you can do with CSS font styles, you can do with Font Awesome" but I can't figure out how to do this.

推荐答案

robooneus说的部分不正确。 Font Awesome仅在包含IE7样式表时提供图像;

What robooneus has said is partly incorrect. Font Awesome only provides an image when the IE7 stylesheet is included; and even then the image is only provided to IE7.

Font Awesome使用了 Unicode的私人使用区域。例如，使用 :: before 伪选择器之前添加的 .icon-remove 将其内容设置为\f00d（&＃xF00D; ）：

Font Awesome makes use of the Private Use region of Unicode. For example, this .icon-remove you're using is added in using the ::before pseudo-selector, setting its content to \f00d ():

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

Font Awesome只有一个font-weight变体，这是因为他们会呈现任何只有一个变体的字体。如果仔细看，正常字体粗细不像粗略的粗体 font-weight。不幸的是，一个正常的字体重量不是你以后的。

Font Awesome does only come with one font-weight variant, however browsers will render this as they would render any font with only one variant. If you look closely, the normal font-weight isn't as bold as the bold font-weight. Unfortunately a normal font weight isn't what you're after.

然而，你可以做的是将其颜色更改为不太黑暗，减少字体大小脱颖而出。从您的图片中，标签文字显示的比图标轻得多，因此我建议使用类似以下的内容：

What you can do however is change its colour to something less dark and reduce its font size to make it stand out a bit less. From your image, the "tags" text appears much lighter than the icon, so I'd suggest using something like:

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

这是一个 JSFiddle示例，而且此处进一步证明这绝对是一种字体。

Here's a JSFiddle example, and here is further proof that this is definitely a font.

这篇关于更改FontAwesome图标的字体重量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！