CSS 小結筆記之圖標字體（IconFont）
本篇主要介紹一種非常好用的圖標大法——圖標字體（IconFont）。
什麽是圖標字體？顧名思義，它是一種字體，只不過這個字體顯示的並不是具體的文字之類的，而是各種圖標。
網站上經常會用到各種圖標，之前網頁上使用圖標主要采用精靈圖（背景位置+背景縮放）來實現，但是這樣使用起來有許多不便之處，一方面縮放處理起來比較麻煩，一方面如果要改動一些圖標就需要去找到設計人員重新設計，然後重新添加，這個過程非常不友好。
圖標字體可以非常便捷的去解決以上問題，使用起來也非常簡單。因為他是字體，所以可以當成字體來引用，只需要給出對應的字符而不需要通過測量背景圖片位置那麽麻煩。並且改變圖標大小只需要改變字體大小就可以了。這裏有兩個網站推薦：（1）、阿裏巴巴矢量圖標庫http://iconfont.cn/ （2）IcoMoon https://icomoon.io/
下面給出IcoMoon 具體使用方法
1、打開IcoMoon 網站，點擊IconMoon App。
2、打開後是具體圖標的界面，可以自己添加自己的圖標進行生成，也可以選用他給出的圖標，在默認圖標的下方 會有add Icons From Library 點擊後可以看到更多的圖標供選擇（有免費的有付費的）。
3、點擊Generate Font後會生成 當前選擇的圖標的界面，右下角的Generate Font 也會變成 Download ，也可以進行相關的下載設置（例如：讓其支持ie6/7之類的）。
4、下載完成後 會有以下文件，這些文件都最好保存下來，不要隨意刪掉。
5、接下來給出圖標字體的具體使用方法（也可以自行看使用圖標字體的css文件——style.css的相關內容）
（1）、將字體文件夾復制到項目中並且聲明字體（此處代碼不需要記憶，因為基本上都一樣，直接復制即可）
@font-face { font-family: ‘icomoon‘;/*聲明字體名稱，可自行設置，應用的時候對應即可*/ src: url(‘fonts/icomoon.eot?lep7lm‘); src: url(‘fonts/icomoon.eot?lep7lm#iefix‘) format(‘embedded-opentype‘), url(‘fonts/icomoon.ttf?lep7lm‘) format(‘truetype‘), url(‘fonts/icomoon.woff?lep7lm‘) format(‘woff‘), url(‘fonts/icomoon.svg?lep7lm#icomoon‘) format(‘svg‘); font-weight: normal; font-style: normal; }
（2）、使用字體
.IconMoon { font-family: ‘icomoon‘; }
（3）、具體顯示對應圖標
a、直接使用（很方便，但是一般不要使用，因為光看小方塊分辨不出這些圖標有什麽區別）， 例如
<li><span class="iconhome">?</span></li> <li><span class="iconsmile">?</span></li> <li><span class="icontongue">?</span></li>
span標簽中間的小方塊不是真的方塊，而是對應Demo頁面中每個圖標下面對應右側的方塊。
b、使用css 偽元素選擇器before 來進行添加
<li><span class="icon-home">在這前面有一個home圖標</span></li> <li><span class="icon-smile2">在這前面有一個smile2圖標</span></li> <li><span class="icon-tongue2">在這前面有一個tongue2圖標</span></li> <li><span class="icon-sad2">在這前面有一個sad2圖標</span></li> <li><span class="icon-wink">在這前面有一個wink圖標</span></li>
對應的css代碼為
.icon-home:before {/*content的值是對應的圖標代碼*/ content: "\e900"; } .icon-smile2:before { content: "\e9e2"; } .icon-tongue2:before { content: "\e9e4"; } .icon-sad2:before { content: "\e9e6"; } .icon-wink:before { content: "\e9e7"; }
效果圖為
（4）、正如之前所說，這些圖標本質上是字體，所以可以很方便的去改變顏色，大小，產生陰影效果等
具體的代碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> Ul { list-style: none; } @font-face { font-family: ‘icomoon‘; /*聲明字體名稱，可自行設置，應用的時候標出即可*/ src: url(‘fonts/icomoon.eot?lep7lm‘); src: url(‘fonts/icomoon.eot?lep7lm#iefix‘) format(‘embedded-opentype‘), url(‘fonts/icomoon.ttf?lep7lm‘) format(‘truetype‘), url(‘fonts/icomoon.woff?lep7lm‘) format(‘woff‘), url(‘fonts/icomoon.svg?lep7lm#icomoon‘) format(‘svg‘); font-weight: normal; font-style: normal; } .IconMoon { font-family: ‘icomoon‘; } .icon-home:before { /*content的值是對應的圖標代碼*/ content: "\e900"; color: aqua; font-size: 20px; } .icon-smile2:before { color: deeppink; font-size: 40px; content: "\e9e2"; } .icon-tongue2:before { color: orange; font-size: 10px; content: "\e9e4"; } .icon-sad2:before { content: "\e9e6"; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); color: blue; font-size: 40px; } .icon-wink:before { content: "\e9e7"; text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4); color: blue; font-size: 40px; } </style> </head> <body> <div class="IconMoon"> <ul> <li><span class="icon-home">在這前面有一個home圖標</span></li> <li><span class="icon-smile2">在這前面有一個smile2圖標</span></li> <li><span class="icon-tongue2">在這前面有一個tongue2圖標</span></li> <li><span class="icon-sad2">在這前面有一個sad2圖標</span></li> <li><span class="icon-wink">在這前面有一個wink圖標</span></li> </ul> </div> </body> </html>View Code
6、當我們想要給字體添加新的圖標或者減去一些圖標時，只需再次打開網站，進入到IconMoon App 頁面，然後點擊 Import Icons 將之前我們下載的字體文件目錄下的selection.json 文件，就可以在我們之前選中的基礎上再次進行操作了，用起來非常的方便。
CSS 小結筆記之圖標字體（IconFont）