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

IE6不能修改NAME问题的解决方法

Sep 03 Javascript

JQuery 1.3.2以上版本中出现pareseerror错误的解决方法

Jan 11 Javascript

Javascript公共脚本库系列(一): 弹出层脚本

Feb 24 Javascript

JavaScript获取两个数组交集的方法

Jun 09 Javascript

jQuery中 delegate使用的问题

Jul 03 Javascript

bootstrap中添加额外的图标实例代码

Feb 15 Javascript

js获取元素下的第一级子元素的方法(推荐)

Mar 05 Javascript

微信分享调用jssdk实例

Jun 08 Javascript

vue异步加载高德地图的实现

Jun 19 Javascript

快速解决处理后台返回json数据格式的问题

Aug 07 Javascript

Vuejs+vue-router打包+Nginx配置的实例

Sep 20 Javascript

javascript实现贪吃蛇经典游戏

Apr 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开发时容易忘记的一些技术细节

2016/02/03 PHP

PHP数组相加操作及与array_merge的区别浅析

2016/11/26 PHP

php获取客户端IP及URL的方法示例

2017/02/03 PHP

JSQL 基于客户端的成绩统计实现方法

2010/05/05 Javascript

javascript动态改变img的src属性图片不显示的解决方法

2010/10/20 Javascript

Jquery 一次处理多个ajax请求的代码

2011/09/02 Javascript

js异步加载的三种解决方案

2013/03/04 Javascript

javascript批量修改文件编码格式的方法

2015/01/27 Javascript

javascript下使用Promise封装FileReader

2016/02/19 Javascript

javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)

2016/09/20 Javascript

js 模仿锚点定位的实现方法

2016/11/19 Javascript

完美实现js选项卡切换效果(一)

2017/03/08 Javascript

$.browser.msie 为空或不是对象问题的多种解决方法

2017/03/19 Javascript

vue+swiper实现侧滑菜单效果

2017/12/28 Javascript

详解vuex之store拆分即多模块状态管理(modules)篇

2018/11/13 Javascript

python网络编程学习笔记(七)：HTML和XHTML解析(HTMLParser、BeautifulSoup)

2014/06/09 Python

Python使用Matplotlib实现Logos设计代码

2017/12/25 Python

python http接口自动化脚本详解

2018/01/02 Python

pygame实现成语填空游戏

2019/10/29 Python

tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现

2020/02/06 Python

html5使用canvas实现图片下载功能的示例代码

2017/08/26 HTML / CSS

Canvas图片分割效果的实现

2019/07/29 HTML / CSS

TripAdvisor斯洛伐克：阅读评论、比较价格和酒店预订

2018/04/25 全球购物

英国Radley包德国官网：Radley London德国

2019/11/18 全球购物

初中考试作弊检讨书

2014/02/01 职场文书

餐厅执行经理岗位职责范本

2014/02/26 职场文书

股权转让意向书

2014/04/01 职场文书

2014年党支部学习材料

2014/05/19 职场文书

竞选班干部演讲稿400字

2014/08/20 职场文书

学习优秀共产党员先进事迹思想报告

2014/09/17 职场文书

大学军训自我鉴定大全

2014/09/18 职场文书

担保贷款承诺书

2015/04/30 职场文书

党支部对转正的意见

2015/06/02 职场文书

喋血孤城观后感

2015/06/08 职场文书

2016大学生诚信考试承诺书

2016/03/25 职场文书

Django使用redis配置缓存的方法

2021/06/01 Redis