軟件介紹

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

功能介紹

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

軟件特點

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

使用方法

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

使用教程

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

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

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

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

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

第三步：挑選相應(yīng)圖標(biāo)并獲取字體編碼，應(yīng)用于頁面

【font-class引用】
font-class是unicode使用方式的一種變種，主要是解決unicode書寫不直觀，語意不明確的問題。
與unicode使用方式相比，具有如下特點：
兼容性良好，支持ie8+，及所有現(xiàn)代瀏覽器。
相比于unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什么。
因為使用class來定義圖標(biāo)，所以當(dāng)要替換圖標(biāo)時，只需要修改class里面的unicode引用。
不過因為本質(zhì)上還是使用的字體，所以多色圖標(biāo)還是不支持的。
使用步驟如下：
第一步：拷貝項目下面生成的fontclass代碼：

第二步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁面：

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

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

第三步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁面：

常見問題解決辦法

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