HTML：fontawesome圖標會出現兩次

我試圖製作一個帶有HTML5和FontAwesome的網頁。我的問題是：如果我包括FontAwesome圖標出現兩次，兩個副本都在彼此樣的堆積（見有：image）HTML：fontawesome圖標會出現兩次

我改變了一下fontawesome.css的，但之後，我認識到了問題我再次從下載中複製文件以重置所有更改：問題仍然存在。所以我的.css的部分說：

[class^="icon-"]:before, [class*=" icon-"]:before { 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
    display: inline-block; 
    text-decoration: inherit; 
}

，我又把它包括對標題由

<h3><i class="icon-star-empty"></i>&nbsp;Angebote</h3>

可惜我實在不明白的問題。

我嘗試刪除.css中的「：before」（它是幹什麼用的？），玩着「display：」，加上「vertical-alignment」，因爲星星在天空中有點...沒什麼幫助。

有人曾經有類似的東西？這個問題出現在Firefox，Opera和IE上。

最好的問候，安娜

來源

2012-11-25 anna

這將是一個的jsfiddle或其他一些預覽很有幫助。提供的CSS，似乎不是問題。 –

請參閱http://stackoverflow.com/questions/12330032/font-awesome-icons-alignment。 –

我只是有這個問題我自己，我想通了，我需要什麼來解決。在bootstrap.css除去

.icon-star-empty { background-position: -144px 0; }

基本上CSS中在2個地方，一旦在字體awesome.css bootstrap.css &一次，所以它顯示了兩次。

來源

2012-12-13 13:47:39

這將只修復空的星形圖標。不是一個好的解決方案根據@Martin Harrigan的評論，請參閱[這個問題]（http://stackoverflow.com/questions/12330032/font-awesome-icons-alignment）來更正所有重複的圖標。 – LuckySpoon

我可以進一步細化，但基本上這個問題不應該出現在3.0（幾周前發佈）。

這來自Bootstrap設置類的圖標類在他們的sprites.less。這些指示說要評論sprites.less，但很多人錯過了。在新版本中，有重寫可以解決這個問題。

另外，如果你想使用字體真棒真的容易做，你可以使用引導CDN：http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome

來源

2013-01-18 01:42:20

HTML：fontawesome圖標會出現兩次

回答

相關問題