icomoon:生成字體圖標的方法並應用


字體圖標任意縮放不會失真,也大大減少請求數量,非常好用。

在線生成工具:https://icomoon.io/app/#/select

在線SVG圖庫(阿里),  用於導入:http://www.iconfont.cn/search/index?q=%E9%92%B1&page=1    

 

1、進入網址:主頁面

 

 

2、新建一個圖集

 

 

3、添加.svg圖片(可以使用現成的,也可以使用自定義的)

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

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

 

 

 

4、生成字體文件

(1)切換工具欄 “選擇” 標簽(見下圖),選擇好要生成的圖標(自由選擇)

(2)點擊底部的:"Generate Font F"

 

可以自由命名 具體圖標的樣式名:

 

 

5、修改完成后,點擊生成Font

 

 

下載壓縮文件,解壓:

 

 

 

運用:將fonts文件夾全部內容和style.css文件放到相應的項目中。

 

 

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

 

當然添加字體還需要設置font-size,也可以根據實際情況設置color改變其顏色。

 

 


免責聲明!

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



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