介绍 @font-face {
字体类型:& # 39;Glyphicons半身# 39;;
src: url(& # 39; . ./字体/glyphicons-halflings-regular.eot& # 39;);
src: url(& # 39; . ./字体/glyphicons-halflings-regular.eot ? # iefix& # 39;)格式(& # 39;embedded-opentype& # 39;), url(& # 39; . ./字体/glyphicons-halflings-regular.woff2& # 39;)格式(& # 39;woff2& # 39;), url(& # 39; . ./字体/glyphicons-halflings-regular.woff& # 39;)格式(& # 39;woff # 39;), url(& # 39; . ./字体/glyphicons-halflings-regular.ttf& # 39;)格式(& # 39;truetype # 39;), url(& # 39;字体. .//glyphicons-halflings-regular.svg # glyphicons_halflingsregular& # 39;)格式(& # 39;svg # 39;);
}
.glyphicon {
位置:相对;
上图:1 px;
显示:inline-block;
字体类型:& # 39;Glyphicons半身# 39;;
字体样式:正常;
粗细:正常;
行高:1;
-webkit-font-smoothing:平滑;
-moz-osx-font-smoothing:灰度;
}
这篇文章给大家分享的是有关引导图标无法显示的原因是什么的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
<>强如果不注意引导引入css和字体的规范,则可能会导致引导在显示glyphicon图标时无法正常显示,显示为方框。
发现不能显示之后我使用了古耳cdn上的地址引入引导文件,发现可以正常显示,所以问题应该出现在引入文件这里。
ctrl +左键进入glyphyicon,发现实现的代码是这样的:
在思想中就会发现@font-face这部分报红,提示不能解决文件glyphicons-halflings-regular.eot和glyphicons-halflings-regular.eot,意思是找不到文件。
所以glyphyicon这个样式,是关联着这些文件的,进入到下载的整个的压缩包,进入这个文件bootstrap-3.3.7-dist \字体,就会发现如下文件:
所以glyphyicon这个样式,必须要关联到glyphicons-halflings-regular.eot等文件才能正常使用。<强>通常出错是因为路径不正确所致。
<强>分析了那么多,意思就是字体图标这个样式的实现,需要关联到glyphyicon相关文件,你在引入bootstrap.css文件时,你要确保在与引导。css的相对路径下,能够让他找到这些关联文件,而CDN服务器上的正式如此,如此才能让图标正常显示。
感谢各位的阅读!关于引导图标无法显示的原因是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
