bootstrap图标无法显示的原因是什么

这篇文章给大家分享的是有关bootstrap图标无法显示的原因是什么的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

站在用户的角度思考问题,与客户深入沟通,找到遵义网站设计与遵义网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站设计制作、成都网站制作、企业官网、英文网站、手机端网站、网站推广、申请域名虚拟主机、企业邮箱。业务覆盖遵义地区。

如果不注意bootstrap引入css和fonts的规范,则可能会导致bootstrap在显示glyphicon图标时无法正常显示,显示为方框。

发现不能显示之后我使用了goole cdn上的地址引入bootstrap文件,发现可以正常显示。所以问题应该出现在引入文件这里。
ctrl+左键进入glyphyicon,发现实现的代码是这样的:

@font-face {
 font-family: 'Glyphicons Halflings';
 
 src: url('../fonts/glyphicons-halflings-regular.eot');
 src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
 position: relative;
 top: 1px;
 display: inline-block;
 font-family: 'Glyphicons Halflings';
 font-style: normal;
 font-weight: normal;
 line-height: 1;
 
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

在idea中就会发现@font-face这部分报红,提示can not resolve file glyphicons-halflings-regular.eot和glyphicons-halflings-regular.eot,意思是找不到文件。

所以glyphyicon这个样式,是关联着这些文件的,进入到下载的整个的压缩包,进入这个文件bootstrap-3.3.7-dist\fonts,就会发现如下文件:

bootstrap图标无法显示的原因是什么

所以glyphyicon这个样式,必须要关联到glyphicons-halflings-regular.eot等文件才能正常使用。通常出错是因为路径不正确所致。

分析了那么多,意思就是字体图标这个样式的实现,需要关联到glyphyicon相关文件,你在引入bootstrap.css文件时,你要确保在与bootstrap.css的相对路径下,能够让他找到这些关联文件,而CDN服务器上的正式如此,如此才能让图标正常显示。

感谢各位的阅读!关于bootstrap图标无法显示的原因是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!


本文题目:bootstrap图标无法显示的原因是什么
本文网址:http://pwwzsj.com/article/pdojsg.html