還在為小圖標不能適應各種設備發愁嗎?iconfont為你解決所有問題

已邀請:

柳岩

贊同來自:


我看到我們網站的圖標還用的圖標來做的時候,我感嘆瞭下,失真嚴重啊,gif動畫圖標鋸齒那個嚴重啊,看不下去瞭,我給大傢分享下我已經用瞭很久的一種技巧,現在移動設備,微信公眾號,包括很多網站都已經用上瞭字體圖標的方式來顯示小圖標瞭(iconfont),和文字一樣,不會有失真,而且配合css3的動畫基本能替代很多的gif動畫。還有個好處就是字體文件比圖片小很多,還提供不同的很多字體格式,隻要不是太落後的瀏覽器都沒問題


  


下面給大傢介紹下怎麼制作圖標字體,阿裡旗下的這個網站有非常豐富的圖標資源:http://www.iconfont.cn


1、從http://www.iconfont.cn 找到你想要的圖標,以svg格式下載到本地,想要多少下載多少


2、https://icomoon.io/app/#/select 打開這個網站我們就可以制作自己的圖標字體瞭,點擊import

icons 按鈕,把下載的svg格式圖標導入進來,然後你就能在線看到你導入的圖標,賓且可以進行在線編輯,編輯功能非常強大,完全夠用




3、導入編輯好後,選中你想要的圖標,點擊右下角的生成字體按鈕,會自動生成好字體,下載後,壓縮包裡包含瞭css樣式,直接用就是瞭,非常方便



要回復問題請先登錄註冊