如何风格图标的颜色，大小和字体真棒图标的阴影(How to style icon color, si

我怎么会从样式字体真棒的颜色，大小和图标的阴影图标 ？

例如，字体真棒的网站会显示白色和一些红一些图标，但不会显示在CSS如何样式他们的方式...

Answer 1:

鉴于他们只是字体，那么你应该能够他们的风格的字体：

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

Answer 2:

你也可以添加样式内嵌：

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

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

Answer 3:

如果您正在使用引导的同时，你可以使用：

<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>

Answer 4:

貌似FontAwesome图标颜色响应文本的信息，文本错误等。

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

Answer 5:

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>

Answer 6:

有一个非常简单的方法来改变字体真棒图标的颜色。

 <!-- 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的标签。

Answer 7:

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

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

在这里，我已经定义在我的CSS全局样式，其中主色是一类，在我的情况下，它是一个淡蓝色色调。 我发现，使用与字体图标内嵌样式真棒效果很好，尤其在当你的名字你的色彩语义，即NAV色，如果你想为一个单独的颜色，等等。

在他们的网站上这个例子中，我如何写在我的例子中，同样，字体真棒的最新版本已经改变轻微的调整它曾经是size.Before的语法：

icon-xxlarge

在那里，现在我必须使用：

icon-3x

当然，这一切都取决于你已经安装在你的环境是什么版本字体的真棒。 希望这可以帮助。

Answer 8:

使用FA 4.4.0添加

.text-danger
    color: #d9534f

在CSS文件，然后使用

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

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

Answer 9:

在FontAwesome 4.0，类更改为 'FA-2X'， 'FA-3X'。

Answer 10:

只要你可以在你的CSS文件中定义一个类，它级联到像HTML文件

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

现在写在CSS

.green{ color:green}

Answer 11:

尺寸为：四LG，四2X，四3X，四4X，四5倍。

对于颜色： <i class="fa fa-link fa-lg" aria- hidden="true"style="color:indianred"></i>用于阴影：.fa-LinkedIn平方{文字阴影：3PX 6像素＃272634; }``

Answer 12:

请参阅链接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>

Answer 13:

我有同样的问题，当我试图直接从BootstrapCDN（最简单的方法）使用的图标。 于是我下载了CSS文件，并将其复制到我的网站的CSS文件夹中的CSS文件（字体真棒文档中的“简单的方法”中所述），一切都开始工作，他们应该。

Answer 14:

只要目标字体，真棒预定义的类名

在例如：

HTML

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

CSS

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

Answer 15:

信用： 我可以更改字体真棒的图标颜色的颜色？

（这个答案建立在这个答案）

（为书签图标，例如:)

inyour.css文件：

.icon-bookmark.icon-white {
    color: white;
}

inyour.html文件：

<div class="icon-bookmark icon-white"></div>

Answer 16:

裹在P或跨度的我的标签，那么你可以使用引导CSS类

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

Answer 17:

对于字体真棒5 SVG版本，使用

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

Answer 18:

由于它已经指出，字体真棒图标是文本，因此您在使用相应的CSS属性的样式。 例如：

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

如果，因为它发生了不少对我来说，图标的大小并没有发生任何变化，增加了“！重要”的字体大小属性。

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

Answer 19:

动态地改变.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>

Answer 20:

text-shadow: 1px 1px 3px rgba(0,0,0,0.5);

Answer 21:

我不建议你使用内置的像FA-5X等字体真棒造型; 怕他们可能会改变它，你就必须保持chainging应用程序代码与最新的标准见面。 你只需给你想要的风格统一同班说每个字体真棒级避免这种情况：

<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-萨比 - 社会 - 图标

然后在你的CSS，你可以样式使用相同的CSS规则的字体，你会风格的普通字体。 例如

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

}

这应该让你的字体，字体真棒风格

文章来源: How to style icon color, size, and shadow of Font Awesome Icons