怎么應(yīng)用Font字體小圖標(biāo)

怎么應(yīng)用Font字體小圖標(biāo)，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

我們知道在頁(yè)面上載入小圖標(biāo)有多種方式，比如我們使用比較多的是css sprite背景圖片定位，就是將很多小圖標(biāo)集成到一張大圖，然后使用CSS定位背景。還有一種比較現(xiàn)代的方式是使用font字體圖標(biāo)，它利用@font-face原理載入圖標(biāo)字體庫(kù)，然后調(diào)用圖標(biāo)。

使用css sprite方式非常方便，可以有很多色彩繽紛的圖標(biāo)，而且兼容性好，但是缺點(diǎn)就是圖標(biāo)不能縮放，或者說(shuō)縮放了會(huì)失真，另外維護(hù)也不方便，修改一個(gè)圖標(biāo)要對(duì)整張大圖就行修改，并且定位像素需要借助PS等工具確定位置。而使用圖標(biāo)字體庫(kù)越來(lái)越受開(kāi)發(fā)者青睞，它的維護(hù)簡(jiǎn)單，而且對(duì)圖標(biāo)縮放自由，隨時(shí)都可以展示高清的圖標(biāo)，可以添加陰影效果和動(dòng)畫效果，設(shè)置也非常方便，唯一差點(diǎn)的就是圖標(biāo)顏色比較單一，就是設(shè)置的時(shí)候只能設(shè)置一個(gè)圖標(biāo)為單一顏色。下面我們來(lái)看下如何使用font字體小圖標(biāo)。

HTML

目前市面上有很多字體圖標(biāo)庫(kù)，有收費(fèi)的也有免費(fèi)使用的。常見(jiàn)的有icomoon，F(xiàn)ont-Awesome 以及 Glyphicon Halflings，Glyphicon在bootstrap下使用時(shí)免費(fèi)的。當(dāng)然國(guó)內(nèi)阿里系也開(kāi)放了自己的圖標(biāo)庫(kù)。

本文講解下使用icomoon字體庫(kù)，我們可以在官網(wǎng)上選擇喜歡的字體圖標(biāo)然后下載并部署到項(xiàng)目中，當(dāng)然也可以自己制作圖標(biāo)然后上傳到官網(wǎng)上。下載好的字體庫(kù)，在一個(gè)fonts/的文件夾里。我們先布置好html結(jié)構(gòu)：

<ul class="icons"> <li class="sp"><i class="icon-spades spades"></i> 黑桃K</li> <li class="red"><i class="icon-file-picture"></i> 照片</li> <li><i class="icon-tablet"></i> iPad</li> <li><a href="#"><i class="icon-bubbles"></i> 評(píng)論</a></li> </ul>

我們?cè)谏厦娴膆tml代碼中，給元素li里添加了<i>，然后加上class屬性，class值就對(duì)應(yīng)了css文件里的字體圖標(biāo)樣式了。

CSS

首先我們使用@font-face命名字體名稱，以及加載的字體文件，需要加載多個(gè)字體文件以兼容各瀏覽器和系統(tǒng)。然后定義class含有icon的樣式，注意其中使用了抗鋸齒處理，就是圖片放大的時(shí)候不會(huì)出現(xiàn)邊緣鋸齒現(xiàn)象，然后使用偽類，設(shè)置content即圖標(biāo)內(nèi)容。

@font-face {    font-family: 'icomoon';    src:    url('../fonts/icomoon.eot?42vx6u'); /* IE9 兼容模式 */    src:    url('../fonts/icomoon.eot?42vx6u#iefix') format('embedded-opentype'),        url('../fonts/icomoon.ttf?42vx6u') format('truetype'),        url('../fonts/icomoon.woff?42vx6u') format('woff'),        url('../fonts/icomoon.svg?42vx6u#icomoon') format('svg');    font-weight: normal;    font-style: normal; } [class^="icon-"], [class*=" icon-"] {    font-family: 'icomoon' !important;    speak: none;    font-style: normal;    font-weight: normal;    font-variant: normal;    text-transform: none;    line-height: 1;    /* 抗鋸齒處理 =========== */    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale; } .icon-spades:before {    content: "e900"; } .icon-file-picture:before {    content: "e901"; } .icon-tablet:before {    content: "e902"; } .icon-bubbles:before {    content: "e903"; }

然后，我們運(yùn)行下html頁(yè)面，是不是可以看到幾個(gè)圖標(biāo)了，方便實(shí)用吧。

如果想給圖標(biāo)定義動(dòng)畫效果，可以使用css來(lái)實(shí)現(xiàn)。

.spinner{ -webkit-animation: spinner 1s infinite linear; animation: spinner 1s infinite linear; } @-webkit-keyframes spinner{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(359deg); transform: rotate(359deg); } }

以上代碼定義了圖標(biāo)旋轉(zhuǎn)動(dòng)畫，我們可以結(jié)合js實(shí)現(xiàn)這樣的效果：當(dāng)鼠標(biāo)滑上圖標(biāo)時(shí)展示圖標(biāo)旋轉(zhuǎn)動(dòng)畫，當(dāng)鼠標(biāo)離開(kāi)時(shí)，停止旋轉(zhuǎn)動(dòng)畫。這個(gè)效果的代碼大家可以參照demo中的源碼。demo中我還加上了Font Awesome字體圖標(biāo)示例和Glyphicons字體圖標(biāo)示例，大家可以查看demo或下載源碼了解。

看完上述內(nèi)容，你們掌握怎么應(yīng)用Font字體小圖標(biāo)的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！