如果不注意bootstrap引入css和fonts的规范，则可能会导致bootstrap在显示glyphicon图标时无法正常显示，显示为方框。
发现不能显示之后我使用了goole cdn上的地址引入bootstrap文件，发现可以正常显示。所以问题应该出现在引入文件这里。ctrl+左键进入glyphyicon，发现实现的代码是这样的：（推荐学习：Bootstrap视频教程）
@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，就会发现如下文件：
所以glyphyicon这个样式，必须要关联到glyphicons-halflings-regular.eot等文件才能正常使用。通常出错是因为路径不正确所致。
分析了那么多，意思就是字体图标这个样式的实现，需要关联到glyphyicon相关文件，你在引入bootstrap.css文件时，你要确保在与bootstrap.css的相对路径下，能够让他找到这些关联文件，而CDN服务器上的正式如此，如此才能让图标正常显示。
更多Bootstrap相关技术文章，请访问Bootstrap教程栏目进行学习！
以上就是为什么bootstrap图标无法显示的详细内容，更多请关注学步园其它相关文章！