iconfont 阿里巴巴矢量圖標庫 綠色免費版

軟件介紹

iconfont阿里巴巴矢量圖標庫是一款專業的矢量圖標管理、交流平臺，用戶不僅可以將自己設計的精美圖標上傳到iconfont平臺，也可以在這里自由的下載各種格式的圖標文件，另外iconfont還能夠將圖標文件輕松轉化為字體，方便前端工程師進行調整和調用。

功能介紹

【搜索】
在阿里巴巴矢量圖標庫中，你只需輸入關鍵詞即可在龐大的庫中進行模糊搜索，支持搜索圖標及用戶名稱，支持中英文語言輸入。
【下載詳情頁】
圖標下載內容中可以直接查看歸屬圖標庫和作業信息，多色圖標支持改色和分路徑保存。
【購物車】
只需將目標圖標放入購物車即可實現批量下載，支持批量下載素材和代碼，另外還可以批量添加至項目。
【上傳】
用戶可以自由的上傳圖標文件，支持單個或者批量上傳圖標，支持單色和多色同時上傳，另外還支持圖標自定義配置標簽
【圖標庫】
系列相關圖標的集合，由圖標上傳者創建，需通過審核才可公開/加密訪問圖標庫分為官方圖標庫/自定義圖標庫/多色圖標庫
【項目管理】
“項目”是幫助團隊協同合作的共享模塊，創建項目后，視覺同學上傳icon，交互/產品同學可以?自由下載圖標，前端同學可以將圖標以字體格式添加至代碼，支持三種格式代碼使用。
【打賞】
對于你喜歡的原創圖標，你可以為了尊重設計者的勞動成果進行打賞，打賞金額由自己決定。

軟件特點

1、豐富的圖標素材庫，總數量超過百萬，輕松選擇下載。
2、每一個圖標都是經過設計師精心設計制作
3、全部圖標均可免費下載，不收取任何費用
4、支持DIY在線編輯，能夠對圖標的大小和顏色等等參數進行修改
5、登錄賬號即可收藏、上傳、下載圖標
6、圖標分類明確，可以按照不同的類型進行搜索

使用方法

1、首先下載安裝好阿里巴巴矢量圖標庫之后運行軟件，你可以看到豐富的圖標，然后點擊界面上的搜索功能（Search icons）查看自己的圖標
2、點擊左側的分類可以顯示分類中的具體圖標，用戶可以根據自己想要的內容進行選擇
3、點擊左側的New可以看到每天更新的圖標
4、找到您要的圖標后，您可以右鍵點擊，在彈出的選擇中您可以點擊setting設置軟件，FQA查看問題描述您可以自行選擇。
7、點擊【color】，您可以看到右側帶有色彩的圖標。
8、在找到目標圖標后，你可以拖動到Photoshop中就可以對圖標進行編輯。

使用教程

【iconfont圖標繪制教程】
1. 下載原文件 圖標制作模板.AI
圖標在繪制時均以標準圖標大小1024x1024px繪制，因為在制作成字體時文件需要 設置較高的清晰度，所以圖標路徑也需要等比例放大。
2. 設置圖標大小
設計師可以直接將畫好的圖標路徑復制到模版里，根據模板的輔助線，對圖標 進行位置的調節，居中，四周等距，保證圖標的統一。
3. 另存為svg格式

4. 上傳圖標
將SVG文件拖拽至此，或點擊上傳
5. 命名圖標及定義圖標標簽，完成上傳

【iconfont web前端應用教程】
用戶在iconfont.cn可以下載，多種格式的icon，平臺也可將圖標轉換為字體，便于前端工程師自由調整與調用。
【icon單個使用】
單個圖標用戶可以自行選擇下載不同的格式使用，包括png,ai,svg。
點擊下載按鈕，可以選擇下載圖標。

此種方式適合用在圖標引用特別少，以后也不需要特別維護的場景。
比如設計師用來做demo原型。
前端臨時做個活動頁。
當然如果你只是為了下載圖標做PPT,也是極好的。
不過如果是成體系的應用使用，建議用戶把icon加入項目，然后使用下面三種推薦的方式。
【unicode引用】
unicode是字體在網頁端最原始的應用方式，特點是：
兼容性最好，支持ie6+，及所有現代瀏覽器。
支持按字體的方式去動態調整圖標大小，顏色等等。
但是因為是字體，所以不支持多色。只能使用平臺里單色的圖標，就算項目里有多色圖標也會自動去色。
第一步：拷貝項目下面生成的font-face

第二步：定義使用iconfont的樣式

第三步：挑選相應圖標并獲取字體編碼，應用于頁面

【font-class引用】
font-class是unicode使用方式的一種變種，主要是解決unicode書寫不直觀，語意不明確的問題。
與unicode使用方式相比，具有如下特點：
兼容性良好，支持ie8+，及所有現代瀏覽器。
相比于unicode語意明確，書寫更直觀?？梢院苋菀追直孢@個icon是什么。
因為使用class來定義圖標，所以當要替換圖標時，只需要修改class里面的unicode引用。
不過因為本質上還是使用的字體，所以多色圖標還是不支持的。
使用步驟如下：
第一步：拷貝項目下面生成的fontclass代碼：

第二步：挑選相應圖標并獲取類名，應用于頁面：

【symbol引用】
這是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了一個svg的集合，與上面兩種相比具有如下特點：
支持多色圖標了，不再受單色限制。
通過一些技巧，支持像字體那樣，通過font-size,color來調整樣式。
兼容性較差，支持 ie9+,及現代瀏覽器。
瀏覽器渲染svg的性能一般，還不如png。
使用步驟如下：
第一步：拷貝項目下面生成的symbol代碼：

第二步：加入通用css代碼（引入一次就行）：

第三步：挑選相應圖標并獲取類名，應用于頁面：

常見問題解決辦法

為什么下載字體，更新cdn都會提示error ？
iconfont平臺也是依賴的第三方的c庫fontforge來生成字體的，如果unicode不符合規范，或者圖標本身的路徑有問題，它會報錯的。
遇到這種問題，可以直接把一半圖標添加到一個新項目看看是不是有問題，一半一半的試，就可以排查出這個問題圖標了。
為什么下載字體后，發現所有圖標偏上了 ？
這種情況一半都是其中某些圖標有問題，他們的圖形可能超出了舞臺，也可能是設計師粗心，在舞臺外面有個點或者啥的。
總之這個圖標會把整個字體撐開，我們需要參考上面的用二分法排除這個圖標。刪除重新生成字體即可。
審核一般要多久，有什么注意事項沒？
審核一般1-2個工作日(不過如果審核同學忙暴斃，望諒解...)
審核不通過的原因可能是：
單色圖標與多色圖標混合在一個圖標庫內
沒有符合繪制規則
圖標質量實在辣眼睛
抄襲Iconfont線上已有多色圖標
大家在對圖標庫和圖標命名的時候，盡量如實描述，不要出現只有自己才能懂的火星文，考慮到圖標庫的公開屬性，通用易懂比較綠色健康無公害
微博登錄有問題？
微博登陸的問題，我們也很無奈，不是太穩定，也沒有啥反饋的渠道，建議大家可以先使用github登陸，后續我們會嘗試接入qq，微信啥的，或者自建賬戶體系。