html的bootstrap小图标不显示

发布网友 发布时间：2022-05-11 21:58

我来回答

共2个回答

懂视网 时间：2022-05-12 02:19

发现不能显示之后我使用了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-distfonts，就会发现如下文件：

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

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

更多Bootstrap相关技术文章，请访问Bootstrap教程栏目进行学习！

热心网友 时间：2022-05-11 23:27

1、字体图标是否下载，fonts文件夹下一般有以下几个文件

2、看bootstrap.css里的@font-face图标文件地址引用是否正确

如图

↑原

↓现