本地Bootstrap文件字体图标引入却无法显示问题的解决方法


Posted in Javascript onApril 18, 2020

你在使用bootstrap字体图标的时候,是否遇到引用本地Bootstrap文件无法显示字体图标,而使用CDN服务器上bootstrap却能正常显示的问题。

在不能正常显示的时候,比如我要在一个按钮中使用一个√的字体图标,我的代码是这样子的:

<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>bootstrap字体图标</title> 
 <link rel="stylesheet" href="../libs/bootstrap.css"> 
</head> 
<body> 
 <div class="container"> 
 <button class="btn"> <span class="glyphicon glyphicon-ok"></span></button> 
 </div> 
</body> 
</html>

但是他的显示却是这个样子的:

本地Bootstrap文件字体图标引入却无法显示问题的解决方法

网上查找了很多解决办法,说法不一。下面来看看我是如何解决的。

发现不能显示之后我使用了goole cdn上的地址引入bootstrap文件,发现可以正常显示。所以问题应该出现在引入文件这里。
ctrl+左键进入glyphyicon,发现实现的代码是这样的:

@font-face {
 font-family: 'Glyphicons Halflings';

 src: url('../fonts/glyphicons-halflings-regular.eot');
 src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
 position: relative;
 top: 1px;
 display: inline-block;
 font-family: 'Glyphicons Halflings';
 font-style: normal;
 font-weight: normal;
 line-height: 1;

 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

在idea中就会发现@font-face这部分报红,提示can not resolve file glyphicons-halflings-regular.eot和glyphicons-halflings-regular.eot,意思是找不到文件。
所以glyphyicon这个样式,是关联着这些文件的,进入到下载的整个的压缩包,进入这个文件bootstrap-3.3.7-dist\fonts,就会发现如下文件:

本地Bootstrap文件字体图标引入却无法显示问题的解决方法

所以glyphyicon这个样式,必须要关联到glyphicons-halflings-regular.eot等文件才能正常使用。
而在我的引用bootstrap文件中,我是这样引用的,可能你也正在犯跟我一样的错误:
<link rel="stylesheet" href="../libs/bootstrap.css">

在webstrom中看到我的libs目录是这样的:

本地Bootstrap文件字体图标引入却无法显示问题的解决方法

是的,在使用bootstrap的大多样式的时候,单单是bootstrap.css这个文件就够了,不必引入全部的,这样可以让我们的项目没那么臃肿。但是在我们使用字体图标的时候,是需要关联到字体图标相关的文件才得以实现的,所以当我引入整个bootstrap-3.3.7(您也可以部分引入,只要将你想要的功能的相关文件全部引入且目录无误即可),然后再在我的html中这样引入:
<link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">

这样就能够正常显示字体图标:

本地Bootstrap文件字体图标引入却无法显示问题的解决方法

总结:分析了那么多,意思就是字体图标这个样式的实现,需要关联到glyphyicon相关文件,你在引入bootstrap.css文件时,你要确保在与bootstrap.css的相对路径下,能够让他找到这些关联文件,而CDN服务器上的正式如此,如此才能让图标正常显示。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 二维数组的实现与应用
Mar 16 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
Jun 08 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
vue 扩展现有组件的操作
Aug 14 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 #Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 #Javascript
bootstrap modal弹出框的垂直居中
Dec 14 #Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
Dec 14 #Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 #Javascript
bootstrap模态框实现拖拽效果
Dec 14 #Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 #Javascript
You might like
《PHP边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
Web程序工作原理详解
2014/12/25 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
会计专业毕业生推荐信
2013/11/05 职场文书
毕业生护理专业个人求职信范文
2014/01/04 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
英文商务邀请函范文
2015/01/31 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
永远是春天观后感
2015/06/12 职场文书
红楼梦读书笔记
2015/06/25 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技