Bootstrap字体图标无法正常显示的解决方法

bootstratp作为一个优秀的前端框架,最近使用了其中的Glyphicon Halflings的字体图标。起初一直显示不出来,后面通过搜索相关资料直到成功显示,在此做一些总结,方便后面复习。

1、在html页面引入bootstrap

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>xxxx</title> <link href="https://www.jb51.net/css/bootstrap/bootstrap.min.css"> </head> <body> </body> <script src="https://www.jb51.net/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 不能和其它元素联合使用,因为这些图标被设计为独立的元素、独立使用。

<span></span>

Bootstrap字体图标无法正常显示的解决方法


参考链接:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzjydy.html