前言
對于前端開發(fā)者來說镇饮，學習圖標字體的制作的非常有必要的籽前。
敲黑板：推薦使用第二種方式（使用 Iconfont 制作字體圖標）
使用圖標字體的優(yōu)點
- 減少圖片的請求诱鞠，加快網(wǎng)頁訪問速度
- 頁面放大時闹瞧，字體圖片不失真
- 可隨意修改顏色及大小
- 加快開發(fā)速度
制作圖標字體
一欺劳、使用 IcoMoon 制作字體圖標
在講字體圖標制作之前先來講講自定義圖標吧唧取！
1.自定義圖標
- 訪問 IcoMoon，可以看到里面有很多現(xiàn)成的圖標划提。
-
如果你需要的圖標這里都有枫弟，可以選擇你所需要的圖標，然后點擊Generate Font鹏往，如圖：
自定義圖標.png - 這時候會下載一個字體圖標文件淡诗，這個文件的具體使用方法看下文---字體圖標的使用议泵。
2.制作字體圖標
-
要制作字體圖標，首先你得有svg格式的圖標平痰。（svg圖片可使用AI制作）
down.svg -
點擊IcoMoon頁面中的Import Icons 按鈕導入你的svg圖標（導入結(jié)果如下圖）
Import Icons -
選擇你所需要的字體圖標 點擊Generate Font
操作步驟 -
點擊Generate Font按鈕之后會出現(xiàn)另外一個界面藕坯，此界面可以修改你的圖標的名稱，編碼群凶，以及查看對應(yīng)的代碼書寫方法插爹。
最后點擊download下載字體圖標文件（建議一開始的svg圖片就修改好名稱）
image.png
二、字體圖標的使用
下載之后的文件夾包含demo-files请梢，fonts赠尾，demo.html，Read Me.txt毅弧，selection.json气嫁，style.css
其中fonts，demo.html够坐，style.css是我們需要用到的文件
- 將fonts文件夾添加到我們的項目中寸宵。（如果項目中已經(jīng)有fonts則把fonts文件夾中的文件拷貝到fonts里面）
- 將style.css文件添加到項目中，并在對應(yīng)的html文件中引入style.css元咙。
-
demo.html可查看字體圖標對應(yīng)的class名稱（相當于一個圖標查看文檔邓馒，非常方便快捷）
icon name - 在使用圖標時，只需在html語句中添加對應(yīng)的class name即可
<span class="icon-down"></span>
注意：如果你的fonts文件夾的名稱不為fonts的話蛾坯，你需修改style.css中@font-face中的文件路徑光酣。
另外，字體圖標也可以使用Studio制作脉课，這種方法相對來說比較麻煩救军，這里就不過多介紹，有興趣的小伙伴可以去了解一下倘零。
----------------------------------添加于2017.9.14-------------------------------------
使用 Iconfont 制作字體圖標（推薦）
優(yōu)勢：
- Iconfont更加有利于團隊開發(fā)唱遭。
- 并且對于字體圖標后期的添加，修改等也更加的方便呈驶。
- 支持多色圖標（symbol方式）
Iconfont的具體使用方法官網(wǎng)中給出了詳細的流程拷泽，動態(tài)圖等。
此處便不多做介紹~~~
By : Yimi-shan
