字体真棒背景色 [英] Font Awesome Background color

问题描述

使用出色的Font Awesome时，如何使图标不透明-例如，如果我想使用

When using the brilliant Font Awesome, how can I make the icons not transparent - for instance if I want to use http://fortawesome.github.io/Font-Awesome/icon/chevron-circle-up/ but not have the "up arrow" within the black circle be transparent but solid color (white)?

谢谢！

推荐答案

更新: 正如xavier在下面指出的那样，font-awesome具有堆叠的图标，这样您就可以在图标后面放一个圆圈，而无需使用hack.本质上，您可以将所需的任何图标堆叠在其fa-circle图标之上.然后，您可以独立于图标设置圆形的样式，然后将其更改为所需的任何颜色.

UPDATE: As xavier pointed out below, font-awesome has Stacked Icons which will let you put a circle behind an icon without using a hack. Essentially, you stack whichever icon you want on top of their fa-circle icon. You can then style the circle independently from the icon and change it to whatever color you'd like.

这是一个基于他们网站上的代码的示例:

Here's an example based off of code from their site:

.fa-circle {
  color: black;
}

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<span class="fa-stack" style="vertical-align: top;">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-chevron-up fa-stack-1x fa-inverse"></i>
</span>

原始答案: 不幸的是，整个图标被认为是页面上的单个字符"，因此，您对它没有那么细致的控制.您只需设置一个颜色"属性即可将字符/图标的颜色设置为您想要的颜色.

ORIGINAL ANSWER: Unfortunately, the whole icon is considered a single "character" on the page and as such, you don't have that granular of control over it. You can simply set a single "color" property to set the color of the character/icon to be what you want.

现在，尽管有可能进行创造性的黑客攻击.由于字符的中间是透明的，因此可以通过执行以下操作来在字符后面设置彩色背景，以使该字符看起来像是另一种颜色:

Now, it is possible for a creative hack though. Since the middle of the character is transparent, you can set a colored background behind the character to make it appear that the middle is a different color by doing something like this:

    <i class="fa fa-chevron-circle-up"></i>

然后在您的CSS中:

.fa-chevron-circle-up {
  background: yellow;
  border-radius: 50%;
  height: 1em;
  width: 1em;
}

如果背景圆圈使图标偏移，则可以使用line-height对其进行修复.

If the background circle offsets the icon, you can use line-height to fix it.

这篇关于字体真棒背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！