# IconFont Demo

- 
  column-3
  &#xe663;
- 
  column-4
  &#xe664;
- 
  add
  &#xe665;
- 
  add-circle
  &#xe666;
- 
  adjust
  &#xe667;
- 
  arrow-up-circle
  &#xe668;
- 
  arrow-right-circle
  &#xe669;
- 
  arrow-down
  &#xe66a;
- 
  ashbin
  &#xe66b;
- 
  arrow-right
  &#xe66c;
- 
  browse
  &#xe66d;
- 
  bottom
  &#xe66e;
- 
  back
  &#xe66f;
- 
  bad
  &#xe670;
- 
  arrow-double-left
  &#xe671;
- 
  arrow-left-circle
  &#xe672;
- 
  arrow-double-right
  &#xe673;
- 
  caps-lock
  &#xe674;
- 
  camera
  &#xe675;
- 
  chart-bar
  &#xe676;
- 
  attachment
  &#xe677;
- 
  code
  &#xe678;
- 
  close
  &#xe679;
- 
  check-item
  &#xe67a;
- 
  calendar
  &#xe67b;
- 
  comment
  &#xe67c;
- 
  column-vertical
  &#xe67d;
- 
  column-horizontal
  &#xe67e;
- 
  complete
  &#xe67f;
- 
  chart-pie
  &#xe680;
- 
  cry
  &#xe681;
- 
  customer-service
  &#xe682;
- 
  delete
  &#xe683;
- 
  direction-down
  &#xe684;
- 
  copy
  &#xe685;
- 
  cut
  &#xe686;
- 
  data-view
  &#xe687;
- 
  direction-down-circle
  &#xe688;
- 
  direction-right
  &#xe689;
- 
  direction-up
  &#xe68a;
- 
  discount
  &#xe68b;
- 
  direction-left
  &#xe68c;
- 
  download
  &#xe68d;
- 
  electronics
  &#xe68e;
- 
  drag
  &#xe68f;
- 
  elipsis
  &#xe690;
- 
  export
  &#xe691;
- 
  explain
  &#xe692;
- 
  edit
  &#xe693;
- 
  eye-close
  &#xe694;
- 
  email
  &#xe695;
- 
  error
  &#xe696;
- 
  favorite
  &#xe697;
- 
  file-common
  &#xe698;
- 
  file-delete
  &#xe699;
- 
  file-add
  &#xe69a;
- 
  film
  &#xe69b;
- 
  fabulous
  &#xe69c;
- 
  file
  &#xe69d;
- 
  folder-close
  &#xe69e;
- 
  filter
  &#xe69f;
- 
  good
  &#xe6a0;
- 
  hide
  &#xe6a1;
- 
  home
  &#xe6a2;
- 
  history
  &#xe6a3;
- 
  file-open
  &#xe6a4;
- 
  forward
  &#xe6a5;
- 
  import
  &#xe6a6;
- 
  image-text
  &#xe6a7;
- 
  keyboard-26
  &#xe6a8;
- 
  keyboard-9
  &#xe6a9;
- 
  link
  &#xe6aa;
- 
  layout
  &#xe6ab;
- 
  fullscreen-shrink
  &#xe6ac;
- 
  layers
  &#xe6ad;
- 
  lock
  &#xe6ae;
- 
  fullscreen-expand
  &#xe6af;
- 
  map
  &#xe6b0;
- 
  meh
  &#xe6b1;
- 
  menu
  &#xe6b2;
- 
  loading
  &#xe6b3;
- 
  help
  &#xe6b4;
- 
  minus-circle
  &#xe6b5;
- 
  modular
  &#xe6b6;
- 
  notification
  &#xe6b7;
- 
  mic
  &#xe6b8;
- 
  more
  &#xe6b9;
- 
  pad
  &#xe6ba;
- 
  operation
  &#xe6bb;
- 
  play
  &#xe6bc;
- 
  print
  &#xe6bd;
- 
  mobile-phone
  &#xe6be;
- 
  minus
  &#xe6bf;
- 
  navigation
  &#xe6c0;
- 
  pdf
  &#xe6c1;
- 
  prompt
  &#xe6c2;
- 
  move
  &#xe6c3;
- 
  refresh
  &#xe6c4;
- 
  run-up
  &#xe6c5;
- 
  picture
  &#xe6c6;
- 
  run-in
  &#xe6c7;
- 
  pin
  &#xe6c8;
- 
  save
  &#xe6c9;
- 
  search
  &#xe6ca;
- 
  share
  &#xe6cb;
- 
  scanning
  &#xe6cc;
- 
  security
  &#xe6cd;
- 
  sign-out
  &#xe6ce;
- 
  select
  &#xe6cf;
- 
  stop
  &#xe6d0;
- 
  success
  &#xe6d1;
- 
  smile
  &#xe6d2;
- 
  switch
  &#xe6d3;
- 
  setting
  &#xe6d4;
- 
  survey
  &#xe6d5;
- 
  task
  &#xe6d6;
- 
  skip
  &#xe6d7;
- 
  text
  &#xe6d8;
- 
  time
  &#xe6d9;
- 
  telephone-out
  &#xe6da;
- 
  toggle-left
  &#xe6db;
- 
  toggle-right
  &#xe6dc;
- 
  telephone
  &#xe6dd;
- 
  top
  &#xe6de;
- 
  unlock
  &#xe6df;
- 
  user
  &#xe6e0;
- 
  upload
  &#xe6e1;
- 
  work
  &#xe6e2;
- 
  training
  &#xe6e3;
- 
  warning
  &#xe6e4;
- 
  zoom-in
  &#xe6e5;
- 
  zoom-out
  &#xe6e6;
- 
  add-bold
  &#xe6e7;
- 
  arrow-left-bold
  &#xe6e8;
- 
  arrow-up-bold
  &#xe6e9;
- 
  close-bold
  &#xe6ea;
- 
  arrow-down-bold
  &#xe6eb;
- 
  minus-bold
  &#xe6ec;
- 
  arrow-right-bold
  &#xe6ed;
- 
  select-bold
  &#xe6ee;
- 
  arrow-up-filling
  &#xe6ef;
- 
  arrow-down-filling
  &#xe6f0;
- 
  arrow-left-filling
  &#xe6f1;
- 
  arrow-right-filling
  &#xe6f2;
- 
  caps-unlock-filling
  &#xe6f3;
- 
  comment-filling
  &#xe6f4;
- 
  check-item-filling
  &#xe6f5;
- 
  clock-filling
  &#xe6f6;
- 
  delete-filling
  &#xe6f7;
- 
  decline-filling
  &#xe6f8;
- 
  dynamic-filling
  &#xe6f9;
- 
  intermediate-filling
  &#xe6fa;
- 
  favorite-filling
  &#xe6fb;
- 
  layout-filling
  &#xe6fc;
- 
  help-filling
  &#xe6fd;
- 
  history-filling
  &#xe6fe;
- 
  filter-filling
  &#xe6ff;
- 
  file-common-filling
  &#xe700;
- 
  news-filling
  &#xe701;
- 
  edit-filling
  &#xe702;
- 
  fullscreen-expand-filling
  &#xe703;
- 
  smile-filling
  &#xe704;
- 
  rise-filling
  &#xe705;
- 
  picture-filling
  &#xe706;
- 
  notification-filling
  &#xe707;
- 
  user-filling
  &#xe708;
- 
  setting-filling
  &#xe709;
- 
  switch-filling
  &#xe70a;
- 
  work-filling
  &#xe70b;
- 
  task-filling
  &#xe70c;
- 
  success-filling
  &#xe70d;
- 
  warning-filling
  &#xe70e;
- 
  folder-filling
  &#xe70f;
- 
  map-filling
  &#xe710;
- 
  prompt-filling
  &#xe711;
- 
  meh-filling
  &#xe712;
- 
  cry-filling
  &#xe713;
- 
  top-filling
  &#xe714;
- 
  home-filling
  &#xe715;
- 
  sorting
  &#xe716;

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

- column-3
  .icon-3column
- column-4
  .icon-column-4
- add
  .icon-add
- add-circle
  .icon-add-circle
- adjust
  .icon-adjust
- arrow-up-circle
  .icon-arrow-up-circle
- arrow-right-circle
  .icon-arrow-right-circle
- arrow-down
  .icon-arrow-down
- ashbin
  .icon-ashbin
- arrow-right
  .icon-arrow-right
- browse
  .icon-browse
- bottom
  .icon-bottom
- back
  .icon-back
- bad
  .icon-bad
- arrow-double-left
  .icon-arrow-double-left
- arrow-left-circle
  .icon-arrow-left-circle
- arrow-double-right
  .icon-arrow-double-right
- caps-lock
  .icon-caps-lock
- camera
  .icon-camera
- chart-bar
  .icon-chart-bar
- attachment
  .icon-attachment
- code
  .icon-code
- close
  .icon-close
- check-item
  .icon-check-item
- calendar
  .icon-calendar
- comment
  .icon-comment
- column-vertical
  .icon-column-vertical
- column-horizontal
  .icon-column-horizontal
- complete
  .icon-complete
- chart-pie
  .icon-chart-pie
- cry
  .icon-cry
- customer-service
  .icon-customer-service
- delete
  .icon-delete
- direction-down
  .icon-direction-down
- copy
  .icon-copy
- cut
  .icon-cut
- data-view
  .icon-data-view
- direction-down-circle
  .icon-direction-down-circle
- direction-right
  .icon-direction-right
- direction-up
  .icon-direction-up
- discount
  .icon-discount
- direction-left
  .icon-direction-left
- download
  .icon-download
- electronics
  .icon-electronics
- drag
  .icon-drag
- elipsis
  .icon-elipsis
- export
  .icon-export
- explain
  .icon-explain
- edit
  .icon-edit
- eye-close
  .icon-eye-close
- email
  .icon-email
- error
  .icon-error
- favorite
  .icon-favorite
- file-common
  .icon-file-common
- file-delete
  .icon-file-delete
- file-add
  .icon-file-add
- film
  .icon-film
- fabulous
  .icon-fabulous
- file
  .icon-file
- folder-close
  .icon-folder-close
- filter
  .icon-filter
- good
  .icon-good
- hide
  .icon-hide
- home
  .icon-home
- history
  .icon-history
- file-open
  .icon-file-open
- forward
  .icon-forward
- import
  .icon-import
- image-text
  .icon-image-text
- keyboard-26
  .icon-keyboard-26
- keyboard-9
  .icon-keyboard-9
- link
  .icon-link
- layout
  .icon-layout
- fullscreen-shrink
  .icon-fullscreen-shrink
- layers
  .icon-layers
- lock
  .icon-lock
- fullscreen-expand
  .icon-fullscreen-expand
- map
  .icon-map
- meh
  .icon-meh
- menu
  .icon-menu
- loading
  .icon-loading
- help
  .icon-help
- minus-circle
  .icon-minus-circle
- modular
  .icon-modular
- notification
  .icon-notification
- mic
  .icon-mic
- more
  .icon-more
- pad
  .icon-pad
- operation
  .icon-operation
- play
  .icon-play
- print
  .icon-print
- mobile-phone
  .icon-mobile-phone
- minus
  .icon-minus
- navigation
  .icon-navigation
- pdf
  .icon-pdf
- prompt
  .icon-prompt
- move
  .icon-move
- refresh
  .icon-refresh
- run-up
  .icon-run-up
- picture
  .icon-picture
- run-in
  .icon-run-in
- pin
  .icon-pin
- save
  .icon-save
- search
  .icon-search
- share
  .icon-share
- scanning
  .icon-scanning
- security
  .icon-security
- sign-out
  .icon-sign-out
- select
  .icon-select
- stop
  .icon-stop
- success
  .icon-success
- smile
  .icon-smile
- switch
  .icon-switch
- setting
  .icon-setting
- survey
  .icon-survey
- task
  .icon-task
- skip
  .icon-skip
- text
  .icon-text
- time
  .icon-time
- telephone-out
  .icon-telephone-out
- toggle-left
  .icon-toggle-left
- toggle-right
  .icon-toggle-right
- telephone
  .icon-telephone
- top
  .icon-top
- unlock
  .icon-unlock
- user
  .icon-user
- upload
  .icon-upload
- work
  .icon-work
- training
  .icon-training
- warning
  .icon-warning
- zoom-in
  .icon-zoom-in
- zoom-out
  .icon-zoom-out
- add-bold
  .icon-add-bold
- arrow-left-bold
  .icon-arrow-left-bold
- arrow-up-bold
  .icon-arrow-up-bold
- close-bold
  .icon-close-bold
- arrow-down-bold
  .icon-arrow-down-bold
- minus-bold
  .icon-minus-bold
- arrow-right-bold
  .icon-arrow-right-bold
- select-bold
  .icon-select-bold
- arrow-up-filling
  .icon-arrow-up-filling
- arrow-down-filling
  .icon-arrow-down-filling
- arrow-left-filling
  .icon-arrow-left-filling
- arrow-right-filling
  .icon-arrow-right-filling
- caps-unlock-filling
  .icon-caps-unlock-filling
- comment-filling
  .icon-comment-filling
- check-item-filling
  .icon-check-item-filling
- clock-filling
  .icon-clock-filling
- delete-filling
  .icon-delete-filling
- decline-filling
  .icon-decline-filling
- dynamic-filling
  .icon-dynamic-filling
- intermediate-filling
  .icon-intermediate-filling
- favorite-filling
  .icon-favorite-filling
- layout-filling
  .icon-layout-filling
- help-filling
  .icon-help-filling
- history-filling
  .icon-history-filling
- filter-filling
  .icon-filter-filling
- file-common-filling
  .icon-file-common-filling
- news-filling
  .icon-news-filling
- edit-filling
  .icon-edit-filling
- fullscreen-expand-filling
  .icon-fullscreen-expand-filling
- smile-filling
  .icon-smile-filling
- rise-filling
  .icon-rise-filling
- picture-filling
  .icon-picture-filling
- notification-filling
  .icon-notification-filling
- user-filling
  .icon-user-filling
- setting-filling
  .icon-setting-filling
- switch-filling
  .icon-switch-filling
- work-filling
  .icon-work-filling
- task-filling
  .icon-task-filling
- success-filling
  .icon-success-filling
- warning-filling
  .icon-warning-filling
- folder-filling
  .icon-folder-filling
- map-filling
  .icon-map-filling
- prompt-filling
  .icon-prompt-filling
- meh-filling
  .icon-meh-filling
- cry-filling
  .icon-cry-filling
- top-filling
  .icon-top-filling
- home-filling
  .icon-home-filling
- sorting
  .icon-sorting

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

- column-3
  #icon-3column
- column-4
  #icon-column-4
- add
  #icon-add
- add-circle
  #icon-add-circle
- adjust
  #icon-adjust
- arrow-up-circle
  #icon-arrow-up-circle
- arrow-right-circle
  #icon-arrow-right-circle
- arrow-down
  #icon-arrow-down
- ashbin
  #icon-ashbin
- arrow-right
  #icon-arrow-right
- browse
  #icon-browse
- bottom
  #icon-bottom
- back
  #icon-back
- bad
  #icon-bad
- arrow-double-left
  #icon-arrow-double-left
- arrow-left-circle
  #icon-arrow-left-circle
- arrow-double-right
  #icon-arrow-double-right
- caps-lock
  #icon-caps-lock
- camera
  #icon-camera
- chart-bar
  #icon-chart-bar
- attachment
  #icon-attachment
- code
  #icon-code
- close
  #icon-close
- check-item
  #icon-check-item
- calendar
  #icon-calendar
- comment
  #icon-comment
- column-vertical
  #icon-column-vertical
- column-horizontal
  #icon-column-horizontal
- complete
  #icon-complete
- chart-pie
  #icon-chart-pie
- cry
  #icon-cry
- customer-service
  #icon-customer-service
- delete
  #icon-delete
- direction-down
  #icon-direction-down
- copy
  #icon-copy
- cut
  #icon-cut
- data-view
  #icon-data-view
- direction-down-circle
  #icon-direction-down-circle
- direction-right
  #icon-direction-right
- direction-up
  #icon-direction-up
- discount
  #icon-discount
- direction-left
  #icon-direction-left
- download
  #icon-download
- electronics
  #icon-electronics
- drag
  #icon-drag
- elipsis
  #icon-elipsis
- export
  #icon-export
- explain
  #icon-explain
- edit
  #icon-edit
- eye-close
  #icon-eye-close
- email
  #icon-email
- error
  #icon-error
- favorite
  #icon-favorite
- file-common
  #icon-file-common
- file-delete
  #icon-file-delete
- file-add
  #icon-file-add
- film
  #icon-film
- fabulous
  #icon-fabulous
- file
  #icon-file
- folder-close
  #icon-folder-close
- filter
  #icon-filter
- good
  #icon-good
- hide
  #icon-hide
- home
  #icon-home
- history
  #icon-history
- file-open
  #icon-file-open
- forward
  #icon-forward
- import
  #icon-import
- image-text
  #icon-image-text
- keyboard-26
  #icon-keyboard-26
- keyboard-9
  #icon-keyboard-9
- link
  #icon-link
- layout
  #icon-layout
- fullscreen-shrink
  #icon-fullscreen-shrink
- layers
  #icon-layers
- lock
  #icon-lock
- fullscreen-expand
  #icon-fullscreen-expand
- map
  #icon-map
- meh
  #icon-meh
- menu
  #icon-menu
- loading
  #icon-loading
- help
  #icon-help
- minus-circle
  #icon-minus-circle
- modular
  #icon-modular
- notification
  #icon-notification
- mic
  #icon-mic
- more
  #icon-more
- pad
  #icon-pad
- operation
  #icon-operation
- play
  #icon-play
- print
  #icon-print
- mobile-phone
  #icon-mobile-phone
- minus
  #icon-minus
- navigation
  #icon-navigation
- pdf
  #icon-pdf
- prompt
  #icon-prompt
- move
  #icon-move
- refresh
  #icon-refresh
- run-up
  #icon-run-up
- picture
  #icon-picture
- run-in
  #icon-run-in
- pin
  #icon-pin
- save
  #icon-save
- search
  #icon-search
- share
  #icon-share
- scanning
  #icon-scanning
- security
  #icon-security
- sign-out
  #icon-sign-out
- select
  #icon-select
- stop
  #icon-stop
- success
  #icon-success
- smile
  #icon-smile
- switch
  #icon-switch
- setting
  #icon-setting
- survey
  #icon-survey
- task
  #icon-task
- skip
  #icon-skip
- text
  #icon-text
- time
  #icon-time
- telephone-out
  #icon-telephone-out
- toggle-left
  #icon-toggle-left
- toggle-right
  #icon-toggle-right
- telephone
  #icon-telephone
- top
  #icon-top
- unlock
  #icon-unlock
- user
  #icon-user
- upload
  #icon-upload
- work
  #icon-work
- training
  #icon-training
- warning
  #icon-warning
- zoom-in
  #icon-zoom-in
- zoom-out
  #icon-zoom-out
- add-bold
  #icon-add-bold
- arrow-left-bold
  #icon-arrow-left-bold
- arrow-up-bold
  #icon-arrow-up-bold
- close-bold
  #icon-close-bold
- arrow-down-bold
  #icon-arrow-down-bold
- minus-bold
  #icon-minus-bold
- arrow-right-bold
  #icon-arrow-right-bold
- select-bold
  #icon-select-bold
- arrow-up-filling
  #icon-arrow-up-filling
- arrow-down-filling
  #icon-arrow-down-filling
- arrow-left-filling
  #icon-arrow-left-filling
- arrow-right-filling
  #icon-arrow-right-filling
- caps-unlock-filling
  #icon-caps-unlock-filling
- comment-filling
  #icon-comment-filling
- check-item-filling
  #icon-check-item-filling
- clock-filling
  #icon-clock-filling
- delete-filling
  #icon-delete-filling
- decline-filling
  #icon-decline-filling
- dynamic-filling
  #icon-dynamic-filling
- intermediate-filling
  #icon-intermediate-filling
- favorite-filling
  #icon-favorite-filling
- layout-filling
  #icon-layout-filling
- help-filling
  #icon-help-filling
- history-filling
  #icon-history-filling
- filter-filling
  #icon-filter-filling
- file-common-filling
  #icon-file-common-filling
- news-filling
  #icon-news-filling
- edit-filling
  #icon-edit-filling
- fullscreen-expand-filling
  #icon-fullscreen-expand-filling
- smile-filling
  #icon-smile-filling
- rise-filling
  #icon-rise-filling
- picture-filling
  #icon-picture-filling
- notification-filling
  #icon-notification-filling
- user-filling
  #icon-user-filling
- setting-filling
  #icon-setting-filling
- switch-filling
  #icon-switch-filling
- work-filling
  #icon-work-filling
- task-filling
  #icon-task-filling
- success-filling
  #icon-success-filling
- warning-filling
  #icon-warning-filling
- folder-filling
  #icon-folder-filling
- map-filling
  #icon-map-filling
- prompt-filling
  #icon-prompt-filling
- meh-filling
  #icon-meh-filling
- cry-filling
  #icon-cry-filling
- top-filling
  #icon-top-filling
- home-filling
  #icon-home-filling
- sorting
  #icon-sorting

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