为何我引用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

我也遇到了，由于是旧版本，改为icon-便可

编辑于 2016-11-21

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

发布于 2016-10-24

个人出来差很少也是这样子的。是由于有个样式冲突了。

发布于 2016-09-30

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

发布于 2016-09-20

加在一个空白的span上

发布于 2016-08-29

发布于 2016-08-20

我仍是不懂

发布于 2016-08-04