本教程操作环境:windows10系统、bootstrap5版、dell g3电脑
bootstrap中有icon图标字体图标是在 web 项目中使用的图标字体。虽然,glyphicons halflings 需要商业许可,但是您可以通过基于项目的 bootstrap 来免费使用这些图标。
bootstrap 捆绑了 200 多种字体格式的字形
小图标icon是一个优秀web中不可缺少的一部分,起到画龙点睛的效果。在bootstrap框架中也为大家提供了250多个不同的icon图片。
bootstrap框架中的图标都是字体图标,其实现原理就是通过@font-face属性加载了字体
@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.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');}
自定义完字体之后,需要对icon设置一个默认样式,在bootstrap框架中是通过给元素添加“glyphicon”类名来实现,然后通过伪元素“:before”的“content”属性调取对应的icon编码
.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;}.glyphicon-asterisk:before { content: "\2a";}
bootstrap部分图标如图所示:
相关推荐:bootstrap教程
以上就是bootstrap中有没有icon图标的详细内容。
