本篇主要介紹一種非常好用的圖示大法－圖示字體（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";
}效果圖為：
Document
總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多相關教學請訪問 CSS基礎影片教學， CSS3影片教學
！ ###以上是CSS什麼是圖示字體（IconFont）？有什麼用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
