# 

- 
  arrow-down
  &#xe791;
- 
  pushpin
  &#xe842;
- 
  history
  &#xe792;
- 
  bug
  &#xe611;
- 
  bug
  &#xe63c;
- 
  arrow-up
  &#xe64e;
- 
  folder
  &#xe790;
- 
  pull-request
  &#xe8cd;
- 
  anchor
  &#xe632;
- 
  analyze-分析
  &#xe793;
- 
  run
  &#xe643;
- 
  Star
  &#xe641;
- 
  coding
  &#xe60c;
- 
  logout
  &#xe635;
- 
  safty
  &#xe617;
- 
  save
  &#xe61f;
- 
  fonts-safty
  &#xe622;
- 
  web__API权限
  &#xe644;
- 
  addition_fill
  &#xe6e1;
- 
  addition
  &#xe6e2;
- 
  addpeople_fill
  &#xe6e3;
- 
  addpeople
  &#xe6e4;
- 
  brush
  &#xe6eb;
- 
  brush_fill
  &#xe6ec;
- 
  computer_fill
  &#xe6f6;
- 
  computer
  &#xe6f7;
- 
  empty
  &#xe70a;
- 
  empty_fill
  &#xe70b;
- 
  flag_fill
  &#xe711;
- 
  flag
  &#xe712;
- 
  flashlight
  &#xe713;
- 
  flashlight_fill
  &#xe714;
- 
  homepage_fill
  &#xe71b;
- 
  homepage
  &#xe71c;
- 
  label
  &#xe722;
- 
  label_fill
  &#xe723;
- 
  lock_fill
  &#xe728;
- 
  lock
  &#xe729;
- 
  mail
  &#xe72a;
- 
  mail_fill
  &#xe72b;
- 
  mine
  &#xe730;
- 
  mine_fill
  &#xe731;
- 
  people_fill
  &#xe73b;
- 
  people
  &#xe73c;
- 
  prompt_fill
  &#xe745;
- 
  prompt
  &#xe746;
- 
  remind_fill
  &#xe74c;
- 
  remind
  &#xe74d;
- 
  send
  &#xe753;
- 
  setup_fill
  &#xe756;
- 
  setup
  &#xe757;
- 
  tailor
  &#xe766;
- 
  release
  &#xe65d;
- 
  release
  &#xe63b;
- 
  tech
  &#xe619;
- 
  workbench-o
  &#xe788;
- 
  workbench
  &#xe789;
- 
  CodeSandbox
  &#xe9d4;
- 
  AK-ZY日历
  &#xe600;
- 
  创新思维
  &#xe60f;
- 
  attachment
  &#xe7e1;
- 
  export
  &#xe787;
- 
  import
  &#xe7a9;
- 
  product
  &#xe601;
- 
  radar
  &#xe668;

## Unicode 引用

Unicode 是字体在网页端最原始的应用方式，特点是：

- 兼容性最好，支持 IE6+，及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小，颜色等等。
- 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

> 注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式

Unicode 使用步骤如下：

### 第一步：拷贝项目下面生成的 `@font-face`

    @font-face {
      font-family: 'iconfont';
      src: url('iconfont.eot');
      src: url('iconfont.eot?#iefix') format('embedded-opentype'),
          url('iconfont.woff2') format('woff2'),
          url('iconfont.woff') format('woff'),
          url('iconfont.ttf') format('truetype'),
          url('iconfont.svg#iconfont') format('svg');
    }

### 第二步：定义使用 iconfont 的样式

    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

### 第三步：挑选相应图标并获取字体编码，应用于页面

    <span class="iconfont">&#x33;</span>

> "iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

- arrow-down
  .icon-arrowdown
- pushpin
  .icon-pushpin
- history
  .icon-history
- bug
  .icon-bug
- bug
  .icon-bug_fill
- arrow-up
  .icon-arrowup
- folder
  .icon-folder
- pull-request
  .icon-request
- anchor
  .icon-anchor
- analyze-分析
  .icon-analyze
- run
  .icon-run
- Star
  .icon-star
- coding
  .icon-coding
- logout
  .icon-logout
- safty
  .icon-safty
- save
  .icon-save
- fonts-safty
  .icon-safty_fill
- web__API权限
  .icon-auth
- addition_fill
  .icon-addition_fill
- addition
  .icon-addition
- addpeople_fill
  .icon-addpeople_fill
- addpeople
  .icon-addpeople
- brush
  .icon-brush
- brush_fill
  .icon-brush_fill
- computer_fill
  .icon-computer_fill
- computer
  .icon-computer
- empty
  .icon-empty
- empty_fill
  .icon-empty_fill
- flag_fill
  .icon-flag_fill
- flag
  .icon-flag
- flashlight
  .icon-flashlight
- flashlight_fill
  .icon-flashlight_fill
- homepage_fill
  .icon-homepage_fill
- homepage
  .icon-homepage
- label
  .icon-label
- label_fill
  .icon-label_fill
- lock_fill
  .icon-lock_fill
- lock
  .icon-lock
- mail
  .icon-mail
- mail_fill
  .icon-mail_fill
- mine
  .icon-mine
- mine_fill
  .icon-mine_fill
- people_fill
  .icon-people_fill
- people
  .icon-people
- prompt_fill
  .icon-prompt_fill
- prompt
  .icon-prompt
- remind_fill
  .icon-remind_fill
- remind
  .icon-remind
- send
  .icon-send
- setup_fill
  .icon-setup_fill
- setup
  .icon-setup
- tailor
  .icon-tailor
- release
  .icon-release
- release
  .icon-release_fill
- tech
  .icon-tech
- workbench-o
  .icon-workbench
- workbench
  .icon-workbench_fill
- CodeSandbox
  .icon-sandbox
- AK-ZY日历
  .icon-calendar
- 创新思维
  .icon-minder
- attachment
  .icon-attachment
- export
  .icon-export
- import
  .icon-import
- product
  .icon-icon-product
- radar
  .icon-radar

## font-class 引用

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：

- 兼容性良好，支持 IE8+，及所有现代浏览器。
- 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
- 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
- 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤如下：

### 第一步：引入项目下面生成的 fontclass 代码：

    <link rel="stylesheet" href="./iconfont.css">

### 第二步：挑选相应图标并获取类名，应用于页面：

    <span class="iconfont icon-xxx"></span>

> " iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

- arrow-down
  #icon-arrowdown
- pushpin
  #icon-pushpin
- history
  #icon-history
- bug
  #icon-bug
- bug
  #icon-bug_fill
- arrow-up
  #icon-arrowup
- folder
  #icon-folder
- pull-request
  #icon-request
- anchor
  #icon-anchor
- analyze-分析
  #icon-analyze
- run
  #icon-run
- Star
  #icon-star
- coding
  #icon-coding
- logout
  #icon-logout
- safty
  #icon-safty
- save
  #icon-save
- fonts-safty
  #icon-safty_fill
- web__API权限
  #icon-auth
- addition_fill
  #icon-addition_fill
- addition
  #icon-addition
- addpeople_fill
  #icon-addpeople_fill
- addpeople
  #icon-addpeople
- brush
  #icon-brush
- brush_fill
  #icon-brush_fill
- computer_fill
  #icon-computer_fill
- computer
  #icon-computer
- empty
  #icon-empty
- empty_fill
  #icon-empty_fill
- flag_fill
  #icon-flag_fill
- flag
  #icon-flag
- flashlight
  #icon-flashlight
- flashlight_fill
  #icon-flashlight_fill
- homepage_fill
  #icon-homepage_fill
- homepage
  #icon-homepage
- label
  #icon-label
- label_fill
  #icon-label_fill
- lock_fill
  #icon-lock_fill
- lock
  #icon-lock
- mail
  #icon-mail
- mail_fill
  #icon-mail_fill
- mine
  #icon-mine
- mine_fill
  #icon-mine_fill
- people_fill
  #icon-people_fill
- people
  #icon-people
- prompt_fill
  #icon-prompt_fill
- prompt
  #icon-prompt
- remind_fill
  #icon-remind_fill
- remind
  #icon-remind
- send
  #icon-send
- setup_fill
  #icon-setup_fill
- setup
  #icon-setup
- tailor
  #icon-tailor
- release
  #icon-release
- release
  #icon-release_fill
- tech
  #icon-tech
- workbench-o
  #icon-workbench
- workbench
  #icon-workbench_fill
- CodeSandbox
  #icon-sandbox
- AK-ZY日历
  #icon-calendar
- 创新思维
  #icon-minder
- attachment
  #icon-attachment
- export
  #icon-export
- import
  #icon-import
- product
  #icon-icon-product
- radar
  #icon-radar

## Symbol 引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过 `font-size`, `color` 来调整样式。
- 兼容性较差，支持 IE9+，及现代浏览器。
- 浏览器渲染 SVG 的性能一般，还不如 png。

使用步骤如下：

### 第一步：引入项目下面生成的 symbol 代码：

    <script src="./iconfont.js"></script>

### 第二步：加入通用 CSS 代码（引入一次就行）：

    <style>
    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
    </style>

### 第三步：挑选相应图标并获取类名，应用于页面：

    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-xxx"></use>
    </svg>