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

可缩放Reloaded-一个针对可缩放元素的复用组件

Mar 10 Javascript

一些经常会用到的Javascript检测函数

May 31 Javascript

js change,propertychange,input事件小议

Dec 20 Javascript

dreamweaver 8实现Jquery自动提示

Dec 04 Javascript

基于Jquery和html5实现炫酷的3D焦点图动画

Mar 02 Javascript

通过JS获取Request.QueryString()参数的值实现方法

Sep 27 Javascript

jquery根据td给相同tr下其他td赋值的实现方法

Oct 05 Javascript

如何提高javascript加载速度

Dec 26 Javascript

浅谈箭头函数写法在ReactJs中的使用

Aug 22 Javascript

详解Javascript中new()到底做了些什么？

Mar 29 Javascript

Vue面试题及Vue知识点整理

Oct 07 Javascript

页面内锚点定位及跳转方法总结（推荐）

Apr 24 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日期时间函数的高级应用技巧

2009/05/16 PHP

解析用PHP读写音频文件信息的详解(支持WMA和MP3)

2013/05/10 PHP

PHP图片处理之使用imagecopy函数添加图片水印实例

2014/11/19 PHP

Yii统计不同类型邮箱数量的方法

2016/10/18 PHP

php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名

2017/05/26 PHP

PHP实现的杨辉三角求解算法分析

2019/03/11 PHP

php实现分页功能的详细实例方法

2019/09/29 PHP

jquery dialog键盘事件代码

2010/08/01 Javascript

JS维吉尼亚密码算法实现代码

2010/11/09 Javascript

Extjs中通过Tree加载右侧TabPanel具体实现

2013/05/05 Javascript

javascript禁用Tab键脚本实例

2013/11/22 Javascript

jquerymobile局部渲染的各种刷新方法小结

2014/03/05 Javascript

js模糊查询实例分享

2016/12/26 Javascript

JS实现多张图片预览同步上传功能

2017/06/23 Javascript

JS实现简单的选择题测评系统代码思路详解(demo)

2017/09/03 Javascript

详解10分钟学会vue滚动行为

2017/09/21 Javascript

vue组件发布到npm简单步骤

2017/11/30 Javascript

详解Vue CLI3 多页应用实践和源码设计

2018/08/30 Javascript

vue ssr+koa2构建服务端渲染的示例代码

2020/03/23 Javascript

python执行外部程序的常用方法小结

2015/03/21 Python

python简单猜数游戏实例

2015/07/09 Python

python3.4用循环往mysql5.7中写数据并输出的实现方法

2017/06/20 Python

基于Python中求和函数sum的用法详解

2018/06/28 Python

Python的log日志功能及设置方法

2019/07/11 Python

Django在Model保存前记录日志实例

2020/05/14 Python

使用OpenCV对车道进行实时检测的实现示例代码

2020/06/19 Python

css3教程之倾斜页面

2014/01/27 HTML / CSS

html5 web本地存储将取代我们的cookie

2012/12/26 HTML / CSS

Spartoo芬兰：欧洲最大的网上鞋店

2016/08/28 全球购物

英国行业制服供应商：Alexandra

2019/09/14 全球购物

2014年招商工作总结

2014/11/22 职场文书

承诺保证书格式

2015/02/28 职场文书

家庭暴力离婚起诉书

2015/05/18 职场文书

旷工检讨书大全

2015/08/15 职场文书

九年级数学教学反思

2016/02/17 职场文书

virtualenv隔离Python环境的问题解析

2022/06/21 Python