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

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到科爾沁左翼網(wǎng)站設(shè)計(jì)與科爾沁左翼網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類(lèi)型包括：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋科爾沁左翼地區(qū)。

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

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

bootstrap中有icon圖標(biāo)

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

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

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

Bootstrap框架中的圖標(biāo)都是字體圖標(biāo)，其實(shí)現(xiàn)原理就是通過(guò)@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框架中是通過(guò)給元素添加“glyphicon”類(lèi)名來(lái)實(shí)現(xiàn)，然后通過(guò)偽元素“: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)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)bootstrap中有icon圖標(biāo)嗎這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！