编程 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 相关文章推荐

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 职场文书