只需在網址: https://icomoon.io/app/ 上選擇相應圖標點擊font設置,然后點擊下載。將下載文件解壓,然后將font文件夾和style.css拷貝到項目中,引用css即可,作為以后參考
最近項目大量用到字體圖標,大家也知道,字體圖標任意縮放不會失真,也大大減少請求數量,非常好用。以下將講解本人如何根據美工提供的.svg文件生成字體圖標並應用。
借助一個在線生成工具:https://icomoon.io/app/#/select
1、進入網址:主頁面
2、新建一個圖集
3、添加.svg圖片(可以使用現成的,也可以使用自定義的)
使用現成的點擊頁面紅色的Add Icons...
使用自定義的直接拖拽進圖集即可添加
4、生成字體文件
(1)選擇好要生成的圖標(自由選擇)
(2)點擊底部的:"Generate Font F"
可以自由命名
5、修改完成后,點擊生成Font
下載到壓縮文件:
運用:將fonts文件夾全部內容和style.css文件放到相應的項目中。
根據css文件下面生成的class類的名稱添加到html對應的節點上即可添加字體。
當然添加字體還需要設置font-size,也可以根據實際情況設置color改變其顏色。
原文鏈接:http://blog.csdn.net/u013938465/article/details/50680468