编程 Javascript

Bootstrap字体图标无法正常显示的解决方法

Posted in Javascript onOctober 08, 2016

bootstratp作为一个优秀的前端框架，最近使用了其中的Glyphicon Halflings的字体图标。起初一直显示不出来，后面通过搜索相关资料直到成功显示，在此做一些总结，方便后面复习。

1、在html页面引入bootstrap

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>xxxx</title>
 <link href="../css/bootstrap/bootstrap.min.css" rel="stylesheet">
</head>
<body>
 
</body>
<script src="../js/lib/jquery.min.js" type="text/javascript"></script>
<script type="../js/lib/bootstrap.min.js" type="text/javascript"></script>

</html>

2、在放bootstrap.min.css的文件夹同级的目录下添加官网下载好的fonts文件里的所有东西

　 Bootstrap字体图标无法正常显示的解决方法

3、在项目的/img/文件下添加（关键）

glyphicons-halflings-white.png
glyphicons-halflings.png

4、使用

放在任何地方都能使用。为了留下正确的内补（padding），一定要在图标和文本之间加上一个空格。图标 class 不能和其它元素联合使用，因为这些图标被设计为独立的元素、独立使用。

Bootstrap字体图标无法正常显示的解决方法

参考链接：http://v2.bootcss.com/base-css.html#icons

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

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

Bootstrap字体图标无法正常显示的解决方法

- Author -

helijun

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 类的定义和引用 JavaScript高级培训自定义对象

Apr 27 Javascript

javascript调试说明

Jun 07 Javascript

理解JavaScript的prototype属性

Feb 11 Javascript

利用js实现选项卡的特别效果的实例

Mar 03 Javascript

js图片闪动特效可以控制间隔时间如几分钟闪动一下

Aug 12 Javascript

JavaScript数据类型检测代码分享

Jan 26 Javascript

Node.js 异步编程之 Callback介绍（一）

Mar 30 Javascript

jQuery插件imgPreviewQs实现上传图片预览

Jan 15 Javascript

jQuery基于muipicker实现仿ios时间选择

Feb 22 Javascript

JavaScript中的this原理及6种常见使用场景详解

Feb 14 Javascript

有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案

May 09 Javascript

解决vue init webpack 下载依赖卡住不动的问题

Nov 09 Javascript

Javascript中常用的检测方法小结

Oct 08 #Javascript

微信小程序前端源码逻辑和工作流详解

Oct 08 #Javascript

AngularJS 2.0入门权威指南

Oct 08 #Javascript

省市区三级联动jquery实现代码

Apr 15 #Javascript

微信小程序数据访问实例详解

Oct 08 #Javascript

Bootstrap Table的使用总结

Oct 08 #Javascript

js HTML5手机刮刮乐代码

Sep 29 #Javascript

You might like

PHP实现网上点歌（二）

2006/10/09 PHP

PHP调用MySQL的存储过程的实现代码

2008/08/12 PHP

php检查是否是ajax请求的方法

2015/04/16 PHP

46 个非常有用的 PHP 代码片段

2016/02/16 PHP

php实现支持中文的文件下载功能示例

2017/08/30 PHP

php使用curl伪造浏览器访问操作示例

2019/09/30 PHP

JavaScript中的isXX系列是否继续使用的分析

2011/04/16 Javascript

jQuery瀑布流插件Wookmark使用实例

2014/04/02 Javascript

js实现的简洁网页滑动tab菜单效果代码

2015/08/24 Javascript

详解vuelidate 对于vueJs2.0的验证解决方案

2017/03/09 Javascript

微信小程序实现时间预约功能

2018/11/27 Javascript

vue 点击展开显示更多(点击收起部分隐藏)

2019/04/09 Javascript

[10:04]国际邀请赛采访专栏：DK.Farseer，mouz.Black^，采访员Josh专访

2013/08/05 DOTA

[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战

2015/07/18 DOTA

利用Python如何生成随机密码

2016/04/20 Python

python采用django框架实现支付宝即时到帐接口

2016/05/17 Python

Python中Selenium模拟JQuery滑动解锁实例

2017/07/26 Python

Python编程使用NLTK进行自然语言处理详解

2017/11/16 Python

OpenCV2.3.1+Python2.7.3+Numpy等的配置解析

2018/01/05 Python

Python下载网络小说实例代码

2018/02/03 Python

Python全局变量与局部变量区别及用法分析

2018/09/03 Python

python编程使用协程并发的优缺点

2018/09/20 Python

python多进程使用及线程池的使用方法代码详解

2018/10/24 Python

Python学习笔记之图片人脸检测识别实例教程

2019/03/06 Python

python 使用socket传输图片视频等文件的实现方式

2019/08/07 Python

python 轮询执行某函数的2种方式

2020/05/03 Python

CSS3 真的会替代 SCSS 吗

2021/03/09 HTML / CSS

如何反序的迭代一个序列？how do I iterate over a sequence in reverse order

2012/02/04 面试题

安全生产知识竞赛活动总结

2014/07/07 职场文书

机械机修工岗位职责

2014/08/03 职场文书

公司新人试用期自我评价

2014/09/17 职场文书

普通党员群众路线教育实践活动心得体会

2014/11/04 职场文书

特岗教师个人总结

2015/02/10 职场文书

2015年商场工作总结

2015/04/27 职场文书

python实现监听键盘

2021/04/26 Python

Go微服务项目配置文件的定义和读取示例详解

2022/06/21 Golang