指導團隊小伙伴的時候會發現他們對規范沒什么概念，但是在實際工作中，我們的項目有很多的復用性，特別是B端后臺類的，所以普及各種規范就比較必要了。

以下是實際工作中我總結的有關圖標的規范，希望對大家也有幫助。

一、圖標命名規范

做什么：圖標的命名需要符合規范

為何：方便UED團隊協同使用圖標

何時：隨時

誰來做：所有UED同學

• 實心和描線圖標保持同名，用【-o】來區分，比如【question-circle】（實心） 和【question-circle-o】（描線）；

  • 有無-circle/-square區別于邊框和非邊框，有無-o區別于實心和空心

• 命名順序：【模塊】-【圖標名】-【形狀?】-【描線?】-【方向?】（? 為可選）。

  • 模塊，例如左側導航欄模塊的圖標比較特殊，圖標名前可加【sidebar】，常用模塊英文：頂部導航欄【navbar】，底部導航欄【tabbar】，自定義模塊命名根據實際需要選擇性添加
  • 圖標名，常用的圖標命名用習慣的英文單詞命名，非常用和自定義的圖標命名可用拼音，多參考其他網站的命名方式
  • 描線，只在區分同一個功能的圖標描線和非描線狀態下使用，如果圖標風格就是描線，不用每個圖標后面都加此后綴

• PC端圖標前綴【pc】，移動端圖標前綴【mb】

• Font Family：【公司名icon】，例如大院的項目名為【dyicon】

  
  
  
  

  特殊模塊的圖標前綴

二、制作字體庫

做什么：制作字體庫
為何：1. 方便UED團隊同步圖標；2. 避免重復造輪子；3. 方便前端使用字體
何時：隨時
誰來做：所有UED同學

三、icon添加到設計稿

做什么：將iconfont的字體同步到設計稿
為何：1. 使設計稿和上線的產品盡可能地保持一致；2. 避免重復造輪子；3. 更好地和開發協同，
何時：隨時
誰來做：所有UED同學

操作步驟：

1. 把字體文件下載到本地

   
   

2. 雙擊字體文件，安裝到本地

   
   

3. 復制icon字體

   
   

4. 將icon字體粘貼到sketch設計稿中

   
   

5. 修改圖層名稱為fontclass，圖標圖層名稱必須和fontclass名稱保持一致，而且盡量不要去修改這個名稱，方便前端直接在藍湖復制引用該圖標