軟件介紹

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

功能介紹

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

軟件特點(diǎn)

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

使用方法

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

使用教程

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

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

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

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

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

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

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

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

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

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

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

常見問題解決辦法

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