This question already has answers here:
How to change color of font awesome icons
                                
                                    (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;


}

09-17 14:59
查看更多