為什么要自定義圖標?
現在大家見過的有:如字體圖標、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引用就可以用了,。