前端自定義圖標


為什么要自定義圖標?

   現在大家見過的有:如字體圖標、CSS Sprites、svg,都是圖片的其他優化技巧。

          合成雪碧圖CSS Sprites是歷史最悠久最成熟的解決方案,把不同的png小圖標拼接成一張png圖片。但問題是圖片不可以自適應不同dpr的屏幕。

   前端工程師如何自定義圖標,找自己覺得合適的圖標然后用代碼實現。

第一步:將要生成的圖標做成svg格式

    目前有不少制作字體圖標的網站,比較火的有icomoon阿里巴巴圖標庫 http://www.iconfont.cn/help/platform.html  等

  

第二步:進入https://icomoon.io/app/#/select

   單擊importicons 按鈕導入我們准備好的svg圖標集,或者Add icons From Library 引用這個網站上的一些現成圖標

  選擇要生成的圖標,或者通過其他菜單選擇,全選selectall

  

  點擊右下角的generte font f 進入屬性設置頁面

  可以進入字體屬性設置

  

  然后下載字體文件及demo

  

  

 

  style.css及fonts文件是字體我們所需要的文件。然后用css引用就可以用了,。

 

 

 

 

    

    

       

 


免責聲明!

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



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