bootstrap中有icon圖標(biāo)嗎

這篇文章主要講解了“bootstrap中有icon圖標(biāo)嗎”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“bootstrap中有icon圖標(biāo)嗎”吧！

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屬性加載了字體。

本教程操作環(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');
}

　　自定義完字體之后，需要對(duì)icon設(shè)置一個(gè)默認(rèn)樣式，在Bootstrap框架中是通過給元素添加“glyphicon”類名來實(shí)現(xiàn)，然后通過偽元素“:before”的“content”屬性調(diào)取對(duì)應(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)如圖所示：

感謝各位的閱讀，以上就是“bootstrap中有icon圖標(biāo)嗎”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)bootstrap中有icon圖標(biāo)嗎這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！