在自己寫項目的時候經常會涉及到頁面的布局，還有圖標字體的使用。當時發現了iconfont這個神奇，所以寫一篇這個博文推薦給大家。
iconfont官網傳送門：http://www.iconfont.cn/
下面進入正題：
第1步 進入百度，輸入 iconfont.然后點進去。首頁就會有好多圖標
類似這樣的。當然了也可以點擊左上角的圖標庫，進入圖標庫里面進行選擇。
第2步：
我選擇了圖標庫中的一個分組（大麥官方圖標庫）。然后點進去就是這樣的：
然后 就可以選擇自己想要的圖標了。加入 我想要 關閉，播放，收藏 三個圖標。然后把鼠標移動上去 就發現會出來一個遮罩層。下面這樣：
然后選擇 這個點擊這個購物車，點完以后發現圖標周圍有一個虛線框。說明選擇成功。然后繼續選擇就可以了。（如果這個分組沒有想要的，跳到別的分組以后，選中的圖標並不會清空。放心大膽的去操作就好了）
第3步：
選擇完圖標以后，看頁面的右上角會發現有一個購物車的標記。
然后點一下。發現彈出一個這樣的操作界面:
這里我們選擇 添加至項目 （這個相當於為你寫的項目，創建一個圖標項目。你寫的項目中用到的所有圖標都會在這個圖標項目中能找到）。
然后彈出：
這個地方，因為我之前有兩個項目分別是（test 和 we-chat） 所以在這里顯示出來了。如果你之前沒創建過項目，那么直接點擊右上角的那個 文件夾圖標。新創建一個項目。項目名稱隨便寫。建議最好能和你的項目匹配起來，這樣過了一段時間以后再來看這些圖標項目，一眼就能想起來 哦，這個項目是我之前寫的某個項目的圖標庫。就會很方便。
輸入完項目名稱以后。點擊確認，會自動進入到這個界面：
其他的部分 我們過會 回過頭來看。我們先本着實現我們想要的效果來。接下來，我們點擊下載至本地。然后將所得壓縮包解壓 得到一個文件夾。
文件夾中的文件 我們選取：iconfont.css文件 和 iconfont.ttf 以及 iconfont.woff這三個文件。別的暫時先不用管。將這三個文件 放到自定義文件夾iconfont中（文件夾名字隨意取，也可以放到別處。到這里，這個文件已經就是靜態資源了，相當於一張圖片或者一個css文件）。
然后打開要引入資源的項目（我的就是這個index.html）然后引入 iconfont.css
這樣 我們就算是引入完成了。接下來就是應用了。以下我寫了一個 span標記。
這個地方一定要記住： class一定要有一個iconfont類。 后面icon-bofang就是你要應用的那個圖標名稱。
圖標名稱就在incofont.css里面寫着。
圖標名稱也是可以改的。但是如果要改，一定要在網站上的圖標項目庫中也該掉，防止下次下載該項目圖標的時候因為名稱不一致，導致圖標顯示不出來
言歸正傳：這個時候，打開網頁，就會發現圖標已經顯示出來了。但是好像有點不符合自己想要的要求。那么我們可以給這個span標記 再增加一個class 通過設置font-size 和color這兩個屬性，對圖標的大小和顏色進行設置。
當然了，一個個設置的話，未免有點傻。我們可以通過對，iconfont.css文件中的 incofont類進行全局設置。這樣就能保證我們整個項目圖標顏色和大小的統一。從而更加美觀。