問題與繪製邊框CSS字體真棒圖標

我使用css真棒字體圖標（https://fortawesome.github.io/Font-Awesome/），我試圖用css規則繪製他們周圍的圓形或方形邊框。問題與繪製邊框CSS字體真棒圖標

<i class="fa fa-check-circle fa-5x fa-square"></i>

有針對性的CSS規則..

.fa-circle { color: #b0b0b0; border-radius: 50%; border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 1em; } 
.fa-square { color: #b0b0b0; border-radius:50%; border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 1em; }

無國界原件覈對圈看起來是這樣的..

繪製邊框時，實際輸出顯示FF奇怪的輸出和safari

我從其他線程使用此行，但它不管用。

text-rendering: optimizeLegibility;

如何解決？

來源

2015-09-15 pbu

使用瀏覽器前綴，因爲大多數的瀏覽器不支持新的css3屬性沒有前綴。 – Aparna

你能提供一個例子jsfiddle嗎？我認爲這應該只是工作，所以我希望你正在改變別的 – musefan

可能重複的[在圓形圈製作字體真棒圖標？]（http://stackoverflow.com/questions/21905710/make-font-awesome-icons -in-的圓圈） –

請運行下面的代碼片段，

.border-circle { color: #b0b0b0; border-radius: 50%; border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 0.2em; } 
 
.border-square { color: #b0b0b0; border-radius:25%; border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 0.2em; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<i class="fa fa-check-circle fa-3x border-circle"></i> 
 
<i class="fa fa-check-circle fa-3x border-square"></i> 
 
<i class="fa fa-check-square fa-3x border-circle"></i> 
 
<i class="fa fa-check-square fa-3x border-square"></i>

來源

2015-09-15 16:19:30 kolunar

的問題是，你正在使用fa-square爲一類的名字，這是與現有的字體真棒類的一個衝突。你基本上試圖合併2個不是你想要的圖標。

相反，避免使用相同的類命名約定，因爲即使您選擇一個唯一的約定，它也可能會在以後的版本中使用。

例如，如下改變fa-square：

.my-square { color: #b0b0b0; border-radius:10%; border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 1em; }

然後你的HTML像這樣：

<i class="fa fa-check-circle fa-5x my-square"></i>

Here is a working example

來源

2015-09-15 16:23:06 musefan

問題與繪製邊框CSS字體真棒圖標

回答

相關問題