我如何设置Font Awesome 图标的颜色、大小和阴影？
例如，Font Awesome 的网站将显示一些白色的图标和一些红色的图标，但不会显示CSS如何以这种方式设置它们的样式......
问问题
1066144 次
24 回答
524
鉴于它们只是字体，那么您应该能够将它们设置为字体：
#elementID {
color: #fff;
text-shadow: 1px 1px 1px #ccc;
font-size: 1.5em;
}
于 2012-09-04T22:50:45.070 回答
188
您也可以只添加样式内联：
<i class="icon-ok-sign" style="color:green"></i>
<i class="icon-warning-sign" style="color:red"></i>
于 2013-03-11T19:03:20.837 回答
129
如果你同时使用 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>
于 2014-10-21T18:05:45.673 回答
46
看起来 FontAwesome 图标颜色响应文本信息、文本错误等。
<div style="font-size: 44px;">
<i class="icon-umbrella icon-large text-error"></i>
</div>
于 2012-09-27T01:41:52.210 回答
18
在你的.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>
于 2013-09-12T16:47:31.167 回答
18
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;}
于 2018-07-25T21:45:15.317 回答
14
有一种非常简单的方法可以更改 Font 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>您可以根据自己的喜好更改十六进制代码。注意：文本颜色也会改变图标颜色，除非标签中style="color:#00cc6a"有一个。i
于 2017-04-16T05:11:44.583 回答
10
使用 FA 4.4.0 添加
.text-danger
color: #d9534f
到文档 css 然后使用
<i class="fa fa-ban text-danger"></i>
将颜色更改为红色。您可以为任何颜色设置自己的颜色。
于 2015-09-12T22:33:57.613 回答
9
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 版本。希望这可以帮助。
于 2013-07-09T13:25:19.770 回答
8
在 FontAwesome 4.0 中，类更改为“fa-2x”、“fa-3x”。
于 2013-12-16T18:59:44.937 回答
8
只需在 css 文件中定义一个类并将其级联到 html 文件中，例如
<i class="fa fa-plus fa-lg green"></i>
现在用css写下来
.green{ color:green}
于 2017-01-10T06:33:12.260 回答
8
只针对字体真棒预定义类名
例如：
HTML
<i class="fa fa-facebook"></i>
CSS
i.fa {
color: red;
font-size: 30px;
}
于 2018-02-02T16:41:31.450 回答
6
请参考链接 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>
于 2016-10-28T06:50:34.633 回答
5
当我尝试直接从 BootstrapCDN 使用图标（最简单的方法）时，我遇到了同样的问题。然后我下载了 CSS 文件并将其复制到我网站的 CSS 文件夹中，CSS 文件（在字体真棒文档中的“简单方法”下描述），一切都开始正常工作。
于 2013-07-26T02:21:14.830 回答
4
信用：我可以更改 Font Awesome 图标颜色的颜色吗？
（这个答案建立在那个答案的基础上）
（对于书签图标，例如：）
在你的.css 文件中：
.icon-bookmark.icon-white {
color: white;
}
在your.html 文件中：
<div class="icon-bookmark icon-white"></div>
于 2013-07-04T13:54:57.510 回答
4
将 i 标签包裹在 p 或 span 中，然后可以使用 bootstrap css 类
<p class="text-success"><i class="fa fa-check"></i></p>
于 2016-04-19T03:06:09.003 回答
2
对于Font Awesome 5 SVG版本，使用
filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));
于 2018-04-09T19:53:11.563 回答
1
正如已经指出的那样，字体真棒图标是文本，因此您可以使用适当的 CSS 属性对其进行样式设置。例如：
.fa-twitter-square {
font-size: 15px;
color: red;
}
如果在我身上发生了很多事情，图标大小根本没有改变，请将“！important”添加到 font-size 属性。
.fa-twitter-square {
font-size: 15px !important;
color: red;
}
于 2017-08-09T17:20:08.333 回答
1
调整图标大小
我们的 Web Fonts + 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
于 2019-06-14T20:36:04.897 回答
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>
于 2016-08-29T05:02:26.913 回答
0
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
于 2017-03-13T18:55:30.213 回答
0
尝试简单地使用类似 fa-lg,fa-2x,fa-3x,fa-4x,fa-5x 来增加图标相对于其容器的大小
例如：-
于 2020-07-13T13:08:37.127 回答
-1
我不建议您使用 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;
}
这应该让你的字体真棒字体样式
于 2017-12-11T16:37:46.613 回答
-1
这是一个如何设置字体真棒样式的示例：
.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>就是这样。
于 2021-10-21T11:55:09.433 回答