- 时间:2021-12-10 22:58 编辑: 来源: 阅读:
- 扫一扫,手机访问
摘要:Bootstrap字体图标无法正常显示的解决方法
bootstratp作为一个优秀的前端框架,最近使用了其中的Glyphicon Halflings的字体图标。起初一直显示不出来,后面通过搜索相关资料直到成功显示,在此做一些总结,方便后面复习。
[b]1、在html页面引入bootstrap[/b]
<!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>
[b]2、在放bootstrap.min.css的文件夹同级的目录下添加官网下载好的fonts文件里的所有东西[/b]
[img]http://files.jb51.net/file_images/article/201610/2016108142706277.jpg?201698142714[/img]
[b]3、在项目的/img/文件下添加(关键)[/b]
glyphicons-halflings-white.png
glyphicons-halflings.png
[b]4、使用[/b]
放在任何地方都能使用。为了留下正确的内补(padding),一定要在图标和文本之间加上一个空格。图标 class 不能和其它元素联合使用,因为这些图标被设计为独立的元素、独立使用。
<span class="glyphicon glyphicon-search"></span>
[img]http://files.jb51.net/file_images/article/201610/2016108142737364.jpg?201698142743[/img]
参考链接:[url=http://v2.bootcss.com/base-css.html#icons]http://v2.bootcss.com/base-css.html#icons[/url]
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
如果大家还想深入学习,可以点击[url=http://www.1sucai.cn/article/84087.htm]这里[/url]进行学习,再为大家附两个精彩的专题:[url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url]
[url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url]