小編給大家分享一下Bootstrap中Glyphicons圖標(biāo)怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出運(yùn)河免費(fèi)做網(wǎng)站回饋大家。

可用的圖標(biāo)

Bootstrap3 提供了差不多300多個(gè)來自 Glyphicon Halflings 的字體圖標(biāo)，這些圖標(biāo)可用于按鈕、鏈接、導(dǎo)航和表單等元素。最常見的的圖標(biāo)如圖 3?1所示：

圖3-1 Glyphicons提供的圖標(biāo)

Glyphicons Halflings 一般是收費(fèi)的，但是他們的作者允許 Bootstrap 免費(fèi)使用。為表謝意，希望你在使用時(shí)，盡量為Glyphicons添加一個(gè)友情鏈接。

如何使用

字體圖標(biāo)的用法非常簡(jiǎn)單，在任何行內(nèi)級(jí)元素上應(yīng)用圖標(biāo)類即可。但是，由于圖標(biāo)類不能和其它組件直接聯(lián)合使用，通常需要單獨(dú)創(chuàng)建一個(gè)行內(nèi)級(jí)元素來放置圖標(biāo)。

出于性能的考慮，所有圖標(biāo)都需要一個(gè)基類 .glyphicon和對(duì)應(yīng)每個(gè)圖標(biāo)的 .glyphicon-* 類。為了避免屏幕識(shí)讀設(shè)備抓取可能產(chǎn)生混淆的輸出內(nèi)容，建議為圖標(biāo)設(shè)置aria-hidden="true"屬性。如，以下是添加搜索圖標(biāo)的代碼：

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Bootstrap 假定所有的圖標(biāo)字體文件全部位于../fonts/目錄內(nèi)（相對(duì)于預(yù)編譯版 CSS 文件的目錄）。如果你修改了圖標(biāo)字體文件的位置，你需要根據(jù)自身情況，選擇以下任何一種方式來更新 CSS 文件：

• 在 Less 源碼文件中修改@icon-font-path和/或@icon-font-name變量。

• 利用 Less 編譯器提供的相對(duì) URL 地址選項(xiàng)。

• 修改預(yù)編譯 CSS 文件中的url()地址。

使用實(shí)例

在需要的任何地方，比如按鈕組、按鈕、導(dǎo)航、表單輸入框、警告框等組件中，你都可以使用這些圖標(biāo)來設(shè)計(jì)出漂亮的界面。如，在按鈕組和按鈕中：

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

效果如圖 3?2所示：

圖3-2 按鈕組中使用字體圖標(biāo)

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>
  Enter a valid email address
</div>

效果如圖 3?3所示：

圖3-3 警告框中使用圖標(biāo)

定制圖標(biāo)

字體圖標(biāo)一個(gè)非常方便的地方，在于可以通過CSS來定制圖標(biāo)的外觀?？梢院敛豢鋸埖恼f，只要CSS支持，無論顏色、大小、陰影或者其它任何效果，都可以在字體圖標(biāo)中輕易展現(xiàn)出來。假設(shè)在一個(gè)按鈕上使用字體圖標(biāo)：

<button type="button" class="btn btn-primary">
  <span class="glyphicon glyphicon-user"></span> User
</button>

效果如圖 3?4所示：

圖3-4 字體圖標(biāo)

如果你希望圖標(biāo)稍大一點(diǎn)，你可以為按鈕應(yīng)用 .btn-lg 類，或者通過CSS設(shè)置字體尺寸得到任意大小的圖標(biāo)。如：

<button type="button" class="btn btn-primary" style="font-size: 30px">
  <span class="glyphicon glyphicon-user"></span> User
</button>

效果如圖 3?5所示：

圖3-5 字體圖標(biāo)尺寸

同樣的方法，你也可以通過設(shè)置按鈕的文本顏色，來得到你想要的圖標(biāo)顏色。如：

<button type="button" class="btn btn-primary" style="font-size: 30px; color: #f60">
  <span class="glyphicon glyphicon-user"></span> User
</button>

效果如圖 3?6所示：

圖3-6 字體圖標(biāo)顏色

甚至，你也可以為圖標(biāo)添加文本陰影。如：

<button type="button" class="btn btn-primary" style="font-size: 30px; text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button>

效果如圖 3?7所示：

圖3-7 字體圖標(biāo)陰影

以上是“Bootstrap中Glyphicons圖標(biāo)怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前題目：Bootstrap中Glyphicons圖標(biāo)怎么用
本文URL：http://jinyejixie.com/article44/gpepee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、建站公司、網(wǎng)頁設(shè)計(jì)公司、企業(yè)網(wǎng)站制作、、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)