[笔记]图标规范以及字体图标的使用

指导团队小伙伴的时候会发现他们对规范没什么概念，但是在实际工作中，我们的项目有很多的复用性，特别是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名称保持一致，而且尽量不要去修改这个名称，方便前端直接在蓝湖复制引用该图标