如何在Font Awesome 5中更改图标的颜色? [英] How to change color of icons in Font Awesome 5?
问题描述
我无法使用这些代码为Font Awesome 5图标着色.我尝试使用fill
css属性设置颜色,但这没用.
I can't colorize the Font Awesome 5 icons using these codes. I tried fill
css property for setting color but it didn't work.
HTML代码:
<div class="container mt200 icons">
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="fas fa-microphone fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
</div>
</div>
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="far fa-edit fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
</div>
</div>
</div>
</div>
CSS代码:
.icons i {
color: #2759AE;
}
推荐答案
Font Awesome 5使用svg
作为图标,并且path
的内部设置为fill:currentColor
,因此只需更改svg
的颜色:
Font Awesome 5 uses svg
for icons and path
inside are set with fill:currentColor
so simply change color of svg
:
.icons svg {
color:#2759AE;
}
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
<div class="container mt200 icons">
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="fas fa-microphone fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
</div>
</div>
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="far fa-edit fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
</div>
</div>
</div>
</div>
如您在代码中所见,在加载JS版本时,i
被替换为svg
:
As you can see in the code, the i
are replaced with svg
when you load the JS version:
如果使用的是CSS版本,则可以为i
应用颜色.
You can apply color to i
in case you are using the CSS version.
.icons i {
color:#2759AE;
}
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"><div class="container mt200 icons">
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="fas fa-microphone fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
</div>
</div>
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="far fa-edit fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
</div>
</div>
</div>
</div>
因此,要确保在所有情况下都能正常使用,只需使用两个选择器:
So to make sure it will work in all the cases simply use both selector:
.icons i,
.icons svg {
color: #2759AE;
}
这篇关于如何在Font Awesome 5中更改图标的颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!