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 不能和其它元素联合使用,因为这些图标被设计为独立的元素、独立使用。

<span class="glyphicon glyphicon-search"></span>

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

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

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

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

Javascript 相关文章推荐
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
JS扩展方法实例分析
Apr 15 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
vue中 this.$set的使用详解
Nov 17 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
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
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
DOM事件探秘篇
2017/02/15 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
[36:19]2018DOTA2亚洲邀请赛 小组赛 A组加赛 Newbee vs LGD
2018/04/03 DOTA
浅谈python多线程和队列管理shell程序
2015/08/04 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
为什么需要版本控制
2016/10/28 面试题
出国导师推荐信
2014/01/16 职场文书
中考冲刺决心书
2014/03/11 职场文书
师德师风建设方案
2014/05/08 职场文书
电子信息工程自荐信
2014/05/26 职场文书
2014年国庆标语
2014/06/30 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
研究生论文答辩开场白
2015/05/27 职场文书