如何设置字体真棒图标的图标颜色,大小和阴影样式


Answers:


466

鉴于它们只是字体,那么您应该能够将它们设置为字体样式:

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}

4
@大卫·托马斯:这是一个很好的解决方案。感谢您发布。但是,我仍然困惑为什么字体真棒有时以白色显示图标,有时以黑色显示图标。什么把戏?正如GirlCanCode2所指出的,FA网站上的示例同时显示了黑白图标和文本。。。检查Firebug中的元素,但是,特定图标(例如,icon-info)的CSS被覆盖为白色。那真的是我们要做的吗?没有像bootstrap.css中一样的图标白色选项?
2013年

1
改变颜色,检查在SO,希望可以帮助别人
shaijut

@Ace我知道这很老了,您现在可能已经知道了,但是对于其他人,还有一个问题,您可能想在这里这里仔细研究。要知道的另一件事是CSS级联。例如,除非其他样式和样式表的样式规则选择器不太具体(如特殊性),否则它们将被应用。因此,我最喜欢的做法是至少匹配特定性,然后放置样式以进行覆盖。
约翰

158

您也可以只添加内联样式:

<i class="icon-ok-sign" style="color:green"></i>

<i class="icon-warning-sign" style="color:red"></i>

7
尽管精英人士投了反对票,但这个答案还是不错的。因为字体真棒是一种字体,所以它会影响影响文本的样式和类。
AaronLS 2013年

16
@NightOwl最好的做法是使用缩小,捆绑和缓存这些资源。此处没有一个答案能说明任何这些问题,精英IMO是试图在一个孤立的答案中遵循最佳实践的方法。任何了解CSS的人都应该能够采用这种样式并将其移入CSS类。
AaronLS

4
@NightOwl就最佳实践而言,即使是投票最高的答案也非常糟糕。您不应在通过#id引用元素的共享CSS文件中创建样式,因为在每个页面上只有一个元素可以订阅该样式。如果出于这个原因我投票否决,我会不会是位精英主义者?两位答题者都做出了有效的努力,以向问询者提供有用的信息,我认为当答案确实有效时,他们不应被低估。
AaronLS

31
如果有人想suppliment带有注释表明它是不使用内联样式一般最佳实践的答案,那么这将是适当的。 当某人本可以通过添加评论来简单地提高答案的现有价值时,不应因为这样的琐事而贬低一个有效而翔实的答案
AaronLS

1
对我来说,将简单的彩色CSS指令放入自己的类并将其与CSS资源捆绑在一起是没有意义的。你会怎么做?class='icon-ok-sign my-red-class'?还是class='icon-ok-sign-red'?这使其可读性降低,并增加了无用的复杂度。
nurettin

114

如果同时使用Bootstrap,则可以使用:

<i class="fa fa-check-circle-o fa-5x text-success" ></i>

除此以外:

<i class="fa fa-check-circle-o fa-5x" style="color:green"></i>

1
当然,该问题的解决方案不涉及使用引导程序
JG Estiot

1
它可能不需要引导,但这就是我发现此问题的方式。谢谢麋鹿!
Will Lovett

1
您可以从屏幕截图中看到他们已经在使用引导程序。继续使用它来保持相同的调色板而不是重复的代码将是有意义的。
西蒙·路易克

细微但重要的是:文本成功是文本颜色,而不是btn成功按钮表面的颜色。因此,如果您希望图标看起来像“扁平按钮”,则文本成功将略有不同。我发现这在文字警告中最为明显,因为它是难看的黄色而不是非常明显的橙色
Josh Petitt

44

看起来FontAwesome图标颜色响应文本信息,文本错误等。

<div style="font-size: 44px;">
   <i class="icon-umbrella icon-large text-error"></i>
</div>

8
对于Bootstrap,<i class =“ fa fa-warning text-danger”> </ i>
Mastro

至少对我来说,这可能是此页面上的最佳答案,因为我已经在使用Bootstrap,并且符合该范例。
杰克·多伦多

17

inyour.css文件:

    *.icon-white {color: white}
    *.icon-silver {color: silver}

inyour.html文件:

    <a><i class="icon-book icon-white"></i> Book</a>
    <a><i class="icon-ok-sign icon-silver"></i> OK</a>

13

有一种非常简单的方法来更改“真棒字体”图标的颜色。

<!-- Font Awesome insert code -->
<script src="https://use.fontawesome.com/49b98aaeb5.js"></script>
<!-- End -->
<i class="fa fa-thumbs-up fa-5x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-4x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-3x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-2x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up" aria-hidden="true" style="color:#00cc6a"></i>

您可以根据自己的喜好更改十六进制代码。注:文字颜色将改变图标的颜色,以及除非有一个style="color:#00cc6a"的内i标签。


9

使用FA 4.4.0添加

.text-danger
    color: #d9534f

到文档css,然后使用

 <i class="fa fa-ban text-danger"></i>

将颜色更改为红色。您可以为任何颜色设置自己的颜色。


9
For Size : fa-lg, fa-2x, fa-3x, fa-4x, fa-5x.

For Color : <i class="fa fa-link fa-lg" aria-hidden="true"style="color:indianred"></i>

For Shadow : .fa-linkedin-square{text-shadow: 3px 6px #272634;}

8

http://fortawesome.github.io/Font-Awesome/examples/

<i class="icon-thumbs-up icon-3x main-color"></i>

在这里,我在CSS中定义了一个全局样式,其中main-color是一个类,在我的情况下是浅蓝色。我发现在带有Font Awesome的图标上使用内联样式效果很好,特别是在您以语义方式命名颜色的情况下,例如,如果您想要单独的颜色,请使用nav-color,等等。

在他们网站上的这个示例中,以及我在示例中的编写方式,最新版本的Font Awesome稍稍更改了调整大小的语法,之前它是:

icon-xxlarge

现在我必须在哪里使用:

icon-3x

当然,这完全取决于您在环境中安装的哪个版本的Font Awesome。希望这可以帮助。


7

在FontAwesome 4.0中,类更改为“ fa-2x”,“ fa-3x”。


7

只需在CSS文件中定义一个类并将其级联为html文件即可,例如

<i class="fa fa-plus fa-lg green"></i> 

现在在css中写下

.green{ color:green}

6

只针对字体真棒的预定义类名

在前:

的HTML

<i class="fa fa-facebook"></i> 

的CSS

i.fa {
    color: red;
    font-size: 30px;
}

5

请参考链接 http://www.w3schools.com/icons/fontawesome_icons_intro.asp

<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>

<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>

4

当我尝试直接从BootstrapCDN中使用图标时,我遇到了相同的问题(最简单的方法)。然后,我下载了CSS文件,并将其复制到我站点的CSS文件夹中(该文件在字体真棒文档中以“简单的方式”进行了描述),然后一切开始按预期进行。



3

将i标签包裹在p或span中,然后可以使用bootstrap CSS类

<p class="text-success"><i class="fa fa-check"></i></p>

2

对于Font Awesome 5 SVG版本,请使用

filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));

1

如前所述,字体真棒图标是文本,因此,您可以使用适当的CSS属性对其进行样式设置。例如:

.fa-twitter-square {
    font-size: 15px;
    color: red;
}

如果在我看来,图标大小完全没有变化,请在font-size属性中添加“!important”。

.fa-twitter-square {
    font-size: 15px !important;
    color: red;
}

1

用于调整图标

我们的Web字体+ CSS和SVG + JS框架都包含一些基本控件,可用于在页面UI的上下文中调整图标的大小。

你可以用像

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons


0

动态更改.fa-xxx图标的css属性:

<li class="nws">
<a href="#NewsModal" class="urgent" title="' + title + '" onclick=""><span class="label label-icon label-danger"><i class="fa fa-bolt"></i></span>' 
</a>
</li>
<script>
  $(document).ready(function(){
   $('li.nws').on("focusin", function(){
    $('.fa-bolt').addClass('lightning');
   });
 });
</script>

<style>
.lightning{ /*do something cool like shutter*/}
</style>


0

我不建议您使用内置的真棒字体,例如fa-5x等。由于担心它们可能会更改它,因此您必须不断链接应用程序代码以符合最新标准。您只需为要设置样式的每个字体超赞类提供相同的类,就可以避免这种情况:

<i class="fa fa-facebook-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-twitter-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-google-plus-square fa-sabi-social-icons" aria-hidden="true"></i>

这里的课程是fa-sabi-social-icons

然后,在CSS中,可以使用与普通字体样式相同的CSS规则来样式化字体。例如

.fa-sabi-social-icons {
     color: //your color;
     font-size: // your font-size in px, em or %;
     text-shadow: 2px 2px #FF0000;
}

那应该让您的字体真棒字体样式

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.