# 彩色字体

- 
  arrow-down-circle-s
  &#xe695;
- 
  arrow-up-circle-s
  &#xe6a7;
- 
  arrow-left-circle
  &#xe667;
- 
  direction-down-circle
  &#xe66c;
- 
  arrow-up-circle
  &#xe665;
- 
  arrow-right-circle
  &#xe666;
- 
  天猫-123时效
  &#xe603;
- 
  百分比
  &#xebcd;
- 
  copy
  &#xe66a;
- 
  XLSX
  &#xe650;
- 
  XLSX图标
  &#xe6c5;
- 
  info
  &#xe60a;
- 
  error
  &#xe620;
- 
  warn
  &#xe601;
- 
  cc-arrow-right-circle
  &#xe6f8;
- 
  cc-arrow-right-circle
  &#xe6fa;
- 
  cc-arrow-right-circle
  &#xe6fb;
- 
  delete
  &#xe698;
- 
  add
  &#xe6ee;
- 
  check-box
  &#xe626;
- 
  check-box-empty
  &#xe625;
- 
  arrows down
  &#xe623;
- 
  arrows down
  &#xe6fc;
- 
  edit
  &#xe62f;
- 
  sort16
  &#xe630;
- 
  sort
  &#xe93c;
- 
  -sort-2
  &#xe73d;
- 
  退出
  &#xe627;
- 
  tree
  &#xe6e8;
- 
  刷新
  &#xe619;
- 
  关 闭
  &#xe629;
- 
  关闭所有
  &#xe60f;
- 
  关闭其它
  &#xe631;
- 
  权限
  &#xe63f;
- 
  全屏
  &#xeb11;
- 
  部门
  &#xe62b;
- 
  岗位
  &#xe65c;
- 
  根节点
  &#xe810;
- 
  组织机构
  &#xe63c;
- 
  功能
  &#xe604;
- 
  工作流程图
  &#xe602;
- 
  search
  &#xe621;
- 
  clock
  &#xe600;
- 
  arrow
  &#xe636;
- 
  table
  &#xe699;
- 
  cc-arrow-right-circle
  &#xe60d;
- 
  help
  &#xe65d;
- 
  yxx_mark
  &#xe63d;
- 
  钱
  &#xe640;
- 
  报表2
  &#xe6d2;
- 
  待办
  &#xe64a;
- 
  切换
  &#xe60e;
- 
  消息
  &#xe6eb;
- 
  time
  &#xe64d;
- 
  画板主题
  &#xe664;
- 
  邮箱
  &#xe6af;
- 
  email
  &#xe628;
- 
  会议管理
  &#xe612;
- 
  今日收入
  &#xe645;
- 
  user
  &#xe606;
- 
  add
  &#xe654;
- 
  sun
  &#xe6f5;
- 
  arrow
  &#xe6f6;
- 
  图表
  &#xe632;
- 
  设置
  &#xe61d;
- 
  set
  &#xe61e;
- 
  close
  &#xe607;
- 
  arrow
  &#xe6f7;
- 
  用户
  &#xe609;
- 
  用户
  &#xe69f;

## Unicode 引用

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

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

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

Unicode 使用步骤如下：

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

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

### 第二步：定义使用 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-circle-s
  .icon-arrow-down-circle-s
- arrow-up-circle-s
  .icon-arrow-up-circle-s
- arrow-left-circle
  .icon-arrow-left-circle1
- direction-down-circle
  .icon-direction-down-circle
- arrow-up-circle
  .icon-arrow-up-circle1
- arrow-right-circle
  .icon-arrow-right-circle1
- 天猫-123时效
  .icon-num
- 百分比
  .icon-percentage
- copy
  .icon-copy
- XLSX
  .icon-XLSX
- XLSX图标
  .icon-xlsx
- info
  .icon-info
- error
  .icon-error
- warn
  .icon-warn
- cc-arrow-right-circle
  .icon-arrow-down-circle
- cc-arrow-right-circle
  .icon-arrow-up-circle
- cc-arrow-right-circle
  .icon-arrow-left-circle
- delete
  .icon-delete
- add
  .icon-add
- check-box
  .icon-checkbox
- check-box-empty
  .icon-checkbox-empty
- arrows down
  .icon-arrow-leftMore-circle
- arrows down
  .icon-arrow-rightMore-circle
- edit
  .icon-edit
- sort16
  .icon-moveSort2
- sort
  .icon-moveSort1
- -sort-2
  .icon-moveSort
- 退出
  .icon-tuichu
- tree
  .icon-tree
- 刷新
  .icon-refresh
- 关 闭
  .icon-close-circle
- 关闭所有
  .icon-closeAll
- 关闭其它
  .icon-closeOther
- 权限
  .icon-quanxian
- 全屏
  .icon-quanping
- 部门
  .icon-dpt
- 岗位
  .icon-ptm
- 根节点
  .icon-root
- 组织机构
  .icon-org
- 功能
  .icon-func
- 工作流程图
  .icon-flow
- search
  .icon-search
- clock
  .icon-clock
- arrow
  .icon-arrow-right
- table
  .icon-table
- cc-arrow-right-circle
  .icon-arrow-right-circle
- help
  .icon-help
- yxx_mark
  .icon-mark
- 钱
  .icon-money
- 报表2
  .icon-analyse
- 待办
  .icon-dealt
- 切换
  .icon-change
- 消息
  .icon-bell
- time
  .icon-time
- 画板主题
  .icon-skin
- 邮箱
  .icon-mail
- email
  .icon-email
- 会议管理
  .icon-meeting
- 今日收入
  .icon-today
- user
  .icon-user2
- add
  .icon-listadd
- sun
  .icon-sun
- arrow
  .icon-arrow-down
- 图表
  .icon-chart
- 设置
  .icon-set
- set
  .icon-set-fill
- close
  .icon-close
- arrow
  .icon-arrow-left
- 用户
  .icon-user1
- 用户
  .icon-user

## font-class 引用

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

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

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

使用步骤如下：

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

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

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

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

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

- arrow-down-circle-s
  #icon-arrow-down-circle-s
- arrow-up-circle-s
  #icon-arrow-up-circle-s
- arrow-left-circle
  #icon-arrow-left-circle1
- direction-down-circle
  #icon-direction-down-circle
- arrow-up-circle
  #icon-arrow-up-circle1
- arrow-right-circle
  #icon-arrow-right-circle1
- 天猫-123时效
  #icon-num
- 百分比
  #icon-percentage
- copy
  #icon-copy
- XLSX
  #icon-XLSX
- XLSX图标
  #icon-xlsx
- info
  #icon-info
- error
  #icon-error
- warn
  #icon-warn
- cc-arrow-right-circle
  #icon-arrow-down-circle
- cc-arrow-right-circle
  #icon-arrow-up-circle
- cc-arrow-right-circle
  #icon-arrow-left-circle
- delete
  #icon-delete
- add
  #icon-add
- check-box
  #icon-checkbox
- check-box-empty
  #icon-checkbox-empty
- arrows down
  #icon-arrow-leftMore-circle
- arrows down
  #icon-arrow-rightMore-circle
- edit
  #icon-edit
- sort16
  #icon-moveSort2
- sort
  #icon-moveSort1
- -sort-2
  #icon-moveSort
- 退出
  #icon-tuichu
- tree
  #icon-tree
- 刷新
  #icon-refresh
- 关 闭
  #icon-close-circle
- 关闭所有
  #icon-closeAll
- 关闭其它
  #icon-closeOther
- 权限
  #icon-quanxian
- 全屏
  #icon-quanping
- 部门
  #icon-dpt
- 岗位
  #icon-ptm
- 根节点
  #icon-root
- 组织机构
  #icon-org
- 功能
  #icon-func
- 工作流程图
  #icon-flow
- search
  #icon-search
- clock
  #icon-clock
- arrow
  #icon-arrow-right
- table
  #icon-table
- cc-arrow-right-circle
  #icon-arrow-right-circle
- help
  #icon-help
- yxx_mark
  #icon-mark
- 钱
  #icon-money
- 报表2
  #icon-analyse
- 待办
  #icon-dealt
- 切换
  #icon-change
- 消息
  #icon-bell
- time
  #icon-time
- 画板主题
  #icon-skin
- 邮箱
  #icon-mail
- email
  #icon-email
- 会议管理
  #icon-meeting
- 今日收入
  #icon-today
- user
  #icon-user2
- add
  #icon-listadd
- sun
  #icon-sun
- arrow
  #icon-arrow-down
- 图表
  #icon-chart
- 设置
  #icon-set
- set
  #icon-set-fill
- close
  #icon-close
- arrow
  #icon-arrow-left
- 用户
  #icon-user1
- 用户
  #icon-user

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