是否可以在<i class="fa fa-info-circle">
內更改內部「i」顏色?Font awesome - 更改class =「fa-info-circle」中的內部「i」顏色
即 - 在this fiddler只使紅色的「我」。
是否可以在<i class="fa fa-info-circle">
內更改內部「i」顏色?Font awesome - 更改class =「fa-info-circle」中的內部「i」顏色
即 - 在this fiddler只使紅色的「我」。
你應該實現這個是這樣的:
HTML
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x icon-background2"></i>
<i class="fa fa-info fa-stack-1x"></i>
</span>
CSS
.icon-background2 {
color: #564363;
}
.fa-info {
color:pink;
}
JSFiddle考試PLE: https://jsfiddle.net/codejhonny/8feo4k4x/
這是不可能改變顏色的內部i
。不過你可以試試這個:
.icon-background1 {
color: blue;
vertical-align:middle
}
a.info {
position: relative;
width: 55px;
height: 55px;
display: inline-block;
}
.info:before {
background: red;
width: 50px;
height: 50px;
border-radius: 100%;
content: "";
position: absolute;
z-index: -1;
top: 4px;
left: 1px;
}
這裏是小提琴鏈接:http://jsfiddle.net/Lgq1k4uc/4/
這個圖標是透明的,所以你能達到這一點,但給它的背景顏色
.icon-background1 {
color: blue;
}
.fa-info-circle:before {
content: "\f05a";
background-color: red;
border-radius: 50%;
width: 50px;
height: 50px;
display: inline-block;
line-height: 50px;
}
檢查小提琴
50px不會在圓周邊留下任何紅色斑點。好的解決方案 – Frutis
@Frutis謝謝你的提示,現在好多了:D –
我以前也有這種問題。假設信息圈圖標在我的中間也是透明的,您可以添加一個帶有白色背景的div,並將其絕對地放在圖標後面,使用較低的Z-index值(但等於或高於容器/父元素)。
例子:
<!-- the fa icon div -->
<div class="fa-exclamation-triangle" ...></div>
<!-- the div with white background -->
<div class="exclamation-inside"></div>
<!-- CSS -->
.fa-exclamation-triangle {
z-index: 2000;
/* some positioning etc */
}
.exclamation-inside {
background-color: white;
position: absolute;
width: 8px;
height: 18px;
top: 12px;
left: 18px;
z-index: 100;
}
您可以通過在一個div和背景色爲紅色包裹它嘗試。使與您的信息圈圖標 – San