编程 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获取被勾选的checked(选中)的那一行的3列和4列的值

Jul 04 Javascript

jquery 表格排序、实时搜索表格内容(附图)

May 19 Javascript

通过JS来动态的修改url，实现对url的增删查改

Sep 01 Javascript

JQuery中DOM事件冒泡实例分析

Jun 13 Javascript

详解JavaScript编程中正则表达式的使用

Oct 25 Javascript

JavaScript实现Fly Bird小游戏

Dec 15 Javascript

Ionic项目中Native Camera的使用方法

Jun 07 Javascript

vue.js内部自定义指令与全局自定义指令的实现详解（利用directive）

Jul 11 Javascript

Three.js实现绘制字体模型示例代码

Sep 26 Javascript

Node.js实现注册邮箱激活功能的方法示例

Mar 23 Javascript

vue开发chrome插件，实现获取界面数据和保存到数据库功能

Dec 01 Vue.js

JS中一些高效的魔法运算符总结

May 06 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生成SessionID和图片校验码的思路和实现代码

2009/03/10 PHP

php 定义404页面的实现代码

2012/11/19 PHP

Win7 64位系统下PHP连接Oracle数据库

2014/08/20 PHP

php下Memcached入门实例解析

2015/01/05 PHP

php实现格式化多行文本为Js可用格式

2015/04/15 PHP

php.ini中date.timezone设置详解

2016/11/20 PHP

thinkPHP实现的联动菜单功能详解

2017/05/05 PHP

解决php扩展安装不生效问题

2019/10/25 PHP

学习ExtJS table布局

2009/10/08 Javascript

firebug的一个有趣现象介绍

2011/11/30 Javascript

js获取height和width的方法说明

2013/01/06 Javascript

jquery获取对象的方法足以应付常见的各种类型的对象

2014/05/14 Javascript

如何使用Bootstrap的modal组件自定义alert，confirm和modal对话框

2016/03/01 Javascript

Backbone.js框架中Model与Collection的使用实例

2016/05/07 Javascript

老生常谈Javascript中的原型和this指针

2016/10/09 Javascript

原生js实现简单的Ripple按钮实例代码

2017/03/24 Javascript

JS触摸事件、手势事件详解

2017/05/04 Javascript

Angularjs 手写日历的实现代码（不用插件）

2017/10/18 Javascript

Vue实现带进度条的文件拖动上传功能

2018/02/23 Javascript

vue 音乐App QQ音乐搜索列表最新接口跨域设置方法

2018/09/25 Javascript

详解mpvue scroll-view自动回弹bug解决方案

2018/10/01 Javascript

vue 移动端记录页面浏览位置的方法

2020/03/11 Javascript

JavaScript 接口原理与用法实例详解

2020/05/12 Javascript

Opencv+Python 色彩通道拆分及合并的示例

2018/12/08 Python

python os模块简单应用示例

2019/05/23 Python

使用python画社交网络图实例代码

2019/07/10 Python

CSS3弹性盒模型flex box快速入门心得(必看篇)

2016/05/24 HTML / CSS

Linux如何命名文件--使用文件名时应注意

2012/01/22 面试题

商务英语大学生职业生涯规划书范文

2014/01/01 职场文书

企业给企业的表扬信

2014/01/13 职场文书

医学求职自荐信

2014/06/21 职场文书

2014年护理工作总结范文

2014/11/14 职场文书

幼儿园大班开学寄语（2015秋季）

2015/05/27 职场文书

mysql连接查询中and与where的区别浅析

2021/07/01 MySQL

python playwright 自动等待和断言详解

2021/11/27 Python

golang的文件创建及读写操作

2022/04/14 Golang