为什么我引用bootstrap的font-awesome的图标不出来，就单单是一个HTML里面引用的？

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

24 个回答

知乎用户

 

 

我来猜猜：

1、检查字体路径是否加载对了
2、font-awesome样式文件是否加载对了
3、是HTML中用（千万别加载CSS的硬编码），是CSS中用（千万别加载HTML的硬编码）
4、是否跨域问题存在

不过我从来未碰到题主所说的这种现象。

发布于 2015-10-30

 

learnshare

前端开发者

 

 

尝试检查是否有下列问题：

1. 没有加载 CSS；
2. 没有加载字体文件。

另外，font-awesome 是独立项目，并不属于 Bootstrap。Bootstrap 中使用的 icon font 叫做 Glyphicons。

发布于 2015-10-30

 

知乎用户

 

 

旧版是icon-
新版是fa-

发布于 2015-12-04

 

Zzzz Li

留点啥好呢，等想好了再告诉你们吧

 

 

我发现很多同学都没有回答到点子上，我自己也遇到了，也解决了这个问题，其实没那么复杂，很多同学想多了。
因为我这边的版本是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

 

chmel轩

一个奋斗在梦想道路上的无名小卒

 

 

我这两天正好遇到一个类似的问题，困扰了两天终于解决了，其实是没有在web.xml做js和css文件的拦截处理而已。如果你的路径确定对的并且下载的js文件也没有错，那肯定就是这个原因了。

解决办法：添加如下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

 

Xioqua

这种情况很明白不是吗，有个框框说明html引用font-awesome.css没问题,问题是你框框里的字体没法显示，就是说你缺少了字体。

而这字体是font-awesome项目文件里引用的，你直接本地下载单个font-awesome是没用。

不信你把你引用的font-awesome路径改成网络获取形式比如cdn或https而不是本地相对路径，图标就可能显示。

答案就在font-awesome源代码里

so, 既然要本地化那么就必然要递归下去。

同样的道理在于在css文件里引用背景图片等。

发布于 2017-03-24

 

周七妹

把下载好的文件结构直接放到项目中，只引入bootstrap.css就好啦，如果还不出来，你就看看你的项目中是否有其他的css文件，可能是冲突了，基本就这两个情况

发布于 2017-03-21

 

楠楠950109

大三学生狗，软工，前端

遇到了同样的问题，不知道题主解决了没有？
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

 

知乎用户

我也遇到了，因为是旧版本，改成icon-即可

编辑于 2016-11-21

 

段亚东

web前端

我引用的 font-awesome 在安卓手机上可以正常显示，苹果手机山不显示，电脑查看就显示一个框

发布于 2016-10-24

 

summer

无感的设计小白

我的出来差不多也是这样子的。是因为有个样式冲突了。

发布于 2016-09-30

 

曹叶

前端开发

刚遇到一个iconfont 其他的正常显示 就一个图标不显示，最后看字体源码 原来是那个不显示的字体图标由四个部分拼凑成一个，只显示一个编码肯定不会显示图标

发布于 2016-09-20

 

知乎用户

加在一个空白的span上

发布于 2016-08-29

 

匿名用户

<link href="....">里面可加了rel属性

发布于 2016-08-20

 

周希

前端开发设计

我还是不懂

发布于 2016-08-04