如何设置Font Awesome Icons的图标颜色，大小和阴影的样式

Question

我如何设置Font Awesome的Icons图标的颜色，大小和阴影？

例如，Font Awesome的 site会显示一些白色的图标和一些红色的图标，但不会显示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

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

Answer 4

看起来FontAwesome图标颜色会响应text-info，text-error等。

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

Answer 5

在your.css文件中：

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

在your.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图标的颜色。

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您可以将十六进制代码更改为您的首选项。 注意：文本颜色也会更改图标颜色，除非style="color:#00cc6a"标记中有i。

Answer 7

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

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

这里我在CSS中定义了一个全局样式，其中main-color是一个类，在我的例子中它是浅蓝色调。我发现在带有字体Awesome的图标上使用内联样式效果很好，尤其是在您在语义上命名颜色的情况下，例如，如果您想要单独的颜色，则使用nav-color等。

在他们网站上的这个例子中，以及我在我的例子中所写的内容，最新版本的Font Awesome已经改变了调整大小的语法。之前它曾经是：

icon-xxlarge

现在我必须使用：

icon-3x

当然，这完全取决于您在环境中安装的Font Awesome版本。希望这会有所帮助。

Answer 8

使用FA 4.4.0添加

<script type="text/javascript">
    jQuery.validator.unobtrusive.parse();
    jQuery.validator.unobtrusive.parse("#formId");
</script>

到文档css然后使用

.text-danger
    color: #d9534f

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

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

对于尺寸：fa-lg，fa-2x，fa-3x，fa-4x，fa-5x。

对于颜色：<i class="fa fa-link fa-lg" aria- hidden="true"style="color:indianred"></i> 对于阴影：.fa-linkedin-square {   文字阴影：3px 6px＃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

信用：Can I change the color of Font Awesome's icon color?

（这个答案建立的答案）

（对于书签图标，例如：）

inyour.css文件：

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

inyour.html文件：

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

Answer 16

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

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

Answer 17

将p标签包裹在p或span中，然后可以使用bootstrap css class

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

Answer 18

正如已经指出的那样，字体真棒图标是文本，因此您可以使用适当的CSS属性对其进行样式设置。例如：

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

如果对我发生了相当大的影响，图标大小根本不会改变，请在font-size属性中添加“！important”。

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

Answer 19

用于调整图标大小

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

您可以使用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

Answer 20

尝试简单地使用fa-lg，fa-2x，fa-3x，fa-4x，fa-5x之类的图标来相对于其容器增加图标大小

例如：

Answer 21

我不建议您使用像fa-5x等内置的font-awesome样式;因为担心他们可能会改变它，你必须继续使用应用程序代码来满足最新标准。你可以通过给每个字体非常棒的类来统一避免这种情况，你想要在同一个类中统一描述：

<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规则来设置字体样式，你可以使用普通字体设置样式。 e.g

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

}

那应该是你的字体真棒字体

Answer 22

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

Answer 23

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