时间:2021-05-18
你在使用bootstrap字体图标的时候,是否遇到引用本地Bootstrap文件无法显示字体图标,而使用CDN服务器上bootstrap却能正常显示的问题。
在不能正常显示的时候,比如我要在一个按钮中使用一个√的字体图标,我的代码是这样子的:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootstrap字体图标</title> <link rel="stylesheet" href="../libs/bootstrap.css"> </head> <body> <div class="container"> <button class="btn"> <span class="glyphicon glyphicon-ok"></span></button> </div> </body> </html>但是他的显示却是这个样子的:
网上查找了很多解决办法,说法不一。下面来看看我是如何解决的。
发现不能显示之后我使用了goole cdn上的地址引入bootstrap文件,发现可以正常显示。所以问题应该出现在引入文件这里。
ctrl+左键进入glyphyicon,发现实现的代码是这样的:
在idea中就会发现@font-face这部分报红,提示can not resolve file glyphicons-halflings-regular.eot和glyphicons-halflings-regular.eot,意思是找不到文件。
所以glyphyicon这个样式,是关联着这些文件的,进入到下载的整个的压缩包,进入这个文件bootstrap-3.3.7-dist\fonts,就会发现如下文件:
所以glyphyicon这个样式,必须要关联到glyphicons-halflings-regular.eot等文件才能正常使用。
而在我的引用bootstrap文件中,我是这样引用的,可能你也正在犯跟我一样的错误:
<link rel="stylesheet" href="../libs/bootstrap.css">
在webstrom中看到我的libs目录是这样的:
是的,在使用bootstrap的大多样式的时候,单单是bootstrap.css这个文件就够了,不必引入全部的,这样可以让我们的项目没那么臃肿。但是在我们使用字体图标的时候,是需要关联到字体图标相关的文件才得以实现的,所以当我引入整个bootstrap-3.3.7(您也可以部分引入,只要将你想要的功能的相关文件全部引入且目录无误即可),然后再在我的html中这样引入:
<link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">
这样就能够正常显示字体图标:
总结:分析了那么多,意思就是字体图标这个样式的实现,需要关联到glyphyicon相关文件,你在引入bootstrap.css文件时,你要确保在与bootstrap.css的相对路径下,能够让他找到这些关联文件,而CDN服务器上的正式如此,如此才能让图标正常显示。
如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:
Bootstrap学习教程
Bootstrap实战教程
Bootstrap Table使用教程
Bootstrap插件使用教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
解决方法:补充:idea中yml文件图标小绿叶变成小网格问题及自动提示失效解决方法idea中yml文件图标小绿叶变成小网格问题及自动提示失效解决方法.yml文件
如何解决下载的CHM文件无法显示网页问题 问题症状:打开CHM文件,左边目录齐全,可右边边框里却是无法显示网页。如下图所示:解决方法:方法一:修改注册表1)新建
您是否遇到u盘插入电脑却显示无法访问情况呢?u盘无法访问情况会造成u盘文件无法读取,那要怎么解决u盘拒绝访问问题?下面就是具体解决方法。 1、右击u盘,点
您是否遇到u盘插入电脑却显示无法访问情况呢?u盘无法访问情况会造成u盘文件无法读取,那要怎么解决u盘拒绝访问问题?下面就是具体解决方法。 1、右击u盘,点
当在bootstrap的modal中使用ckeditor时,使用ckeditor中带弹框的功能时无法输入问题。解决方法:在jquery和bootstrap加载之