Bootstrap 组件:Glyphicons 字体图标
作者:WangMin
格言:努力做好自己喜歡的每一件事
CSDN原創(chuàng)文章
博客地址 👉 WangMin
所有可用的圖標(biāo)
包括250多個(gè)來自 Glyphicon Halflings 的字體圖標(biāo)。例如下圖的一些字體圖標(biāo),更多的字體圖標(biāo)請(qǐng)見boostrap官方文檔 。
如何使用字體圖標(biāo)
出于性能的考慮,所有圖標(biāo)都需要一個(gè)基類(glyphicon)和對(duì)應(yīng)每個(gè)圖標(biāo)的類。為了設(shè)置正確的內(nèi)補(bǔ)(padding),必須在圖標(biāo)和文本之間添加一個(gè)空格。
注意:
1 . 不要和其他組件混合使用
圖標(biāo)類不能和其它組件直接聯(lián)合使用。它們不能在同一個(gè)元素上與其他類共同存在。應(yīng)該單獨(dú)創(chuàng)建一個(gè)嵌套的<span>標(biāo)簽,并將圖標(biāo)類應(yīng)用到這個(gè)<span>標(biāo)簽上。
2 . 只對(duì)內(nèi)容為空的元素起作用
圖標(biāo)類只能應(yīng)用在不包含任何文本內(nèi)容或子元素的元素上。
3 . 圖標(biāo)的可訪問性
為了避免 屏幕識(shí)讀設(shè)備抓取非故意的和可能產(chǎn)生混淆的輸出內(nèi)容,特別是當(dāng)圖標(biāo)純粹作為裝飾用途時(shí),要給這些圖標(biāo)設(shè)置了aria-hidden="true"屬性;如果你使用圖標(biāo)是為了表達(dá)某些含義(不僅僅是為了裝飾用),請(qǐng)確保你所要表達(dá)的意思能夠通過被輔助設(shè)備識(shí)別,例如,包含額外的內(nèi)容并通過.sr-only類讓其在視覺上表現(xiàn)出隱藏的效果。使用方法如下:
實(shí)例
可以把它們應(yīng)用到按鈕、工具條中的按鈕組、導(dǎo)航或輸入框等地方。
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus" aria-hidden="hidden"></span> </button> <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-search" aria-hidden="hidden"></span> </button>alert 組件中所包含的圖標(biāo)是用來表示這是一條錯(cuò)誤消息的,通過添加額外的.sr-only文本就可以讓輔助設(shè)備知道這條提示所要表達(dá)的意思了。
<div class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span><span class="sr-only">Error:</span>錯(cuò)誤信息提示 </div>就先分享到這里!! 😄 后續(xù)繼續(xù)更新!!
總結(jié)
以上是生活随笔為你收集整理的Bootstrap 组件:Glyphicons 字体图标的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: IP定位
- 下一篇: 网络安全(一):信息收集之玩转nmap(