2013-04-04 75 views
9

我想在一個按鈕中使用一個font-awsome圖標。該圖標在Firefox中正常工作,但當我在Chrome中使用它時,它顯示爲正方形。我環顧四周,唯一發現的是,字體的路徑可能不正確,但是自從我嘗試了cdn版本here之後,它仍然在firefox中工作,但不在Chrome中。在鉻中顯示爲方塊的字體真棒圖標?

此外,我試圖在我的電腦上的靜態html文件相同的樣式表它工作正常。

這裏是正在使用的HTML的例子:

<a id="btnLogin" href="url.com" class="btn btn-primary btn-large disabled"> 
    <i class="icon-refresh icon-white"></i> 
    Sign in using Facebook 
</a> 

同時,也是Web應用程序是建立與軌道和使用引導的模板。

任何有關可能導致此問題的想法?

+0

什麼是頁面的字符集 – 2013-04-04 08:25:27

+0

你可以看到字體真棒字體在Chrome的字體真棒演示頁面上正常工作嗎? – 2013-04-04 08:26:24

+0

嘗試添加''頁頭 – 2013-04-04 08:27:07

回答

15

我有同樣的問題。但我很容易解決它。

在字體真棒字體文件必須放在「字體」目錄,而不是在以前的版本「字體」目錄。

1

上面的答案是正確的,但我想進一步澄清一步,因爲我不認爲這是明確的字體真棒頁面入門。我添加了min.css樣式表,並將其鏈接到我的頁面的頭部分。您還需要獲取五個字體文件,並將其放入項目的「字體」文件夾中。應該有五個文件,他們將結束:

.eot .SVG 的.ttf .woff 雜項文件

我從GitHub這裏檢索到的文件:https://github.com/FortAwesome/Font-Awesome

+0

謝謝你的說明。我在想有一天會解決這個問題,但現在它工作正常。 – stom 2015-02-17 09:30:50

7

如果你擁有了一切在適當的地方(你甚至檢查了CSS以確保路徑是正確的,你想知道如果你需要一個js文件),試着看看你的HTML:

<i class="fa-users"></i> 

這將顯示在問題中提到的數字/字母(而不是圖標)的正方形。

<i class="fa fa-users"></i> 

這會顯示您的圖標! 請記住,在版本4.2.0中,您必須添加fa類!

希望它有幫助!

+2

太棒了!謝謝先生! – user 2015-01-10 16:17:37

0

對我來說,這個問題是由於我的一個CSS文件中有一個雜散數字4。

我拉着我的頭髮,並使用所有修補程序點綴在一起無濟於事,但打開完全無關的CSS文件後,找到文檔末尾的數字4並將其刪除後,它完美運行。

因此,檢查每個CSS文件的雜散字符。

1

我有同樣的問題,最後我發現了什麼問題。這是因爲我已將標記<i>font-family覆蓋爲其他內容。

+0

謝謝布魯。這也是我的問題。 – ryanF 2017-01-24 08:42:58

0

很晚回答,但這可能會幫助另一個兄弟在那裏!

我發現這個行爲是通過NOT沒有顯示:block;在i/.fa元素上。

.fa是標準的內聯塊,但爲了更好地兼容舊瀏覽器,我將其更改爲阻止,但它必須是內聯塊或其他類似內容。

希望它可以幫助那裏的人!