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


 

只需在網址: 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

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM