#

- 
  b-slice
  &#xe78c;
- 
  b-scissor cut
  &#xe782;
- 
  b-paint-brush
  &#xe783;
- 
  b-pencil-ruler
  &#xe784;
- 
  b-quill pen
  &#xe785;
- 
  b-screenshot01
  &#xe786;
- 
  b-pen-nib
  &#xe787;
- 
  b-ruler02
  &#xe788;
- 
  b-paste
  &#xe789;
- 
  b-ruler01
  &#xe78a;
- 
  b-screenshot02
  &#xe78b;
- 
  language-A
  &#xe771;
- 
  bg-colors
  &#xe772;
- 
  form
  &#xe773;
- 
  sort-descending
  &#xe774;
- 
  strikethrough
  &#xe775;
- 
  zoom-out
  &#xe776;
- 
  zoom-in
  &#xe777;
- 
  italic
  &#xe778;
- 
  align-center
  &#xe779;
- 
  画板 153
  &#xe77a;
- 
  scissor
  &#xe77b;
- 
  underline
  &#xe77c;
- 
  align-right
  &#xe77e;
- 
  colum-height
  &#xe77f;
- 
  undo
  &#xe770;
- 
  brush01
  &#xe745;
- 
  bold
  &#xe746;
- 
  block
  &#xe747;
- 
  brush02
  &#xe748;
- 
  blur-off
  &#xe749;
- 
  brush04
  &#xe74a;
- 
  clear
  &#xe74b;
- 
  collage
  &#xe74c;
- 
  column-width
  &#xe74d;
- 
  compasses02
  &#xe74e;
- 
  copy
  &#xe74f;
- 
  contrast02
  &#xe750;
- 
  crop
  &#xe751;
- 
  diff
  &#xe752;
- 
  contrast01
  &#xe753;
- 
  drop02
  &#xe754;
- 
  drop01
  &#xe755;
- 
  delete
  &#xe756;
- 
  brush03
  &#xe757;
- 
  drag
  &#xe758;
- 
  drop
  &#xe759;
- 
  hammer
  &#xe75a;
- 
  compasses01
  &#xe75b;
- 
  highlight
  &#xe75c;
- 
  font-colors
  &#xe75d;
- 
  eraser
  &#xe75e;
- 
  font-size
  &#xe75f;
- 
  dash
  &#xe760;
- 
  mark-pen
  &#xe761;
- 
  radius-setting
  &#xe762;
- 
  line-height
  &#xe763;
- 
  redo
  &#xe764;
- 
  language-B
  &#xe765;
- 
  small-dash
  &#xe766;
- 
  ordered-list
  &#xe767;
- 
  straw
  &#xe768;
- 
  translate
  &#xe769;
- 
  snippets
  &#xe76a;
- 
  number
  &#xe76b;
- 
  sort-ascending
  &#xe76c;
- 
  align-left
  &#xe76d;
- 
  edit
  &#xe76e;
- 
  Drawing board
  &#xe76f;

## Unicode 引用

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

- 支持按字体的方式去动态调整图标大小，颜色等等。
- 默认情况下不支持多色，直接添加多色图标会自动去色。

> 注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

Unicode 使用步骤如下：

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

    @font-face {
      font-family: 'icon-edit';
      src: url('iconfont.woff2?t=1649814830303') format('woff2'),
           url('iconfont.woff?t=1649814830303') format('woff'),
           url('iconfont.ttf?t=1649814830303') format('truetype'),
           url('iconfont.svg?t=1649814830303#icon-edit') format('svg');
    }

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

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

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

    <span class="icon-edit">&#x33;</span>

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

- b-slice
  .icon-edit-b-slice
- b-scissor cut
  .icon-edit-a-b-scissorcut
- b-paint-brush
  .icon-edit-b-paint-brush
- b-pencil-ruler
  .icon-edit-b-pencil-ruler
- b-quill pen
  .icon-edit-a-b-quillpen
- b-screenshot01
  .icon-edit-b-screenshot01
- b-pen-nib
  .icon-edit-b-pen-nib
- b-ruler02
  .icon-edit-b-ruler02
- b-paste
  .icon-edit-b-paste
- b-ruler01
  .icon-edit-b-ruler01
- b-screenshot02
  .icon-edit-b-screenshot02
- language-A
  .icon-edit-language-A
- bg-colors
  .icon-edit-bg-colors
- form
  .icon-edit-form
- sort-descending
  .icon-edit-sort-descending
- strikethrough
  .icon-edit-strikethrough
- zoom-out
  .icon-edit-zoom-out
- zoom-in
  .icon-edit-zoom-in
- italic
  .icon-edit-italic
- align-center
  .icon-edit-align-center
- 画板 153
  .icon-edit-a-huaban153
- scissor
  .icon-edit-scissor
- underline
  .icon-edit-underline
- align-right
  .icon-edit-align-right
- colum-height
  .icon-edit-colum-height
- undo
  .icon-edit-undo
- brush01
  .icon-edit-brush01
- bold
  .icon-edit-bold
- block
  .icon-edit-block
- brush02
  .icon-edit-brush02
- blur-off
  .icon-edit-blur-off
- brush04
  .icon-edit-brush04
- clear
  .icon-edit-clear
- collage
  .icon-edit-collage
- column-width
  .icon-edit-column-width
- compasses02
  .icon-edit-compasses02
- copy
  .icon-edit-copy
- contrast02
  .icon-edit-contrast02
- crop
  .icon-edit-crop
- diff
  .icon-edit-diff
- contrast01
  .icon-edit-contrast01
- drop02
  .icon-edit-drop02
- drop01
  .icon-edit-drop01
- delete
  .icon-edit-delete
- brush03
  .icon-edit-brush03
- drag
  .icon-edit-drag
- drop
  .icon-edit-drop
- hammer
  .icon-edit-hammer
- compasses01
  .icon-edit-compasses01
- highlight
  .icon-edit-highlight
- font-colors
  .icon-edit-font-colors
- eraser
  .icon-edit-eraser
- font-size
  .icon-edit-font-size
- dash
  .icon-edit-dash
- mark-pen
  .icon-edit-mark-pen
- radius-setting
  .icon-edit-radius-setting
- line-height
  .icon-edit-line-height
- redo
  .icon-edit-redo
- language-B
  .icon-edit-language-B
- small-dash
  .icon-edit-small-dash
- ordered-list
  .icon-edit-ordered-list
- straw
  .icon-edit-straw
- translate
  .icon-edit-translate
- snippets
  .icon-edit-snippets
- number
  .icon-edit-number
- sort-ascending
  .icon-edit-sort-ascending
- align-left
  .icon-edit-align-left
- edit
  .icon-edit-edit
- Drawing board
  .icon-edit-a-Drawingboard

## font-class 引用

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

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

- 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
- 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。

使用步骤如下：

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

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

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

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

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

- b-slice
  #icon-edit-b-slice
- b-scissor cut
  #icon-edit-a-b-scissorcut
- b-paint-brush
  #icon-edit-b-paint-brush
- b-pencil-ruler
  #icon-edit-b-pencil-ruler
- b-quill pen
  #icon-edit-a-b-quillpen
- b-screenshot01
  #icon-edit-b-screenshot01
- b-pen-nib
  #icon-edit-b-pen-nib
- b-ruler02
  #icon-edit-b-ruler02
- b-paste
  #icon-edit-b-paste
- b-ruler01
  #icon-edit-b-ruler01
- b-screenshot02
  #icon-edit-b-screenshot02
- language-A
  #icon-edit-language-A
- bg-colors
  #icon-edit-bg-colors
- form
  #icon-edit-form
- sort-descending
  #icon-edit-sort-descending
- strikethrough
  #icon-edit-strikethrough
- zoom-out
  #icon-edit-zoom-out
- zoom-in
  #icon-edit-zoom-in
- italic
  #icon-edit-italic
- align-center
  #icon-edit-align-center
- 画板 153
  #icon-edit-a-huaban153
- scissor
  #icon-edit-scissor
- underline
  #icon-edit-underline
- align-right
  #icon-edit-align-right
- colum-height
  #icon-edit-colum-height
- undo
  #icon-edit-undo
- brush01
  #icon-edit-brush01
- bold
  #icon-edit-bold
- block
  #icon-edit-block
- brush02
  #icon-edit-brush02
- blur-off
  #icon-edit-blur-off
- brush04
  #icon-edit-brush04
- clear
  #icon-edit-clear
- collage
  #icon-edit-collage
- column-width
  #icon-edit-column-width
- compasses02
  #icon-edit-compasses02
- copy
  #icon-edit-copy
- contrast02
  #icon-edit-contrast02
- crop
  #icon-edit-crop
- diff
  #icon-edit-diff
- contrast01
  #icon-edit-contrast01
- drop02
  #icon-edit-drop02
- drop01
  #icon-edit-drop01
- delete
  #icon-edit-delete
- brush03
  #icon-edit-brush03
- drag
  #icon-edit-drag
- drop
  #icon-edit-drop
- hammer
  #icon-edit-hammer
- compasses01
  #icon-edit-compasses01
- highlight
  #icon-edit-highlight
- font-colors
  #icon-edit-font-colors
- eraser
  #icon-edit-eraser
- font-size
  #icon-edit-font-size
- dash
  #icon-edit-dash
- mark-pen
  #icon-edit-mark-pen
- radius-setting
  #icon-edit-radius-setting
- line-height
  #icon-edit-line-height
- redo
  #icon-edit-redo
- language-B
  #icon-edit-language-B
- small-dash
  #icon-edit-small-dash
- ordered-list
  #icon-edit-ordered-list
- straw
  #icon-edit-straw
- translate
  #icon-edit-translate
- snippets
  #icon-edit-snippets
- number
  #icon-edit-number
- sort-ascending
  #icon-edit-sort-ascending
- align-left
  #icon-edit-align-left
- edit
  #icon-edit-edit
- Drawing board
  #icon-edit-a-Drawingboard

## 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>