bootstrap中有icon圖標；icon圖標是在web項目中使用的圖標字體，bootstrap中捆綁了200多種字體格式的icon圖標，并且可以通過基于項目的bootstrap來免費使用，其實現(xiàn)原理就是通過“@font-face屬性加載了字體。

如何快速入門VUE3.0：進入學習

本教程操作環(huán)境：Windows10系統(tǒng)、bootstrap5版、DELL G3電腦

bootstrap中有icon圖標

字體圖標是在 Web 項目中使用的圖標字體。雖然，Glyphicons Halflings 需要商業(yè)許可，但是您可以通過基于項目的 Bootstrap 來免費使用這些圖標。

Bootstrap 捆綁了 200 多種字體格式的字形

小圖標icon是一個優(yōu)秀Web中不可缺少的一部分，起到畫龍點睛的效果。在Bootstrap框架中也為大家提供了250多個不同的icon圖片。

Bootstrap框架中的圖標都是字體圖標，其實現(xiàn)原理就是通過@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設(shè)置一個默認樣式，在Bootstrap框架中是通過給元素添加“glyphicon”類名來實現(xiàn)，然后通過偽元素“:before”的“content”屬性調(diào)取對應(yīng)的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部分圖標如圖所示：