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

如何快速入門VUE3.0：進(jìn)入學(xué)習(xí)

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

bootstrap中有icon圖標(biāo)

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

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

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

Bootstrap框架中的圖標(biāo)都是字體圖標(biāo)，其實(shí)現(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è)置一個(gè)默認(rèn)樣式，在Bootstrap框架中是通過給元素添加“glyphicon”類名來實(shí)現(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部分圖標(biāo)如圖所示：