2016-06-28 143 views

回答

4

你應該實現這個是這樣的:

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/

+0

工作相同的寬度和高度div圓形! http://jsfiddle.net/urielz/uufrnoxf/ – URL87

+0

是的,這是最簡單和最安全的方式來實現這一點。 – Jhonny

+0

不會說這既不簡單也不安全,你將兩個元素堆疊在一起。 @Peter Wilson答案只需要修改css。但是,如果它是OP的關鍵,那就這樣吧。 – Frutis

0

這是不可能改變顏色的內部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/

1

這個圖標是透明的,所以你能達到這一點,但給它的背景顏色

.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; 
} 

檢查小提琴

http://jsfiddle.net/Lgq1k4uc/7/

+1

50px不會在圓周邊留下任何紅色斑點。好的解決方案 – Frutis

+0

@Frutis謝謝你的提示,現在好多了:D –

0

我以前也有這種問題。假設信息圈圖標在我的中間也是透明的,您可以添加一個帶有白色背景的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; 
}