為什麼我引用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攔截處理
& &
原因:用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 |