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

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

在前：

的HTML

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

的CSS

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

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

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

现在在css中写下

.green{ color:green}

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

For Sizing Icons

Both our Web Fonts + CSS and SVG + JS frameworks include some basic controls for sizing icons in the context of your page’s UI.

you can use like

<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

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。希望这可以帮助。

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

使用FA 4.4.0添加

.text-danger
    color: #d9534f

到文档css，然后使用

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

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

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

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

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

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

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

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>

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

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

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

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

如果同时使用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>