解决Bootstrap字体图标glyphicon无法显示的问题

我们在官网下载了Bootstrap3版本的文档使用时，在我们将bootstrap.min.css文件引入到自己Web项目中，使用字体图标glyphicon时，图标无法正常显示，例如:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>test</title><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/bootstrap-theme.min.css" /><script src="js/jquery-2.1.1.min.js"></script><script src="js/bootstrap.min.js"></script></head><body><nav class="navbar navbar-default" role="navigation"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="#">Test</a></div><ul class="nav navbar-nav navbar-right"><li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li><li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li></ul></div></nav></body>
</html>

显示出来的却是这样的结果：

而在Web项目中直接引用官网的bootstrap.min.css文件，却能正常显示，代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>test</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><link rel="stylesheet" href="css/bootstrap-theme.min.css" /><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><nav class="navbar navbar-default" role="navigation"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="#">Test</a></div><ul class="nav navbar-nav navbar-right"><li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li><li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li></ul></div></nav></body>
</html>

字体图标显示出来了:
原因是：我们在把下载好的bootstrap文档中css目录下的bootstrap.min.css文件引入自己的Web项目中时，该文件的路径就变了，变成了我们所放的路径，由于Bootstrap对这些文件存放路径的规定，css文件要与fonts文件相对同级，而在我们的Web项目中，找不到原来该css文件所对应的字体fonts文件了，会出现如下报错：

此时，只要将bootstrap-3.3.7\dist目录下的fonts文件夹全部拷贝尽自己的Web项目中，注意要将fonts文件夹与css文件夹同级放置，然后就能显示出字体图标了。

解决Bootstrap字体图标glyphicon无法显示的问题相关推荐

html语言中glyphicon,Bootstrap字体图标无法正常显示的解决方法
bootstratp作为一个优秀的前端框架,最近使用了其中的Glyphicon Halflings的字体图标.起初一直显示不出来,后面通过搜索相关资料直到成功显示,在此做一些总结,方便后面复习. 1. ...
html页面icon字体无法显示,Bootstrap字体图标无法正常显示的解决方法
bootstratp作为一个优秀的前端框架,最近使用了其中的Glyphicon Halflings的字体图标.起初一直显示不出来,后面通过搜索相关资料直到成功显示,在此做一些总结,方便后面复习. 1. ...
解决本地Bootstrap字体图标不可见的问题
原文:https://www.jianshu.com/p/70ac459d33e7 作为Bootstrap的初学者,我最近遇到了一个问题:在使用Bootstrap字体图标时,图标不可见.使用代码如下: ...
html页面icon字体无法显示,bootstrap中icon字体图标怎么不显示？
bootstrap中icon字体图标怎么不显示?下面本篇文章给大家介绍一下Bootstrap字体图标不显示问题.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 问题: bootstr ...
Bootstrap字体图标不显示问题
问题: bootstrap使用字体图标时只显示一个框,不显示图标. 问题分析: 出现的原因是:bootstrap.css文件没有正确关联上字体文件glyphicons-halflings-regula ...
Bootstrap 字体图标 Bootstrap Glyphicon Components
基本用法: <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span&g ...
Bootstrap 字体图标和自定义矢量图标
一.Bootstrap 字体图标 Bootstrap包括250多个来自 Glyphicon Halflings 的字体图标. 使用:将图标类应用到这个 <span> 或者<i> ...
Bootstrap 字体图标Glyphicons
Bootstrap 提供了一个图片精灵,其中包含 140 个图标,这些图标可用于按钮.链接.导航和表单等元素.这些图标由 Glyphicons(http://glyphicons.com/)提供.如图 ...
jsp中不能正常显示图片+不能正常显示bootstrap字体图标
一直以来,bootstrap框架下的轮播图在jsp中不能正式显示,我本以为是配置问题,导致bootstrap和jsp不一样. 话不多说,上图: 前期: 这是一个轮播图,可以看到第一:图片不能显示,我的 ...

解决Bootstrap字体图标glyphicon无法显示的问题

解决Bootstrap字体图标glyphicon无法显示的问题相关推荐

最新文章

热门文章