更改FontAwesome图标的字体重量？

我想提出的FontAwesome图标少了几分沉重 - 它比我现在用的字体要重得多。这究竟是怎么看目前：更改FontAwesome图标的字体重量？

heavy remove icon, next to lightweight font ：

丑陋的，对不对？所以，我已经试过如下重置字体重量：

.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”，但我无法弄清楚如何做到这一点。

来源

2013-07-24 Richard

TL; DR：不，你不能。 – Ben

您可以使用'content：“×”;'与verdana字体例如 – Taras

2018更新

字体真棒5现在拥有光，定期和固体变种。在这个问题上功能的图标具有以下风格下的不同的变体：

fa-times variants

现代这个问题的答案将是图标的不同变体可用于使图标显得更大胆或变浅。唯一的缺点是，如果你已经在使用固体你将不得不回落到原来这里的答案让那些更大胆，同样如果你使用光你必须这样做，使那些更轻。

字体真棒的How To Use文档走过了如何使用这些变种。

原来的答案

字体真棒利用了Private Use region of Unicode的。例如，这.icon-remove您使用的是使用::before伪选择加入，并设置其内容为\ f00d（）：

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

字体真棒确实只配备了一个字体重量变型，但是浏览器将呈现这一点，因为它们只会渲染任何只有一个变体的字体。如果仔细观察，normal字体重量不会像bold字体重量那样粗体。不幸的是，正常的字体重量并不是你所追求的。

什么，但是你可以做的是改变其颜色为深少的东西，减少其字体大小，使其脱颖而出少一点。从你的形象，在“标签”文本显得比图标轻得多，所以我建议使用类似：

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

这里有一个JSFiddle example，并here进一步证明，这绝对是一个字体。

来源

2013-07-24 15:05:50

@JamesDonnelly不仅可以解决手头的问题，而且还提供了直接解决用户端点意图的解决方案。感谢您的好评！ – ThinkBonobo

只是为了帮助别人来到这个页面。如果您灵活使用其他图标库，这是一个替代方案。

詹姆斯是正确的，如果你正在寻找更现代的外观的图标，那么你可以考虑ionicons

它既有iOS和Android版本的图标，但是你不能改变字体粗细。

来源

2015-02-10 15:30:35 Abhi

问题是关于FontAwesome而不是ionicons – Chris

+18

是的，我知道 - 如果有人具有灵活性，这是一个替代方案。 – Abhi

作者似乎采用了免费的字体库方法，并提供Black Tie为Font-Awesome库提供不同的权重。

来源

2015-05-13 13:53:56

Webkit浏览器支持向字体添加“描边”的功能。风格该位使字体看起来更薄（假设在白色背景）：

-webkit-text-stroke: 2px white;

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

来源

2016-04-30 01:14:29 user3303554

真的很聪明的解决方案:) –

惊人的解决方案！ – Hoon

这是一个了不起的解决方案，应该是被接受的答案。你当然可以改变'白色'以匹配字体在背景上的颜色，并且它完美地融合在一起。真棒解决方案。 – Andy

另一个解决方案我用来创建更轻松的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浏览器。

来源

2016-05-17 16:57:28 MBrizzle

更改FontAwesome图标的字体重量？

回答

相关问题