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

使用JS操作页面表格，元素的一些技巧

Feb 02 Javascript

什么是JavaScript

Aug 13 Javascript

JavaScript 设计模式安全沙箱模式

Sep 24 Javascript

JavaScript的arguments对象应用示例

Sep 15 Javascript

内容滑动切换效果jquery.hwSlide.js插件封装

Jul 07 Javascript

javascript获取网页各种高宽及位置的方法总结

Jul 27 Javascript

JS关闭窗口时产生的事件及用法示例

Aug 20 Javascript

angularjs中ng-attr的用法详解

Dec 31 Javascript

JS实现json对象数组按对象属性排序操作示例

May 18 Javascript

一文了解vue-router之hash模式和history模式

May 31 Javascript

layui checkbox默认选中,获取选中值,清空所有选中项的例子

Sep 02 Javascript

JS实现页面炫酷的时钟特效示例

Aug 14 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

jQuery中的RadioButton,input,CheckBox取值赋值实现代码

2014/02/18 PHP

PHP进行批量任务处理不超时的解决方法

2016/07/11 PHP

php实现用户登陆简单实例

2017/04/04 PHP

解决AJAX中跨域访问出现'没有权限'的错误

2008/08/20 Javascript

jquery插件jbox使用iframe关闭问题

2009/02/09 Javascript

JQuery 返回布尔值Is()条件判断方法代码

2012/05/14 Javascript

jquery选择器的选择使用及性能介绍

2013/01/16 Javascript

用js的for循环获取radio选中的值

2013/10/21 Javascript

JS自调用匿名函数具体实现

2014/02/11 Javascript

JS+CSS实现感应鼠标渐变显示DIV层的方法

2015/02/20 Javascript

JavaScript实现图片轮播的方法

2015/07/31 Javascript

使用jquery.qrcode.min.js实现中文转化二维码

2016/03/11 Javascript

Angularjs 制作购物车功能实例代码

2016/09/14 Javascript

jQuery中map函数的两种方式

2017/04/07 jQuery

原生JS实现轮播图效果

2018/10/12 Javascript

React中使用外部样式的3种方式(小结)

2019/05/28 Javascript

nuxt配置通过指定IP和端口访问的实现

2020/01/08 Javascript

Javascript摸拟自由落体与上抛运动原理与实现方法详解

2020/04/08 Javascript

[02:53]DOTA2英雄昆卡基础教程

2013/11/25 DOTA

[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16

2019/08/18 DOTA

[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22

2020/11/24 DOTA

[01:33:25]DOTA2-DPC中国联赛正赛 Elephant vs IG BO3 第一场 1月24日

2021/03/11 DOTA

Python实现RGB与HSI颜色空间的互换方式

2019/11/27 Python

通过Turtle库在Python中绘制一个鼠年福鼠

2020/02/03 Python

澳大利亚香水在线：Price Rite Mart

2017/12/28 全球购物

database面试题

2013/03/28 面试题

Python使用openpyxl复制整张sheet

2021/03/24 Python

高等教育学自荐书范文

2014/02/10 职场文书

股东合作协议书

2014/04/14 职场文书

星级党支部申报材料

2014/05/31 职场文书

学习优秀党务工作者先进事迹材料思想报告

2014/09/17 职场文书

2014乡镇干部对照检查材料思想汇报

2014/09/26 职场文书

2014三年级班主任工作总结

2014/12/05 职场文书

实习介绍信模板

2015/01/30 职场文书

2015年办公室文秘工作总结

2015/04/30 职场文书

解决ObjectMapper.convertValue() 遇到的一些问题

2021/06/30 Java/Android