我們在開發(fā)一個(gè)網(wǎng)頁時(shí),會(huì)經(jīng)常使用到一些圖標(biāo)來增強(qiáng)頁面美觀。如果是自己重新設(shè)計(jì)圖標(biāo)的話費(fèi)時(shí)又費(fèi)力,直接使用 bootstrap 框架內(nèi)的圖標(biāo)會(huì)方便很多。那么你知道 bootstrap 圖標(biāo)是什么?常用圖標(biāo)有哪些?
bootstrap圖標(biāo)是什么?
bootstrap 框架中的圖標(biāo)是字體圖標(biāo),需要通過?@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
?進(jìn)行樣式的設(shè)置。在 bootstrap 中給元素添加?glyphicon
?類名,然后通過偽元素?:before
?的?content
?屬性調(diào)取相應(yīng)的 icon 編碼。
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
}
常用圖標(biāo)有哪些?
bootstrap 的字體圖標(biāo)高達(dá)兩百多種,各自對(duì)應(yīng)相應(yīng)的編碼。如下圖:
具體圖標(biāo)使用方法在往期文章《如何使用bootstrap圖標(biāo)》一文中有進(jìn)行詳細(xì)解說,請(qǐng)同學(xué)們自行回顧。
以上就是文章“bootstrap 圖標(biāo)是什么?常用圖標(biāo)有哪些?”的全部內(nèi)容。更多 bootstrap 的學(xué)習(xí)請(qǐng)關(guān)注 w3cschool 官網(wǎng)。
推薦課程:bootstrap3入門課程