如何風格化一個圓Fontawesome圖標背景？

是否有一個簡單的方法來正確地設置Fontawesome圖標背景的風格？我試圖用icon-remove-sign（它具有一個圓圈的特殊性）圖標來實現它，以便使白色和紅色圓圈顯示十字。如何風格化一個圓Fontawesome圖標背景？

的困難是，圖標是識別爲正方形，所以我試圖使它成爲一個圓圈，以應用紅色background color（但我想知道，如果沒有更簡單的東西）：

.icon-remove-sign { 
    padding: 0; 
    border-radius: 25px; 
    color: white; 
    background-color: red; 
}

但這還不夠，我們可以看到圖標頂部的紅色背景。

你會怎麼做？

來源

2013-06-05 Ludo

感覺有點哈克，但我設法得到它在這裏工作：

http://jsfiddle.net/3FvxA/

display:block，給它的高度和寬度似乎是祕密。

來源

2013-06-05 21:12:54

隨着fontawesome你可以用堆疊的圖標是這樣的：

<span class="fa-stack fa-lg"> 
    <i class="fa fa-camera fa-stack-1x"></i> 
    <i class="fa fa-ban fa-stack-2x text-danger"></i> 
</span>

來源

2013-12-12 14:48:56 Unknown

假設你的HTML看起來像這樣：

<div class="social-circle"> 
    <a class="fa fa-facebook" href="#"></a> 
    <a class="fa fa-twitter" href="#"></a> 
    <a class="fa fa-pinterest-p" href="#"></a> 
</div>

你可以這樣做：

.social-circle [class*="fa fa-"] { 
    width: 25px; 
    height: 25px; 
    color: white; 
    background-color: grey; 
    border-radius: 25px; 
    display: inline-block; 
    line-height: 25px; 
    margin: auto 3px; 
    font-size: 15px; 
    text-align: center; 
} 
.fa-facebook:hover { 
    background-color: #3B5A9B; 
} 
.fa-twitter:hover { 
    background-color: #4FC6F8; 
} 
.fa-pinterest-p:hover { 
    background-color: #CA2128; 
}

見這裏的例子：http://jsfiddle.net/k69xj2n8/

來源

2015-08-07 12:48:56

如何風格化一個圓Fontawesome圖標背景？

回答

相關問題