编程 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:以前写的xmlhttp池,代码

May 18 Javascript

JQuery CheckBox（复选框）操作方法汇总

Apr 15 Javascript

详解JavaScript中循环控制语句的用法

Jun 03 Javascript

跟我学习javascript的循环

Nov 18 Javascript

Javascript blur与click冲突解决办法

Jan 09 Javascript

详解Vue路由History mode模式中页面无法渲染的原因及解决

Sep 28 Javascript

详解在React中跨组件分发状态的三种方法

Aug 09 Javascript

Canvas实现微信红包照片效果

Aug 21 Javascript

vue项目中axios请求网络接口封装的示例代码

Dec 18 Javascript

vue+express+jwt持久化登录的方法

Jun 14 Javascript

layui使用label标签的方法

Sep 14 Javascript

优雅的使用javascript递归画一棵结构树示例代码

Sep 22 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