為什麼我引用bootstrap的font-awesome的圖標不出來,就單單是一個HTML裡面引用的?

網頁上面就只出現這個框框,圖標沒有顯示出來,


我來猜猜:

1、檢查字體路徑是否載入對了

2、font-awesome樣式文件是否載入對了

3、是HTML中用(千萬別載入CSS的硬編碼),是CSS中用(千萬別載入HTML的硬編碼)

4、是否跨域問題存在

不過我從來未碰到題主所說的這種現象。


嘗試檢查是否有下列問題:

1. 沒有載入 CSS;

2. 沒有載入字體文件。

另外,font-awesome 是獨立項目,並不屬於 Bootstrap。Bootstrap 中使用的 icon font 叫做 Glyphicons。


我發現很多同學都沒有回答到點子上,我自己也遇到了,也解決了這個問題,其實沒那麼複雜,很多同學想多了。

因為我這邊的版本是4.4,已經改成了.fa-XXX的形式了。

然後我使用

&&首頁

這種樣式進去,發現是個方框。

然後查看了一下css,發現.fa這個樣式才是引入字體文件的。所以,這裡的i還要加上.fa這個類

&&首頁

問題解決!

4之前的版本貌似還是icon,試試看吧!


因為bootstrap和font-awsome都需要font里的ttf文件,然而bootstrap和font-awsome的文件夾里一個是fonts,一個是font。裡面的ttf文件都是必須的。兩個文件font、fonts和裡面的ttf文件都需要有。


今天也遇到此問題,現在解決了,建立一個fonts文件夾,然後fonts文件夾下面又分別包含兩個文件夾fonts和css,這個第二層fonts的文件夾中包含fontawesome-webfont.ttf。。。等ttf文件,css文件下面包含font-awesome.css文件,然後引入路徑是fonts/css/font-awesome.css


舊版是icon-

新版是fa-


我這兩天正好遇到一個類似的問題,困擾了兩天終於解決了,其實是沒有在web.xml做js和css文件的攔截處理而已。如果你的路徑確定對的並且下載的js文件也沒有錯,那肯定就是這個原因了。

解決辦法:添加如下js css攔截處理

&

&default&

&*.js&

&

&

&default&

&*.css&

&

原因:用servlet-mapping用來截獲請求的,在載入請求的時候攔截你定義的資源名或路徑,比如js、css、圖片等靜態資源的,如果沒有添加截獲請求,那在載入頁面的時候就無法處理靜態資源文件了,就載入不出來。

比如你在網上找到一個css樣式庫,引用在線的鏈接可以載入 如&是可以的,

但是你把這個css下載下來,在本地引入 &就失敗了。

不知道這樣說清楚嗎?

(以上只是我的個人認為,不知道對不對,但大概就是這樣吧)

可以參考這篇博文,下面由我的解釋:

servlet-mapping / 攔截圖片 等靜態,資源


Bootstrap字體文件夾默認為fonts 而font-awesome字體默認文件夾為font,更改font-awesome.min.css裡面的載入路徑就行


根據我的經驗,極有可能是font-awsome的css里指向font文件夾的路徑寫錯了,原始的文件夾與css文件在同級目錄。


這種情況很明白不是嗎,有個框框說明html引用font-awesome.css沒問題,問題是你框框里的字體沒法顯示,就是說你缺少了字體。

而這字體是font-awesome項目文件里引用的,你直接本地下載單個font-awesome是沒用。

不信你把你引用的font-awesome路徑改成網路獲取形式比如cdn或https而不是本地相對路徑,圖標就可能顯示。

答案就在font-awesome源代碼里

so, 既然要本地化那麼就必然要遞歸下去。

同樣的道理在於在css文件里引用背景圖片等。


80%是只放了css沒放font,要把font文件夾放到css文件夾同級目錄


我的出來差不多也是這樣子的。是因為有個樣式衝突了。


我也來貢獻一個原因。。

是因為複製class的時候沒有複製進第一個字母(摔)

class="glyphicon glyphicon-camera",我漏了個g


樓上答的對,遇到過同樣的問題:只替換了新版本CSS文件,顯示為小方框,把fonts也替換掉就好了


遇到了同樣的問題,不知道題主解決了沒有?
css文件是這樣引入的。

目錄結構是這樣的

我是把整個下載下來的文件放在了css中。

圖標也是不顯示,有什麼解決問題的辦法嗎?


我也遇到了,因為是舊版本,改成icon-即可


我引用的 font-awesome 在安卓手機上可以正常顯示,蘋果手機山不顯示,電腦查看就顯示一個框


剛遇到一個iconfont 其他的正常顯示 就一個圖標不顯示,最後看字體源碼 原來是那個不顯示的字體圖標由四個部分拼湊成一個,只顯示一個編碼肯定不會顯示圖標


加在一個空白的span上


我還是不懂


推薦閱讀:

如何評價 Google 發布的前端框架 Material Design Lite?
Bootstrap 框架有哪些缺點?
有哪些類似bootstrap的純css框架?

TAG:前端開發 | BootstrapTwitter |