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

24 个回答

 

我来猜猜：

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

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

 
前端开发者
 
 

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

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

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

 
 
旧版是icon-
新版是fa-
 
留点啥好呢，等想好了再告诉你们吧
 
 
我发现很多同学都没有回答到点子上，我自己也遇到了，也解决了这个问题，其实没那么复杂，很多同学想多了。
因为我这边的版本是4.4，已经改成了.fa-XXX的形式了。
然后我使用

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

这种样式进去，发现是个方框。
然后查看了一下css，发现.fa这个样式才是引入字体文件的。所以，这里的i还要加上.fa这个类

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

问题解决！
4之前的版本貌似还是icon，试试看吧！

 
 
因为bootstrap和font-awsome都需要font里的ttf文件，然而bootstrap和font-awsome的文件夹里一个是fonts，一个是font。里面的ttf文件都是必须的。两个文件font、fonts和里面的ttf文件都需要有。
 
野生前端
 
 
根据我的经验，极有可能是font-awsome的css里指向font文件夹的路径写错了，原始的文件夹与css文件在同级目录。
 
从事网页设计
 
 
今天也遇到此问题，现在解决了，建立一个fonts文件夹，然后fonts文件夹下面又分别包含两个文件夹fonts和css，这个第二层fonts的文件夹中包含fontawesome-webfont.ttf。。。等ttf文件，css文件下面包含font-awesome.css文件，然后引入路径是fonts/css/font-awesome.css
 
一个奋斗在梦想道路上的无名小卒
 
 

我这两天正好遇到一个类似的问题，困扰了两天终于解决了，其实是没有在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 / 拦截图片 等静态，资源

 
 
Bootstrap字体文件夹默认为fonts 而font-awesome字体默认文件夹为font，更改font-awesome.min.css里面的加载路径就行
 

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

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

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

答案就在font-awesome源代码里

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

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

 

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

 
大三学生狗，软工，前端
遇到了同样的问题，不知道题主解决了没有？

css文件是这样引入的。

目录结构是这样的

我是把整个下载下来的文件放在了css中。

图标也是不显示，有什么解决问题的办法吗？

 
今天刚好解决了这个问题，在一开始我只导入了font-awesome.min.css文件，然后我就遇到了和题主一样的问题，需要导入fonts文件夹，并在css文件中修改fonts文件夹路径为你存放的位置，类似url('../../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular')
以上，希望有帮助
 
我也遇到了，因为是旧版本，改成icon-即可
 
web前端
我引用的 font-awesome 在安卓手机上可以正常显示，苹果手机山不显示，电脑查看就显示一个框
 
无感的设计小白
我的出来差不多也是这样子的。是因为有个样式冲突了。
 
前端开发
刚遇到一个iconfont 其他的正常显示 就一个图标不显示，最后看字体源码 原来是那个不显示的字体图标由四个部分拼凑成一个，只显示一个编码肯定不会显示图标
 
加在一个空白的span上
 
<link href="....">里面可加了rel属性
 
前端开发设计
我还是不懂

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

  1. （22）bootstrap 初识 + Font Awesome(字体图标库)

    bootstrap作用就是简化布局 bootstrap是基于JQ的,所以内部代码使用的是jq语法 所以要使用bs,必须先倒入 1.head标签内倒入bs的css文件  <link rel=&qu ...

  2. 联网html引用BootStrap

    以下是我写的一个联网html引用BootStrap的例子,可作为参考: <%@ Page Language="C#" AutoEventWireup="true&q ...

  3. 如何在前端项目中引用bootstrap less？

    在基于bootstrap css框架的前端项目开发中,如果有grunt build系统,那么工作流是:客制化less,在less中定义自己的 CSS,同时可以随意引用bootstrap中预定义好的cs ...

  4. Font Awesome字体图标

    1.什么是字体图标字体图标是一个包含许多图标的字体库.可以理解为一种特殊的字体,只不过里面包含的都是图标. 2.Font Awesome图标字体库Font Awesome是目前最受欢迎最全面的图标字体 ...

  5. JavaScript 将多个引用（样式或者脚本）放入一个文件进行引用

    1.将样式放入一个文件进行引用 @import url("../media/css/bootstrap.min.css"); @import url("../media/ ...

  6. Bootstrap框架中的字形图标的理解

    最近项目中准备使用 Bootstrap 框架,看中了Ace Admin 这套皮肤,看其代码的时候,发现使用了字形图标.下面内容来源于网络,根据自己对新知识的学习曲线重新整合了一下: 一,字形图标的定义 ...

  7. javascript 在一个函数参数中包含另一个函数的引用

    javascript函数的参数包含另一个函数的情形: <script> //b函数的参数func为另一个函数 function b(a, func) {  alert(a); //调用参数 ...

  8. Awesome图标 | 如何在某些编辑软件中使用Font Awesome字体图标

    文章目录 Font Awesome 字体图标 在某些编辑软件中使用 Font Awesome 字体图标 Font Awesome 为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何可以用 C ...

  9. perl 引用（数组和hash引用） --- perlreftut - Mark 的一个简单的'引用'教程 ---Understand References Today. --Mark Jason Dominus, Plover Systems (mjd-perl-ref+@plover.com)

    https://blog.csdn.net/fangwei1235/article/details/8570886 首页 博客 学院 下载 论坛 APP 问答 商城 活动 VIP会员 招聘 ITeye ...

随机推荐

  1. Mpich编程

    一.简介 通过安装MPICH构建MPI编程环境,从而进行并行程序的开发.MPICH是MPI(Message-Passing Interface)的一个应用实现,支持最新的MPI-2接口标准,是用于并行 ...

  2. Mysql处理海量数据时的一些优化查询速度方法（转）

    最近一段时间由于工作需要,开始关注针对Mysql数据库的select查询语句的相关优化方法. 由于在参与的实际项目中发现当mysql表的数据量达到百万级时,普通SQL查询效率呈直线下降,而且如果whe ...

  3. sqlServer通过指定的起始时间，创建该时间段内以年、月、日为时间段的临时表

    通过指定的起始时间,创建该时间段内以年.月.日为时间段的临时表 ALTER PROCEDURE [dbo].[YOUR_SP_Name]     -- Add the parameters for t ...

  4. bootstrap实现嵌套列

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 嵌套列</title> <li ...

  5. oracle数据库查询全系整理

    oracle数据库方面的知识到今天已经整理了12篇.当然,这不是终点,这只是一个开始,希望我写的文章可以帮助更多初学数据库的童鞋快速上手,如果你觉得文章对你有帮助,那么恭喜你已经入门了,数据库里面的知 ...

  6. Oracle数据库之单表查询

    接着上一篇的分享,今天主要给大家分享的是关于数据中的单表查询,单表查询很基础,也很重要,但是任何一个初学者必须要掌握的姿势,单表查询就是对单个表进行操作,查询我们想要的数据.单表查询里面的内容也是比较 ...

  7. HDU 6047 Maximum Sequence (贪心+单调队列)

    题意:给定一个序列,让你构造出一个序列,满足条件,且最大.条件是 选取一个ai <= max{a[b[j], j]-j} 析:贪心,贪心策略就是先尽量产生大的,所以就是对于B序列尽量从头开始,由 ...

  8. Ref 和out

    out 关键字会导致参数通过引用来传递.这与 ref 关键字类似,不同之处在于 ref 要求变量必须在传递之前进行初始化.若要使用 out 参数,方法定义和调用方法都必须显式使用 out 关键字.例如 ...

  9. DB2触发器简单例子

    db2使用版本9.7 创建A .B两个表,A表数据有更新.删除.插入时,将A表ID记录放入B表 1.create table A (id varchar(5),name varchar(30)); c ...

  10. Xcode更新至IOS 9 后错误处理

    1.obtain an updated library from the vendor, or disable bitcode for this target. for architecture ar ...