2014-02-11 80 views
0

我想用字體真棒4.0.3與-circle-o tags和我的圖標每次都消失。字體真棒4.0.3 - 圓不工作

我使用它,像這樣:<i class="fa fa-twitter-circle-o fa-2x"></i>

我沒有得到一個空白的方形或任何其他的各種各樣的;只是一個空白。

這工作:<i class="fa fa-twitter fa-2x"></i>

不應該根據自己的new naming conventions的第一項工作?

*編輯*

要詳細一點,我知道,就像你在3倍可能,我可以堆疊起來,所以暫時,我有以下的(因爲圈子這麼厚):

<span class="fa-stack fa-lg"> 
    <i class="fa fa-square-o fa-stack-2x"></i> 
    <i class="fa fa-twitter fa-stack-1x"></i> 
</span> 

也許我誤解的FA現場的文檔,但我把它讀作其他應該工作。

回答

1

我想你可能需要堆疊起來:

<span class="fa-stack fa-lg"> 
    <i class="fa fa-circle-o fa-stack-2x"></i> 
    <i class="fa fa-twitter fa-stack-1x"></i> 
</span> 

見疊放圖標:http://fortawesome.github.io/Font-Awesome/examples/

+0

這就是我所做的,以保持它尋找有良好的設施。我更多地認爲,在我的鏈接中的文檔,說明其他應該工作。我讀錯了嗎?猜猜我應該詳細說明OP ... – W3bGuy

+0

我可以看出你爲什麼會這麼想。特別是當他們說「把他們合併......」時。我可能是錯的,但是,雖然他們已經實現了一個新的命名約定,但我不認爲它允許你通過命名它們來組合不同的圖標。看起來他們只是試圖在命名上更加一致,所以編碼更容易。只是我2美分。 – moodyjive

0

你說的沒錯認爲,基於Font Awesome naming conventions,你正在試圖做的應該是什麼工作:

諷刺的是,他們對改變命名約定動力是:

一種更好的圖標命名一致性預測

然而慾望,他們沒有這樣做,在文檔化做好哪些符號變量是可用的。

通知fa-check-circle作品,但fa-twitter-circle沒有。

如果按Ctrl +˚F爲他們CSS source 「圈子」 對了,你會發現,只有下列符號圓圈版本:

  • 播放*
  • 加*
  • 時報*
  • 檢查*
  • 問題
  • 信息
  • 十字線
  • 感嘆號
  • 箭*
  • 雪佛龍公司*

**(一些變量包括在內)*

如果你放任何其他東西,它只會成爲一個隨機的字母組合就CSS而言。它不符合任何預定義的類,因此它不會將其視爲任何特殊的類;這就是爲什麼當你嘗試添加圓時你會失去圖標。

已經提出的替代方法是使用fa-stack來手動合併一個圓圈和一個小鳥。由於圈似乎有點厚,而不是用-o翻轉鳥,你可以反轉圓圈.fa-inverse這樣的:

<span class="fa-stack fa-lg"> 
    <i class="fa fa-circle fa-stack-2x"></i> 
    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i> 
</span> 

這裏有一個Demo of the stacked option and every available circle icon

這裏是什麼樣的演示看起來像一個screnshot:

screenshot