大佬教程收集整理的这篇文章主要介绍了css – fontawesome 5.x将颜色设置为图标，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<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; }
.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.5.0/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 – fontawesome 5.x将颜色设置为图标全部内容，希望文章能够帮你解决css – fontawesome 5.x将颜色设置为图标所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。