#

- 
  f--xia
  &#xe7cd;
- 
  f--shang
  &#xe7ce;
- 
  f--Align up--
  &#xe78c;
- 
  f--bottom justify--
  &#xe7b8;
- 
  f--horizontal alignment--
  &#xe7b9;
- 
  f-left-spuare
  &#xe7c5;
- 
  f-login
  &#xe7c6;
- 
  f-pic-left
  &#xe7c7;
- 
  f-menu-unfold
  &#xe7c8;
- 
  f-radius-bottomright
  &#xe7c9;
- 
  f-radius-upleft
  &#xe7ca;
- 
  f-radius-bottomleft
  &#xe7cb;
- 
  f-radius-upright
  &#xe7cc;
- 
  f-double-right
  &#xe773;
- 
  f-retweet
  &#xe774;
- 
  f-right-spuare
  &#xe775;
- 
  f-rotate-right
  &#xe776;
- 
  f-right_1
  &#xe777;
- 
  f-right
  &#xe778;
- 
  f-swap-left
  &#xe779;
- 
  f-step-backward
  &#xe77a;
- 
  f-up01
  &#xe77b;
- 
  f-step-farward
  &#xe77c;
- 
  f--Right align--
  &#xe77d;
- 
  f-up
  &#xe77e;
- 
  f-shrink
  &#xe77f;
- 
  f-vertical-left
  &#xe780;
- 
  f-vertical-align-top
  &#xe781;
- 
  f-to-up
  &#xe782;
- 
  f-rollback
  &#xe783;
- 
  f--up02
  &#xe784;
- 
  f-arrow-down
  &#xe785;
- 
  f-arrow-left-down
  &#xe786;
- 
  f-swap
  &#xe787;
- 
  f-arrow-left
  &#xe788;
- 
  f-arrow-right-up
  &#xe789;
- 
  f-up-spuare
  &#xe78a;
- 
  f-rotate-left
  &#xe78b;
- 
  f-vertical-align-middle
  &#xe78d;
- 
  f-backward
  &#xe78e;
- 
  f-vertical-right
  &#xe78f;
- 
  f--Vertical alignment--
  &#xe790;
- 
  f-arrow-down-up
  &#xe791;
- 
  f-arrow-left-up
  &#xe792;
- 
  f-upload
  &#xe793;
- 
  f-arrow-up
  &#xe794;
- 
  f-arrow-right-down
  &#xe795;
- 
  f-border-inner
  &#xe796;
- 
  f-caret-right
  &#xe797;
- 
  f-swap-right
  &#xe798;
- 
  f-arrow-left-right
  &#xe799;
- 
  f-border-left
  &#xe79a;
- 
  f-arrows-alt
  &#xe79b;
- 
  f-to-down
  &#xe79c;
- 
  f--Align left--
  &#xe79d;
- 
  f-caret-left
  &#xe79e;
- 
  f-border-verticle
  &#xe79f;
- 
  f-border-horizontal
  &#xe7a0;
- 
  f-border-outer
  &#xe7a1;
- 
  f-circle-right
  &#xe7a2;
- 
  f-circle-up
  &#xe7a3;
- 
  f-circle-left
  &#xe7a4;
- 
  f-border-bottom
  &#xe7a5;
- 
  f--down02
  &#xe7a6;
- 
  f-border-top
  &#xe7a7;
- 
  f-down
  &#xe7a8;
- 
  f-arrow-right
  &#xe7a9;
- 
  f-border-right
  &#xe7aa;
- 
  f-down01
  &#xe7ab;
- 
  f-enter
  &#xe7ac;
- 
  f-download
  &#xe7ad;
- 
  f-caret-down
  &#xe7ae;
- 
  f-caret-up
  &#xe7af;
- 
  f-backward_1
  &#xe7b0;
- 
  f-double-right
  &#xe7b1;
- 
  f-circle-down
  &#xe7b2;
- 
  f-fast-farward
  &#xe7b3;
- 
  f-left
  &#xe7b4;
- 
  f-fullscreen-exit
  &#xe7b5;
- 
  f-double-down
  &#xe7b6;
- 
  f-down-spuqre
  &#xe7b7;
- 
  f-left_1
  &#xe7ba;
- 
  f-fast-backward
  &#xe7bb;
- 
  f-fullscreen
  &#xe7bc;
- 
  f-double-up
  &#xe7bd;
- 
  f-double-left
  &#xe7be;
- 
  f-pic-center
  &#xe7bf;
- 
  f-export
  &#xe7c0;
- 
  f-pic-right
  &#xe7c1;
- 
  f-import
  &#xe7c2;
- 
  f-menu-fold
  &#xe7c3;
- 
  f-logout
  &#xe7c4;

## Unicode 引用

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

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

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

Unicode 使用步骤如下：

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

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

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

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

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

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

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

- f--xia
  .icon-dir-f--xia
- f--shang
  .icon-dir-f--shang
- f--Align up--
  .icon-dir-a-f--Alignup--
- f--bottom justify--
  .icon-dir-a-f--bottomjustify--
- f--horizontal alignment--
  .icon-dir-a-f--horizontalalignment--
- f-left-spuare
  .icon-dir-f-left-spuare
- f-login
  .icon-dir-f-login
- f-pic-left
  .icon-dir-f-pic-left
- f-menu-unfold
  .icon-dir-f-menu-unfold
- f-radius-bottomright
  .icon-dir-f-radius-bottomright
- f-radius-upleft
  .icon-dir-f-radius-upleft
- f-radius-bottomleft
  .icon-dir-f-radius-bottomleft
- f-radius-upright
  .icon-dir-f-radius-upright
- f-double-right
  .icon-dir-f-double-right
- f-retweet
  .icon-dir-f-retweet
- f-right-spuare
  .icon-dir-f-right-spuare
- f-rotate-right
  .icon-dir-f-rotate-right
- f-right_1
  .icon-dir-f-right_1
- f-right
  .icon-dir-f-right
- f-swap-left
  .icon-dir-f-swap-left
- f-step-backward
  .icon-dir-f-step-backward
- f-up01
  .icon-dir-f-up01
- f-step-farward
  .icon-dir-f-step-farward
- f--Right align--
  .icon-dir-a-f--Rightalign--
- f-up
  .icon-dir-f-up
- f-shrink
  .icon-dir-f-shrink
- f-vertical-left
  .icon-dir-f-vertical-left
- f-vertical-align-top
  .icon-dir-f-vertical-align-top
- f-to-up
  .icon-dir-f-to-up
- f-rollback
  .icon-dir-f-rollback
- f--up02
  .icon-dir-f--up02
- f-arrow-down
  .icon-dir-f-arrow-down
- f-arrow-left-down
  .icon-dir-f-arrow-left-down
- f-swap
  .icon-dir-f-swap
- f-arrow-left
  .icon-dir-f-arrow-left
- f-arrow-right-up
  .icon-dir-f-arrow-right-up
- f-up-spuare
  .icon-dir-f-up-spuare
- f-rotate-left
  .icon-dir-f-rotate-left
- f-vertical-align-middle
  .icon-dir-f-vertical-align-middle
- f-backward
  .icon-dir-f-backward
- f-vertical-right
  .icon-dir-f-vertical-right
- f--Vertical alignment--
  .icon-dir-a-f--Verticalalignment--
- f-arrow-down-up
  .icon-dir-f-arrow-down-up
- f-arrow-left-up
  .icon-dir-f-arrow-left-up
- f-upload
  .icon-dir-f-upload
- f-arrow-up
  .icon-dir-f-arrow-up
- f-arrow-right-down
  .icon-dir-f-arrow-right-down
- f-border-inner
  .icon-dir-f-border-inner
- f-caret-right
  .icon-dir-f-caret-right
- f-swap-right
  .icon-dir-f-swap-right
- f-arrow-left-right
  .icon-dir-f-arrow-left-right
- f-border-left
  .icon-dir-f-border-left
- f-arrows-alt
  .icon-dir-f-arrows-alt
- f-to-down
  .icon-dir-f-to-down
- f--Align left--
  .icon-dir-a-f--Alignleft--
- f-caret-left
  .icon-dir-f-caret-left
- f-border-verticle
  .icon-dir-f-border-verticle
- f-border-horizontal
  .icon-dir-f-border-horizontal
- f-border-outer
  .icon-dir-f-border-outer
- f-circle-right
  .icon-dir-f-circle-right
- f-circle-up
  .icon-dir-f-circle-up
- f-circle-left
  .icon-dir-f-circle-left
- f-border-bottom
  .icon-dir-f-border-bottom
- f--down02
  .icon-dir-f--down02
- f-border-top
  .icon-dir-f-border-top
- f-down
  .icon-dir-f-down
- f-arrow-right
  .icon-dir-f-arrow-right
- f-border-right
  .icon-dir-f-border-right
- f-down01
  .icon-dir-f-down01
- f-enter
  .icon-dir-f-enter
- f-download
  .icon-dir-f-download
- f-caret-down
  .icon-dir-f-caret-down
- f-caret-up
  .icon-dir-f-caret-up
- f-backward_1
  .icon-dir-f-backward_1
- f-double-right
  .icon-dir-f-double-right1
- f-circle-down
  .icon-dir-f-circle-down
- f-fast-farward
  .icon-dir-f-fast-farward
- f-left
  .icon-dir-f-left
- f-fullscreen-exit
  .icon-dir-f-fullscreen-exit
- f-double-down
  .icon-dir-f-double-down
- f-down-spuqre
  .icon-dir-f-down-spuqre
- f-left_1
  .icon-dir-f-left_1
- f-fast-backward
  .icon-dir-f-fast-backward
- f-fullscreen
  .icon-dir-f-fullscreen
- f-double-up
  .icon-dir-f-double-up
- f-double-left
  .icon-dir-f-double-left
- f-pic-center
  .icon-dir-f-pic-center
- f-export
  .icon-dir-f-export
- f-pic-right
  .icon-dir-f-pic-right
- f-import
  .icon-dir-f-import
- f-menu-fold
  .icon-dir-f-menu-fold
- f-logout
  .icon-dir-f-logout

## font-class 引用

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

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

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

使用步骤如下：

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

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

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

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

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

- f--xia
  #icon-dir-f--xia
- f--shang
  #icon-dir-f--shang
- f--Align up--
  #icon-dir-a-f--Alignup--
- f--bottom justify--
  #icon-dir-a-f--bottomjustify--
- f--horizontal alignment--
  #icon-dir-a-f--horizontalalignment--
- f-left-spuare
  #icon-dir-f-left-spuare
- f-login
  #icon-dir-f-login
- f-pic-left
  #icon-dir-f-pic-left
- f-menu-unfold
  #icon-dir-f-menu-unfold
- f-radius-bottomright
  #icon-dir-f-radius-bottomright
- f-radius-upleft
  #icon-dir-f-radius-upleft
- f-radius-bottomleft
  #icon-dir-f-radius-bottomleft
- f-radius-upright
  #icon-dir-f-radius-upright
- f-double-right
  #icon-dir-f-double-right
- f-retweet
  #icon-dir-f-retweet
- f-right-spuare
  #icon-dir-f-right-spuare
- f-rotate-right
  #icon-dir-f-rotate-right
- f-right_1
  #icon-dir-f-right_1
- f-right
  #icon-dir-f-right
- f-swap-left
  #icon-dir-f-swap-left
- f-step-backward
  #icon-dir-f-step-backward
- f-up01
  #icon-dir-f-up01
- f-step-farward
  #icon-dir-f-step-farward
- f--Right align--
  #icon-dir-a-f--Rightalign--
- f-up
  #icon-dir-f-up
- f-shrink
  #icon-dir-f-shrink
- f-vertical-left
  #icon-dir-f-vertical-left
- f-vertical-align-top
  #icon-dir-f-vertical-align-top
- f-to-up
  #icon-dir-f-to-up
- f-rollback
  #icon-dir-f-rollback
- f--up02
  #icon-dir-f--up02
- f-arrow-down
  #icon-dir-f-arrow-down
- f-arrow-left-down
  #icon-dir-f-arrow-left-down
- f-swap
  #icon-dir-f-swap
- f-arrow-left
  #icon-dir-f-arrow-left
- f-arrow-right-up
  #icon-dir-f-arrow-right-up
- f-up-spuare
  #icon-dir-f-up-spuare
- f-rotate-left
  #icon-dir-f-rotate-left
- f-vertical-align-middle
  #icon-dir-f-vertical-align-middle
- f-backward
  #icon-dir-f-backward
- f-vertical-right
  #icon-dir-f-vertical-right
- f--Vertical alignment--
  #icon-dir-a-f--Verticalalignment--
- f-arrow-down-up
  #icon-dir-f-arrow-down-up
- f-arrow-left-up
  #icon-dir-f-arrow-left-up
- f-upload
  #icon-dir-f-upload
- f-arrow-up
  #icon-dir-f-arrow-up
- f-arrow-right-down
  #icon-dir-f-arrow-right-down
- f-border-inner
  #icon-dir-f-border-inner
- f-caret-right
  #icon-dir-f-caret-right
- f-swap-right
  #icon-dir-f-swap-right
- f-arrow-left-right
  #icon-dir-f-arrow-left-right
- f-border-left
  #icon-dir-f-border-left
- f-arrows-alt
  #icon-dir-f-arrows-alt
- f-to-down
  #icon-dir-f-to-down
- f--Align left--
  #icon-dir-a-f--Alignleft--
- f-caret-left
  #icon-dir-f-caret-left
- f-border-verticle
  #icon-dir-f-border-verticle
- f-border-horizontal
  #icon-dir-f-border-horizontal
- f-border-outer
  #icon-dir-f-border-outer
- f-circle-right
  #icon-dir-f-circle-right
- f-circle-up
  #icon-dir-f-circle-up
- f-circle-left
  #icon-dir-f-circle-left
- f-border-bottom
  #icon-dir-f-border-bottom
- f--down02
  #icon-dir-f--down02
- f-border-top
  #icon-dir-f-border-top
- f-down
  #icon-dir-f-down
- f-arrow-right
  #icon-dir-f-arrow-right
- f-border-right
  #icon-dir-f-border-right
- f-down01
  #icon-dir-f-down01
- f-enter
  #icon-dir-f-enter
- f-download
  #icon-dir-f-download
- f-caret-down
  #icon-dir-f-caret-down
- f-caret-up
  #icon-dir-f-caret-up
- f-backward_1
  #icon-dir-f-backward_1
- f-double-right
  #icon-dir-f-double-right1
- f-circle-down
  #icon-dir-f-circle-down
- f-fast-farward
  #icon-dir-f-fast-farward
- f-left
  #icon-dir-f-left
- f-fullscreen-exit
  #icon-dir-f-fullscreen-exit
- f-double-down
  #icon-dir-f-double-down
- f-down-spuqre
  #icon-dir-f-down-spuqre
- f-left_1
  #icon-dir-f-left_1
- f-fast-backward
  #icon-dir-f-fast-backward
- f-fullscreen
  #icon-dir-f-fullscreen
- f-double-up
  #icon-dir-f-double-up
- f-double-left
  #icon-dir-f-double-left
- f-pic-center
  #icon-dir-f-pic-center
- f-export
  #icon-dir-f-export
- f-pic-right
  #icon-dir-f-pic-right
- f-import
  #icon-dir-f-import
- f-menu-fold
  #icon-dir-f-menu-fold
- f-logout
  #icon-dir-f-logout

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