我无法使用这些代码为 Font Awesome 5 图标着色。我尝试了 fill
css 属性来设置颜色,但它没有用。
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< 的颜色
:
.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
:
如果您使用的是 CSS 版本,您可以将颜色应用于 i
。
.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>
因此,为了确保它在所有情况下都能正常工作,只需使用两个选择器:
.icons i,
.icons svg {
color: #2759AE;
}
关于css - 如何更改 Font Awesome 5 中图标的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54818005/