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

jQuery ajax(复习)—Baidu ajax request分离版

Jan 24 Javascript

jquery Ajax 实现加载数据前动画效果的示例代码

Feb 07 Javascript

45个JavaScript编程注意事项、技巧大全

Feb 11 Javascript

JQuery显示隐藏页面元素的方法总结

Apr 16 Javascript

跟我学习javascript的异步脚本加载

Nov 20 Javascript

使用jQuery监听DOM元素大小变化

Feb 24 Javascript

js数组与字符串常用方法总结

Jan 13 Javascript

Angular.js ng-file-upload结合springMVC的使用教程

Jul 10 Javascript

React Native 图片查看组件的方法

Mar 01 Javascript

微信小程序开发之改变data中数组或对象的某一属性值

Jul 05 Javascript

移动端如何用下拉刷新的方式实现上拉加载

Dec 10 Javascript

vue route新窗口跳转页面并且携带与接收参数

Apr 10 Vue.js

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本地服务器分享

2013/02/19 PHP

JavaScript创建命名空间的5种写法

2014/06/24 PHP

php获取本周开始日期和结束日期的方法

2015/03/09 PHP

laravel清除视图缓存的代码

2019/10/23 PHP

基于ThinkPHP删除目录及目录文件函数

2020/10/28 PHP

一个基于jquery的文本框记数器

2012/09/19 Javascript

Ext JS 4实现带week(星期)的日期选择控件(实战一)

2013/08/21 Javascript

jQuery 选择器详解

2015/01/19 Javascript

javascript中call,apply,bind的用法对比分析

2015/02/12 Javascript

JavaScript实现图片自动加载的瀑布流效果

2016/04/11 Javascript

JavaScript编写页面半透明遮罩效果的简单示例

2016/05/09 Javascript

jQuery无刷新上传之uploadify3.1简单使用

2016/06/18 Javascript

Bootstrap Table服务器分页与在线编辑应用总结

2016/08/08 Javascript

详解JavaScript中this的指向问题

2017/01/20 Javascript

ng-options和ng-checked在表单中的高级运用(推荐)

2017/01/21 Javascript

Angular JS 生成动态二维码的方法

2017/02/23 Javascript

详谈js中标准for循环与foreach(for in)的区别

2017/11/02 Javascript

JavaScript 判断iPhone X Series机型的方法

2019/01/28 Javascript

微信小程序登录数据解密及状态维持实例详解

2019/05/06 Javascript

vue两组件间值传递 $router.push实现方法

2019/05/15 Javascript

vue中@change兼容问题详解

2019/10/25 Javascript

python flask解析json数据不完整的解决方法

2019/05/26 Python

jupyter notebook 中输出pyecharts图实例

2020/04/23 Python

python读取指定字节长度的文本方法

2019/08/27 Python

Django实现简单网页弹出警告代码

2019/11/15 Python

Python 找出出现次数超过数组长度一半的元素实例

2020/05/11 Python

sklearn的predict_proba使用说明

2020/06/28 Python

CSS3实现的闪烁跳跃进度条示例(附源码)

2013/08/19 HTML / CSS

英国、欧洲和全球租车服务：Avis英国

2016/08/29 全球购物

高级Java程序员面试要点

2013/08/02 面试题

文艺演出策划方案

2014/06/07 职场文书

2014年业务工作总结

2014/11/17 职场文书

民事撤诉申请书范本

2015/05/18 职场文书

高三毕业感言

2015/07/30 职场文书

vue中data改变后让视图同步更新的方法

2021/03/29 Vue.js

Django如何创作一个简单的最小程序

2021/05/12 Python