This question already has answers here:
How to change color of font awesome icons
(2个答案)
2年前关闭。
我一直在努力,寻找并找到答案并不是一件容易的事,希望你们能提供帮助。
我正在使用一个主题,这些图标被圆形边框包围,并且我希望能够为每个类提供不同颜色的类。只是想不通。
这是代码,我将
和CSS
代替
}
(2个答案)
2年前关闭。
我一直在努力,寻找并找到答案并不是一件容易的事,希望你们能提供帮助。
我正在使用一个主题,这些图标被圆形边框包围,并且我希望能够为每个类提供不同颜色的类。只是想不通。
这是代码,我将
-prefered
放在其中,但这似乎不起作用。/* Re-using Social Icons so need to Re-style them */
.thumb-info-badge-icons {
border-top: 1px dotted #DDD;
margin: 0;
padding: 15px 10px;
display: block;
}
.thumb-info-badge-icons a {
background: #CCC;
border-radius: 25px;
display: inline-block;
height: 30px;
line-height: 30px;
text-align: center;
width: 30px;
}
.thumb-info-badge-icons a:hover {
text-decoration: none;
}
.thumb-info-badge-icons a span {
display: none;
}
.thumb-info-badge-icons a i {
color: #FFF;
font-size: 0.9em;
}
.thumb-info-badge-icons a {
background-color: #2ea6c4;
}
.thumb-info-badge-icons-preferred a {
background-color: #c42e2e;
}
<span class="thumb-info-badge-icons">
<a href="#" data-toggle="tooltip" data-placement="top" title="Preferred Captain" class="thumb-info-badge-icons-preferred"><i class="fas fa-trophy"></i></a>
<a href="#" data-toggle="tooltip" data-placement="top" title="Instant Scheduling"><i class="fas fa-bolt"></i><span>Twitter</span></a>
<a href="#" data-toggle="tooltip" data-placement="top" title="100+ Five Star Reviews"><i class="fas fa-star"></i><span>Linkedin</span></a>
</span>
和CSS
最佳答案
嘿尝试这样的课程
a.thumb-info-badge-icons-preferred {
background-color: #c42e2e;}
代替
.thumb-info-badge-icons-preferred a {
background-color: #c42e2e;
}