關於阿里巴巴iconfont的使用方法

iconfont網址：http://www.iconfont.cn/

提及iconfont，作前端開發的應該知道它的好處，圖標庫之豐富，只有你想不到的，沒有你找不到的，並且輕量高清。用戶在iconfont.cn能夠下載，多種格式的icon，平臺也可將圖標轉換爲字體，便於前端工程師自由調整與調用。

下面給你們介紹一下具體使用步驟：

1.使用新浪微博或者github帳號登陸一下。

2.找到圖標管理->個人項目->而後新建項目:

3.查找你須要的icon,這裏有兩種方式：一是直接輸入關鍵詞搜索，二是經過頁面上方的圖標庫進行查找。

4.找到心儀的圖標後加入購物車，每次可添加多個。鼠標懸停在圖標上就會有三個選項：添加入庫、收藏、下載。咱們能夠直接選擇添加入庫，而後如上圖一個相似購物車的小圖標上會顯示咱們添加的圖標個數。

 

被加入庫的圖片會如圖顯示，而後咱們點擊下載至本地按鈕，選擇路徑會有一個壓縮包被下載，解壓後長這樣：

把它們放在同一個文件夾裏。

5.在頁面中引入圖標（如下圖的目錄爲準）：

個人fonts文件夾就是剛纔解壓以後的全部文件，demo1.html是引入iconfont的小例，具體代碼以下：

須要注意的地方只有三個，一是引入iconfont.css，二是建立一個span或者i標籤並給一個iconfont的類名，三是找到圖標對應的unicode寫在標籤中，就是以&符號開頭的那個。

而後這個圖標就能在頁面高清顯示了，通常咱們都用font-size來控制它的大小。

最後給你們安利一下如何改變圖標顏色，回到圖二咱們下載的那些圖標，鼠標懸停在想改變顏色的那個，選擇下載而後咱們就能選擇或輸入十六進制色碼改變顏色了，而後保存成本身想要的圖片格式。

但願這篇文章能幫助你們，一塊兒加油！

http://www.iconfont.cn/