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

javascript 保存文件到本地实现方法

Nov 29 Javascript

jquery动态调整div大小使其宽度始终为浏览器宽度

Jun 06 Javascript

浅谈JavaScript中数组的增删改查

Jun 20 Javascript

jQuery绑定事件的四种方式介绍

Oct 31 Javascript

JavaScript自定义函数实现查找两个字符串最长公共子串的方法

Nov 24 Javascript

bootstrap 通过加减按钮实现输入框组功能

Nov 15 Javascript

详解JavaScript的BUG和错误

May 07 Javascript

关于Vue组件库开发详析

Jul 01 Javascript

vue.js轮播图组件使用方法详解

Jul 03 Javascript

详解Vue之父子组件传值

Apr 01 Javascript

浅谈layui框架自带分页和表格重载的接口解析问题

Sep 11 Javascript

vue编写简单的购物车功能

Jan 08 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递归创建多级目录

2015/11/05 PHP

PHP实现小程序批量通知推送

2018/11/27 PHP

JavaScript Event学习补遗 addEventSimple

2010/02/11 Javascript

IE6,IE7下js动态加载图片不显示错误

2010/07/17 Javascript

document.compatMode的CSS1compat使用介绍

2014/04/03 Javascript

iframe的onreadystatechange事件在firefox下的使用

2014/04/16 Javascript

JavaScript中循环遍历Array与Map的方法小结

2016/03/12 Javascript

移动端滑动插件Swipe教程

2016/10/16 Javascript

详解使用vue实现tab 切换操作

2017/07/03 Javascript

JavaScript解析任意形式的json树型结构展示

2017/07/23 Javascript

关于vue-router的beforeEach无限循环的问题解决

2017/09/09 Javascript

浅谈VUE监听窗口变化事件的问题

2018/02/24 Javascript

Node.js console控制台简单用法分析

2019/01/04 Javascript

NodeJS读取分析Nginx错误日志的方法

2019/05/14 NodeJs

jQuery实现滑动星星评分效果(每日分享)

2019/11/13 jQuery

javascript设计模式 ? 享元模式原理与用法实例分析

2020/04/15 Javascript

基于canvasJS在PHP中制作动态图表

2020/05/30 Javascript

[02:40]2014DOTA2 国际邀请赛中国区预选赛四大豪门抵达华西村

2014/05/23 DOTA

Python配置文件解析模块ConfigParser使用实例

2015/04/13 Python

Python中Random和Math模块学习笔记

2015/05/18 Python

Python聚类算法之DBSACN实例分析

2015/11/20 Python

Python 多线程实例详解

2017/03/25 Python

TensorFlow中权重的随机初始化的方法

2018/02/11 Python

Python 中 function(#) (X)格式和 (#)在Python3.*中的注意事项

2018/11/30 Python

Python基于Dlib的人脸识别系统的实现

2020/02/26 Python

python生成13位或16位时间戳以及反向解析时间戳的实例

2020/03/03 Python

Django路由层URLconf作用及原理解析

2020/09/24 Python

OpenCV+python实现膨胀和腐蚀的示例

2020/12/21 Python

香港交友网站：be2香港

2018/07/22 全球购物

绿色美容，有机护肤品和化妆品：Safe & Chic

2018/10/29 全球购物

Guess荷兰官网：美国服饰品牌

2020/01/22 全球购物

2019奶茶店创业计划书范本，值得你借鉴

2019/08/14 职场文书

golang import自定义包方式

2021/04/29 Golang

深入理解margin塌陷和margin合并的解决方案

2021/06/26 HTML / CSS

python 字典和列表嵌套用法详解

2021/06/29 Python

微软Win11 全新照片应用面向 Dev预览版推出新版本上手体验图集

2022/09/23 数码科技