如何样式图标的颜色，大小，和阴影的FontAwesome图标

如何从FontAwesome的图标中设置图标的颜色、大小和阴影?

例如，FontAwesome的网站将显示一些白色图标和一些红色图标，但不会显示如何以这种方式设置它们的CSS……

不同颜色的按钮和链接，旁边有红色、白色和黑色的图标

1133123 次浏览
小开
最佳答案

考虑到它们只是简单的字体，那么你应该能够将它们设置为字体:

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

看起来像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>
小开

信贷:我可以改变字体Awesome's图标颜色吗?

(这个答案构建在那个答案上)

(对于书签图标，例如:)

inyour.css文件:

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

inyour.html文件:

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

http://fortawesome.github.io/Font-Awesome/examples/ < a href = " http://fortawesome.github.io/Font-Awesome/examples/ " > < / >

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

在这里，我在CSS中定义了一个全局样式，其中main-color是一个类，在我的例子中，它是浅蓝色色调。我发现在图标上使用内联样式，字体很棒，特别是在你从语义上命名颜色的情况下，即navi -color，如果你想要一个单独的颜色，等等。

在他们网站上的这个例子中，以及我在我的例子中所写的，最新版本的字体Awesome稍微改变了调整大小的语法。以前是:

icon-xxlarge

现在我必须使用:

icon-3x

当然，这完全取决于你在你的环境中安装了什么版本的Font Awesome。希望这能有所帮助。

小开

当我试图直接从BootstrapCDN(最简单的方法)使用图标时，我也遇到了同样的问题。然后我下载了CSS文件，并将其复制到我网站的CSS文件夹CSS文件(在“简单方法”字体awesome文档中描述)，一切都开始正常工作。

小开

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

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

小开

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

使用FA 4.4.0添加

.text-danger
color: #d9534f

到文档的CSS然后使用

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

将颜色改为红色。你可以自己设置任何颜色。

小开

将i标签包装在p或span中，然后您可以使用bootstrap css类

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

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

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

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

简单地说，你可以在css文件中定义一个类，并将其级联到html文件中

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

现在用CSS写下来

.green{ color:green}
小开 
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
小开

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

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

您可以根据自己的喜好更改十六进制代码。 注意:文本颜色也会改变图标的颜色，除非在i标记中有style="color:#00cc6a"

小开

正如已经指出的那样，字体很棒的图标是文本，因此您可以使用适当的CSS属性来设置它的样式。例如:

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

如果像我经常遇到的那样，图标大小根本没有变化，那就添加“!”“Important”添加到字体大小属性。

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

我不建议你使用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规则来设置字体的样式。 如< / p > 
.fa-sabi-social-icons {
color: //your color;
font-size: // your font-size in px, em or %;
text-shadow: 2px 2px #FF0000;
}

这将使您的字体非常棒的字体样式

小开

只需目标字体-很棒的预定义类名

例:

超文本标记语言

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

CSS

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

对于字体Awesome 5 SVG版本，使用

filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));
小开
  • 尺寸:fa-lg， fa-2x， fa-3x， fa-4x， fa-5x
  • 对于颜色:<i class="fa fa-link fa-lg" aria-hidden="true"style="color:indianred"></i>
  • 对于Shadow: .fa-linkedin-square{text-shadow: 3px 6px #272634;}
小开

调整图标大小

我们的Web Fonts + 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

小开

试着简单地使用像fa-lg,fa-2x,fa-3x,fa-4x,fa-5x之类的东西来增加相对于容器的图标大小

例如< p >: -

小开

下面是一个如何设计字体样式的例子。

.arrow i.fa {
color: white !important;
font-size: 2.2rem;
opacity: .3;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="arrow d-none d-md-block">
<i class="fa fa-angle-down"></i>
</div>

就是这样。


提交答案