bootstrap中有icon图标;icon图标是在web项目中使用的图标字体,bootstrap中捆绑了200多种字体格式的icon图标,并且可以通过基于项目的bootstrap来免费使用,其实现原理就是通过“@font-face属性加载了字体。
本教程操作环境:Windows10系统、bootstrap5版、DELL G3电脑
字体图标是在 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教程
The above is the detailed content of Is there an icon in bootstrap?. For more information, please follow other related articles on the PHP Chinese website!