詳解使用icomoon生成字體圖標的方法並應用

最近項目大量用到字體圖標，你們也知道，字體圖標任意縮放不會失真，也大大減小請求數量，很是好用。如下將講解本人如何根據美工提供的.svg文件生成字體圖標並應用。

藉助一個在線生成工具：https://icomoon.io/app/#/select

一、進入網址：主頁面

二、新建一個圖集

三、添加.svg圖片（能夠使用現成的，也能夠使用自定義的）

使用現成的點擊頁面紅色的Add Icons...

使用自定義的直接拖拽進圖集便可添加

四、生成字體文件

（1）選擇好要生成的圖標（自由選擇）

（2）點擊底部的："Generate Font F"

能夠自由命名

五、修改完成後，點擊生成Font

下載到壓縮文件：

運用：將fonts文件夾所有內容和style.css文件放到相應的項目中。

根據css文件下面生成的class類的名稱添加到html對應的節點上便可添加字體。

固然添加字體還須要設置font-size，也能夠根據實際狀況設置color改變其顏色。

相應實例下載地址：http://download.csdn.net/detail/u013938465/9434357