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

ASP中进行HTML数据及JS数据编码函数

Nov 11 Javascript

5秒后跳转到另一个页面的js代码

Oct 12 Javascript

js 判断js函数、变量是否存在的简单示例代码

Mar 04 Javascript

浅谈javascript中onbeforeunload与onunload事件

Dec 10 Javascript

angular.js分页代码的实例

Jul 27 Javascript

微信小程序仿猫眼实现实例代码

Mar 14 Javascript

JavaScript如何获取到导航条中HTTP信息

Oct 10 Javascript

JS加密插件CryptoJS实现AES加密操作示例

Aug 16 Javascript

详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计

Aug 31 Javascript

加快Vue项目的开发速度的方法

Dec 12 Javascript

详解vue移动端项目代码拆分记录

Mar 15 Javascript

微信小程序Flex布局用法深入浅出分析

Apr 25 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/07/08 PHP

php FPDF类库应用实现代码

2009/03/20 PHP

PHP中MVC模式的模板引擎开发经验分享

2011/03/23 PHP

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

2016/04/06 PHP

document.open() 与 document.write()的区别

2007/08/13 Javascript

javascript向后台传送相同属性的参数即数组参数

2014/02/17 Javascript

简介alert()与console.log()的不同

2015/08/26 Javascript

安装使用Mongoose配合Node.js操作MongoDB的基础教程

2016/03/01 Javascript

js调用父框架函数与弹窗调用父页面函数的简单方法

2016/11/01 Javascript

基于jQuery的select下拉框选择触发事件实例分析

2016/11/18 Javascript

react性能优化达到最大化的方法 immutable.js使用的必要性

2017/03/09 Javascript

html5+canvas实现支持触屏的签名插件教程

2017/05/08 Javascript

js浏览器滚动条卷去的高度scrolltop(实例讲解)

2017/07/07 Javascript

javascript数组定义的几种方法

2017/10/06 Javascript

webpack4.0 入门实践教程

2018/10/08 Javascript

详解js加减乘除精确计算

2019/03/19 Javascript

nodejs二进制与Buffer的介绍与使用

2019/07/11 NodeJs

Javascript实现鼠标移入方向感知

2020/06/24 Javascript

vue项目,代码提交至码云,iconfont的用法说明

2020/07/30 Javascript

Vue使用screenfull实现全屏效果

2020/09/17 Javascript

VUE项目实现主题切换的多种方法

2020/11/26 Vue.js

python查找第k小元素代码分享

2013/12/18 Python

讲解Python中fileno()方法的使用

2015/05/24 Python

Python调用C# Com dll组件实战教程

2017/10/12 Python

对python append 与浅拷贝的实例讲解

2018/05/04 Python

python 实现查询Neo4j多节点的多层关系

2019/12/23 Python

Python Unittest原理及基本使用方法

2020/11/06 Python

美国健康和保健平台：healtop

2020/07/02 全球购物

如何查询Oracle数据库中已经创建的索引

2013/10/11 面试题

飞利信loadrunner和软件测试笔试题

2012/09/22 面试题

商务英语应届生自我鉴定

2013/12/08 职场文书

班级团队活动方案

2014/08/14 职场文书

师德师风个人自我剖析材料

2014/09/27 职场文书

六年级语文下册教学计划

2015/01/22 职场文书

MySQL中distinct和count(*)的使用方法比较

2021/05/26 MySQL

Mongodb 迁移数据块的流程介绍分析

2022/04/18 MongoDB