爲何我引用bootstrap的font-awesome的圖標不出來，就單單是一個HTML裏面引用的？

時間 2019-11-13

標籤爲何引用 bootstrap font awesome 圖標出來單單一個 html 裏面欄目 Bootstarp 简体版

原文原文鏈接

原文地址：https://www.zhihu.com/question/37015526?sort=created

24 個回答

我來猜猜：css

一、檢查字體路徑是否加載對了
二、font-awesome樣式文件是否加載對了
三、是HTML中用（千萬別加載CSS的硬編碼），是CSS中用（千萬別加載HTML的硬編碼）
四、是否跨域問題存在html

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

發佈於 2015-10-30

嘗試檢查是否有下列問題：前端

1. 沒有加載 CSS；
2. 沒有加載字體文件。web

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

發佈於 2015-10-30

舊版是icon-
新版是fa-

發佈於 2015-12-04

我發現不少同窗都沒有回答到點子上，我本身也遇到了，也解決了這個問題，其實沒那麼複雜，不少同窗想多了。
由於我這邊的版本是4.4，已經改爲了.fa-XXX的形式了。
而後我使用

<i class="fa-home"></i>首頁

這種樣式進去，發現是個方框。
而後查看了一下css，發現.fa這個樣式纔是引入字體文件的。因此，這裏的i還要加上.fa這個類

<i class="fa fa-home"></i>首頁

問題解決！
4以前的版本貌似仍是icon，試試看吧！

發佈於 2016-10-12

由於bootstrap和font-awsome都須要font裏的ttf文件，然而bootstrap和font-awsome的文件夾裏一個是fonts，一個是font。裏面的ttf文件都是必須的。兩個文件font、fonts和裏面的ttf文件都須要有。

發佈於 2016-09-02

根據個人經驗，極有多是font-awsome的css裏指向font文件夾的路徑寫錯了，原始的文件夾與css文件在同級目錄。

發佈於 2015-10-31

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

發佈於 2017-02-24

我這兩天正好遇到一個相似的問題，困擾了兩天終於解決了，實際上是沒有在web.xml作js和css文件的攔截處理而已。若是你的路徑肯定對的而且下載的js文件也沒有錯，那確定就是這個緣由了。bootstrap

解決辦法：添加以下js css攔截處理
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.js</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.css</url-pattern>
</servlet-mapping>跨域

緣由：用servlet-mapping用來截獲請求的，在加載請求的時候攔截你定義的資源名或路徑，好比js、css、圖片等靜態資源的，若是沒有添加截獲請求，那在加載頁面的時候就沒法處理靜態資源文件了，就加載不出來。
好比你在網上找到一個css樣式庫，引用在線的連接能夠加載如<link href="xxx.xxx.xxx.css">是能夠的，
可是你把這個css下載下來，在本地引入 <link href="<%=request.getContextPath()%>/xxx.css" >就失敗了。
不知道這樣說清楚嗎?
(以上只是個人我的認爲，不知道對不對，但大概就是這樣吧)網絡

能夠參考這篇博文，下面由個人解釋：
servlet-mapping / 攔截圖片等靜態，資源

發佈於 2016-10-24

Bootstrap字體文件夾默認爲fonts 而font-awesome字體默認文件夾爲font，更改font-awesome.min.css裏面的加載路徑就行

發佈於 2016-10-05

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

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

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

答案就在font-awesome源代碼裏

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

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

發佈於 2017-03-24

把下載好的文件結構直接放到項目中，只引入bootstrap.css就好啦，若是還不出來，你就看看你的項目中是否有其餘的css文件，多是衝突了，基本就這兩個狀況

發佈於 2017-03-21

遇到了一樣的問題，不知道題主解決了沒有？
css文件是這樣引入的。

目錄結構是這樣的

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

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

發佈於 2017-03-06

今天恰好解決了這個問題，在一開始我只導入了font-awesome.min.css文件，而後我就遇到了和題主同樣的問題，須要導入fonts文件夾，並在css文件中修改fonts文件夾路徑爲你存放的位置，相似url('../../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular')
以上，但願有幫助

發佈於 2017-02-13