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

validator验证控件使用代码

Nov 23 Javascript

js获取html参数及向swf传递参数应用介绍

Feb 18 Javascript

js键盘上下左右键怎么触发function(实例讲解)

Dec 14 Javascript

Node.js实现批量去除BOM文件头

Dec 20 Javascript

原生javascript实现图片按钮切换

Jan 12 Javascript

基于JS实现新闻列表无缝向上滚动实例代码

Jan 22 Javascript

详解node.js搭建代理服务器请求数据

Apr 08 Javascript

xmlplus组件设计系列之文本框（TextBox)（3）

May 03 Javascript

layui问题之模拟select点击事件的实例讲解

Aug 15 Javascript

es6数据变更同步到视图层的方法

Mar 04 Javascript

vue父组件给子组件的组件传值provide inject的方法

Oct 23 Javascript

JS实现放烟花效果

Mar 10 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 flush类输出缓冲剖析

2008/10/19 PHP

php全排列递归算法代码

2012/10/09 PHP

Yii实现MySQL多数据库和读写分离实例分析

2014/12/03 PHP

PHP永久登录、记住我功能实现方法和安全做法

2015/04/27 PHP

实现PHP搜索加分页

2016/10/12 PHP

在 Laravel 6 中缓存数据库查询结果的方法

2019/12/11 PHP

网站导致浏览器崩溃的原因总结(多款浏览器) 推荐

2010/04/15 Javascript

使用js获取地址栏中传递的值

2013/07/02 Javascript

JS性能优化笔记搜索整理

2013/08/21 Javascript

jQuery中ready事件用法实例

2015/01/19 Javascript

深入探究AngularJS框架中Scope对象的超级教程

2016/01/04 Javascript

js仿百度登录页实现拖动窗口效果

2016/03/11 Javascript

vue.js指令v-for使用及索引获取

2016/11/03 Javascript

Vue2.x中的父组件传递数据至子组件的方法

2017/05/01 Javascript

layui实现动态和静态分页

2018/04/28 Javascript

详解webpack4之splitchunksPlugin代码包分拆

2018/12/04 Javascript

详解NodeJS Https HSM双向认证实现

2019/03/12 NodeJs

15分钟学会vue项目改造成SSR(小白教程)

2019/12/17 Javascript

Python常用正则表达式符号浅析

2014/08/13 Python

Python实现的用户登录系统功能示例

2018/02/05 Python

Django xadmin开启搜索功能的实现

2019/11/15 Python

Python 实现加密过的PDF文件转WORD格式

2020/02/04 Python

Pycharm自动添加文件头注释和函数注释参数的方法

2020/10/23 Python

Python接口自动化系列之unittest结合ddt的使用教程详解

2021/02/23 Python

IE9下html5初试小刀

2010/09/21 HTML / CSS

Ann Taylor官方网站：美国最大的女性产品制造商之一

2016/09/14 全球购物

全球航班旅行搜索网站：Cheapflights

2017/05/19 全球购物

Boden美国官网：英伦原创时装品牌

2017/07/03 全球购物

耐克中国官方商城：Nike中国

2018/10/18 全球购物

函授大专自我鉴定

2013/11/01 职场文书

旅游管理毕业生自荐信范文

2014/03/19 职场文书

春节联欢晚会主持词范文

2014/03/24 职场文书

诚信承诺书范文

2014/03/27 职场文书

小学体育组工作总结2015

2015/07/21 职场文书

2016拓展训练心得体会范文

2016/01/12 职场文书

导游词之云南-元阳梯田

2019/10/08 职场文书