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

form表单只提交数据而不进行页面跳转的解决方案

Sep 18 Javascript

js取消单选按钮选中并判断对象是否为空

Nov 14 Javascript

javascript三元运算符用法实例

Apr 16 Javascript

javascript编程异常处理实例小结

Nov 30 Javascript

JavaScript数据操作_浅谈原始值和引用值的操作本质

Aug 23 Javascript

Webpack打包慢问题的完美解决方法

Mar 16 Javascript

JavaScript实现经纬度转换成地址功能

Mar 28 Javascript

基于angular实现三级联动的生日插件

May 12 Javascript

基于vue v-for 多层循环嵌套获取行数的方法

Sep 26 Javascript

JS实现倒序输出的几种常用方法示例

Apr 13 Javascript

如何基于vue-cli3.0构建功能完善的移动端架子

Apr 24 Javascript

Vue + Element UI图片上传控件使用详解

Aug 20 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不使用插件导出excel的简单方法

2014/03/04 PHP

PHP魔术引号所带来的安全问题分析

2014/07/15 PHP

thinkPHP框架实现多表查询的方法

2018/06/14 PHP

Laravel关联模型中过滤结果为空的结果集(has和with区别)

2018/10/18 PHP

javascript 利用Image对象实现的埋点(某处的点击数)统计

2012/12/28 Javascript

jQuery的层级查找方式分析

2016/06/16 Javascript

js 上传文件预览的简单实例

2016/08/16 Javascript

在Web项目中引入Jquery插件报错的完美解决方案(图解)

2016/09/19 Javascript

Javascript中字符串和数字的操作方法整理

2017/01/22 Javascript

JS实现图片旋转动画效果封装与使用示例

2018/07/09 Javascript

解决vue中修改export default中脚本报一大堆错的问题

2018/08/27 Javascript

微信小程序按钮去除边框线分享页面功能

2018/08/27 Javascript

angularJs中ng-model-options设置数据同步的方法

2018/09/30 Javascript

Vue cli3 库模式搭建组件库并发布到 npm的流程

2018/10/12 Javascript

JavaScript基于数组实现的栈与队列操作示例

2018/12/22 Javascript

详解vue项目打包步骤

2019/03/29 Javascript

ES6 Object.assign()的用法及其使用

2020/01/18 Javascript

微信小程序动态添加和删除组件的现实

2020/02/28 Javascript

Vue(定时器)解决mounted不能获取到data中的数据问题

2020/07/30 Javascript

python在指定目录下查找gif文件的方法

2015/05/04 Python

python学习之编写查询ip程序

2016/02/27 Python

在Python程序和Flask框架中使用SQLAlchemy的教程

2016/06/06 Python

Python格式化日期时间操作示例

2018/06/28 Python

解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题

2019/07/15 Python

django中media媒体路径设置的步骤

2019/11/15 Python

PyTorch中的padding(边缘填充)操作方式

2020/01/03 Python

python机器学习库xgboost的使用

2020/01/20 Python

Scrapy模拟登录赶集网的实现代码

2020/07/07 Python

python+flask编写一个简单的登录接口

2020/11/13 Python

YSL圣罗兰美妆官方旗舰店：购买YSL口红

2018/04/16 全球购物

日本必酷网络直营店：Biccamera

2019/03/23 全球购物

建筑工程专业学生的自我评价

2013/12/25 职场文书

出生医学证明书

2014/09/15 职场文书

教师聘用意向书

2015/05/11 职场文书

公司管理建议书

2015/09/14 职场文书

Python实现将多张图片合成MP4视频并加入背景音乐

2022/04/28 Python