怎么應用Font字體小圖標

怎么應用Font字體小圖標，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

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

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

HTML

目前市面上有很多字體圖標庫，有收費的也有免費使用的。常見的有icomoon，Font-Awesome 以及 Glyphicon Halflings，Glyphicon在bootstrap下使用時免費的。當然國內阿里系也開放了自己的圖標庫。

本文講解下使用icomoon字體庫，我們可以在官網上選擇喜歡的字體圖標然后下載并部署到項目中，當然也可以自己制作圖標然后上傳到官網上。下載好的字體庫，在一個fonts/的文件夾里。我們先布置好html結構：

<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> 評論</a></li> </ul>

我們在上面的html代碼中，給元素li里添加了<i>，然后加上class屬性，class值就對應了css文件里的字體圖標樣式了。

CSS

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

@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"; }

然后，我們運行下html頁面，是不是可以看到幾個圖標了，方便實用吧。

如果想給圖標定義動畫效果，可以使用css來實現。

.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); } }

以上代碼定義了圖標旋轉動畫，我們可以結合js實現這樣的效果：當鼠標滑上圖標時展示圖標旋轉動畫，當鼠標離開時，停止旋轉動畫。這個效果的代碼大家可以參照demo中的源碼。demo中我還加上了Font Awesome字體圖標示例和Glyphicons字體圖標示例，大家可以查看demo或下載源碼了解。

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