# 

- 
  check
  &#xe645;
- 
  close
  &#xe646;
- 
  emoji
  &#xe64a;
- 
  favor_fill
  &#xe64b;
- 
  favor
  &#xe64c;
- 
  loading
  &#xe64f;
- 
  location_fill
  &#xe650;
- 
  location
  &#xe651;
- 
  round_check_fill
  &#xe656;
- 
  round_check
  &#xe657;
- 
  round_close_fill
  &#xe658;
- 
  round_close
  &#xe659;
- 
  round_right_fill
  &#xe65a;
- 
  round_right
  &#xe65b;
- 
  search
  &#xe65c;
- 
  time_fill
  &#xe65e;
- 
  time
  &#xe65f;
- 
  unfold
  &#xe661;
- 
  warn_fill
  &#xe662;
- 
  warn
  &#xe663;
- 
  camera_fill
  &#xe664;
- 
  camera
  &#xe665;
- 
  comment_fill
  &#xe666;
- 
  comment
  &#xe667;
- 
  back
  &#xe679;
- 
  cascades
  &#xe67c;
- 
  list
  &#xe682;
- 
  more
  &#xe684;
- 
  scan
  &#xe689;
- 
  settings
  &#xe68a;
- 
  pic
  &#xe69b;
- 
  top
  &#xe69e;
- 
  pull_down
  &#xe69f;
- 
  pull_up
  &#xe6a0;
- 
  right
  &#xe6a3;
- 
  refresh
  &#xe6a4;
- 
  more_android
  &#xe6a5;
- 
  delete_fill
  &#xe6a6;
- 
  cart
  &#xe6af;
- 
  delete
  &#xe6b4;
- 
  home
  &#xe6b8;
- 
  cart_fill
  &#xe6b9;
- 
  home_fill
  &#xe6bb;
- 
  message
  &#xe6bc;
- 
  lock
  &#xe6c0;
- 
  unlock
  &#xe6c2;
- 
  square_check_fill
  &#xe6d4;
- 
  square
  &#xe6d5;
- 
  square_check
  &#xe6d6;
- 
  round
  &#xe6d7;
- 
  add
  &#xe6da;
- 
  fold
  &#xe6de;
- 
  info_fill
  &#xe6e4;
- 
  info
  &#xe6e5;
- 
  share
  &#xe6f3;
- 
  search_list
  &#xe6fe;
- 
  sort
  &#xe700;
- 
  down
  &#xe703;
- 
  mobile
  &#xe704;
- 
  mobile_fill
  &#xe705;
- 
  countdown_fill
  &#xe707;
- 
  countdown
  &#xe708;
- 
  keyboard
  &#xe71b;
- 
  pull_left
  &#xe71f;
- 
  pull_right
  &#xe720;
- 
  pic_fill
  &#xe72c;
- 
  refresh_arrow
  &#xe72d;
- 
  attention_fill
  &#xe73c;
- 
  attention
  &#xe73d;
- 
  tag_fill
  &#xe751;
- 
  tag
  &#xe752;
- 
  radio_box
  &#xe75b;
- 
  upload
  &#xe75d;
- 
  radio_box_fill
  &#xe763;
- 
  move
  &#xe768;
- 
  message_fill
  &#xe779;
- 
  my
  &#xe78b;
- 
  my_fill
  &#xe78c;
- 
  triangle_down_fill
  &#xe79b;
- 
  triangle_up_fill
  &#xe79c;
- 
  loading
  &#xe61f;
- 
  emoji_light
  &#xe7a1;
- 
  keyboard_light
  &#xe7a3;
- 
  sort_light
  &#xe7ad;
- 
  attention_forbid
  &#xe7b2;
- 
  attention_forbid_fill
  &#xe7b3;
- 
  pic_light
  &#xe7b7;
- 
  loading
  &#xe6a7;
- 
  usefull_fill
  &#xe7cf;
- 
  usefull
  &#xe7d0;
- 
  home_light
  &#xe7d5;
- 
  my_light
  &#xe7d6;
- 
  cart_light
  &#xe7d8;
- 
  home_fill_light
  &#xe7da;
- 
  cart_fill_light
  &#xe7db;
- 
  my_fill_light
  &#xe7dd;
- 
  search_light
  &#xe7e0;
- 
  scan_light
  &#xe7e1;
- 
  message_light
  &#xe7e3;
- 
  close_light
  &#xe7e4;
- 
  camera_light
  &#xe7ea;
- 
  refresh_light
  &#xe7ec;
- 
  back_light
  &#xe7ed;
- 
  share_light
  &#xe7ee;
- 
  comment_light
  &#xe7ef;
- 
  favor_light
  &#xe7f1;
- 
  comment_fill_light
  &#xe7f3;
- 
  more_android_light
  &#xe7f5;
- 
  more_light
  &#xe7f7;
- 
  message_fill_light
  &#xe803;
- 
  search_list_light
  &#xe806;
- 
  favor_fill_light
  &#xe80a;
- 
  delete_light
  &#xe80b;
- 
  back_android
  &#xe80c;
- 
  back_android_light
  &#xe80d;
- 
  down_light
  &#xe80e;
- 
  round_close_light
  &#xe80f;
- 
  round_close_fill_light
  &#xe810;
- 
  location_light
  &#xe819;
- 
  settings_light
  &#xe822;
- 
  Loading
  &#xe65d;
- 
  warn_light
  &#xe841;

## Unicode 引用

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

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

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

Unicode 使用步骤如下：

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

    @font-face {
      font-family: 'cd_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#cd_iconfont') format('svg');
    }

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

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

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

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

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

- check
  .icon-check
- close
  .icon-close
- emoji
  .icon-emoji
- favor_fill
  .icon-favorfill
- favor
  .icon-favor
- loading
  .icon-loading
- location_fill
  .icon-locationfill
- location
  .icon-location
- round_check_fill
  .icon-roundcheckfill
- round_check
  .icon-roundcheck
- round_close_fill
  .icon-roundclosefill
- round_close
  .icon-roundclose
- round_right_fill
  .icon-roundrightfill
- round_right
  .icon-roundright
- search
  .icon-search
- time_fill
  .icon-timefill
- time
  .icon-time
- unfold
  .icon-unfold
- warn_fill
  .icon-warnfill
- warn
  .icon-warn
- camera_fill
  .icon-camerafill
- camera
  .icon-camera
- comment_fill
  .icon-commentfill
- comment
  .icon-comment
- back
  .icon-back
- cascades
  .icon-cascades
- list
  .icon-list
- more
  .icon-more
- scan
  .icon-scan
- settings
  .icon-settings
- pic
  .icon-pic
- top
  .icon-top
- pull_down
  .icon-pulldown
- pull_up
  .icon-pullup
- right
  .icon-right
- refresh
  .icon-refresh
- more_android
  .icon-moreandroid
- delete_fill
  .icon-deletefill
- cart
  .icon-cart
- delete
  .icon-delete
- home
  .icon-home
- cart_fill
  .icon-cartfill
- home_fill
  .icon-homefill
- message
  .icon-message
- lock
  .icon-lock
- unlock
  .icon-unlock
- square_check_fill
  .icon-squarecheckfill
- square
  .icon-square
- square_check
  .icon-squarecheck
- round
  .icon-round
- add
  .icon-add
- fold
  .icon-fold
- info_fill
  .icon-infofill
- info
  .icon-info
- share
  .icon-share
- search_list
  .icon-searchlist
- sort
  .icon-sort
- down
  .icon-down
- mobile
  .icon-mobile
- mobile_fill
  .icon-mobilefill
- countdown_fill
  .icon-countdownfill
- countdown
  .icon-countdown
- keyboard
  .icon-keyboard
- pull_left
  .icon-pullleft
- pull_right
  .icon-pullright
- pic_fill
  .icon-picfill
- refresh_arrow
  .icon-refresharrow
- attention_fill
  .icon-attentionfill
- attention
  .icon-attention
- tag_fill
  .icon-tagfill
- tag
  .icon-tag
- radio_box
  .icon-radiobox
- upload
  .icon-upload
- radio_box_fill
  .icon-radioboxfill
- move
  .icon-move
- message_fill
  .icon-messagefill
- my
  .icon-my
- my_fill
  .icon-myfill
- triangle_down_fill
  .icon-triangledownfill
- triangle_up_fill
  .icon-triangleupfill
- loading
  .icon-loading1
- emoji_light
  .icon-emojilight
- keyboard_light
  .icon-keyboardlight
- sort_light
  .icon-sortlight
- attention_forbid
  .icon-attentionforbid
- attention_forbid_fill
  .icon-attentionforbidfill
- pic_light
  .icon-piclight
- loading
  .icon-loadBrush
- usefull_fill
  .icon-usefullfill
- usefull
  .icon-usefull
- home_light
  .icon-home_light
- my_light
  .icon-my_light
- cart_light
  .icon-cart_light
- home_fill_light
  .icon-home_fill_light
- cart_fill_light
  .icon-cart_fill_light
- my_fill_light
  .icon-my_fill_light
- search_light
  .icon-search_light
- scan_light
  .icon-scan_light
- message_light
  .icon-message_light
- close_light
  .icon-close_light
- camera_light
  .icon-camera_light
- refresh_light
  .icon-refresh_light
- back_light
  .icon-back_light
- share_light
  .icon-share_light
- comment_light
  .icon-comment_light
- favor_light
  .icon-favor_light
- comment_fill_light
  .icon-comment_fill_light
- more_android_light
  .icon-more_android_light
- more_light
  .icon-more_light
- message_fill_light
  .icon-message_fill_light
- search_list_light
  .icon-search_list_light
- favor_fill_light
  .icon-favor_fill_light
- delete_light
  .icon-delete_light
- back_android
  .icon-back_android
- back_android_light
  .icon-back_android_light
- down_light
  .icon-down_light
- round_close_light
  .icon-round_close_light
- round_close_fill_light
  .icon-round_close_fill_light
- location_light
  .icon-location_light
- settings_light
  .icon-settings_light
- Loading
  .icon-Loading
- warn_light
  .icon-warn_light

## font-class 引用

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

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

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

使用步骤如下：

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

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

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

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

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

- check
  #icon-check
- close
  #icon-close
- emoji
  #icon-emoji
- favor_fill
  #icon-favorfill
- favor
  #icon-favor
- loading
  #icon-loading
- location_fill
  #icon-locationfill
- location
  #icon-location
- round_check_fill
  #icon-roundcheckfill
- round_check
  #icon-roundcheck
- round_close_fill
  #icon-roundclosefill
- round_close
  #icon-roundclose
- round_right_fill
  #icon-roundrightfill
- round_right
  #icon-roundright
- search
  #icon-search
- time_fill
  #icon-timefill
- time
  #icon-time
- unfold
  #icon-unfold
- warn_fill
  #icon-warnfill
- warn
  #icon-warn
- camera_fill
  #icon-camerafill
- camera
  #icon-camera
- comment_fill
  #icon-commentfill
- comment
  #icon-comment
- back
  #icon-back
- cascades
  #icon-cascades
- list
  #icon-list
- more
  #icon-more
- scan
  #icon-scan
- settings
  #icon-settings
- pic
  #icon-pic
- top
  #icon-top
- pull_down
  #icon-pulldown
- pull_up
  #icon-pullup
- right
  #icon-right
- refresh
  #icon-refresh
- more_android
  #icon-moreandroid
- delete_fill
  #icon-deletefill
- cart
  #icon-cart
- delete
  #icon-delete
- home
  #icon-home
- cart_fill
  #icon-cartfill
- home_fill
  #icon-homefill
- message
  #icon-message
- lock
  #icon-lock
- unlock
  #icon-unlock
- square_check_fill
  #icon-squarecheckfill
- square
  #icon-square
- square_check
  #icon-squarecheck
- round
  #icon-round
- add
  #icon-add
- fold
  #icon-fold
- info_fill
  #icon-infofill
- info
  #icon-info
- share
  #icon-share
- search_list
  #icon-searchlist
- sort
  #icon-sort
- down
  #icon-down
- mobile
  #icon-mobile
- mobile_fill
  #icon-mobilefill
- countdown_fill
  #icon-countdownfill
- countdown
  #icon-countdown
- keyboard
  #icon-keyboard
- pull_left
  #icon-pullleft
- pull_right
  #icon-pullright
- pic_fill
  #icon-picfill
- refresh_arrow
  #icon-refresharrow
- attention_fill
  #icon-attentionfill
- attention
  #icon-attention
- tag_fill
  #icon-tagfill
- tag
  #icon-tag
- radio_box
  #icon-radiobox
- upload
  #icon-upload
- radio_box_fill
  #icon-radioboxfill
- move
  #icon-move
- message_fill
  #icon-messagefill
- my
  #icon-my
- my_fill
  #icon-myfill
- triangle_down_fill
  #icon-triangledownfill
- triangle_up_fill
  #icon-triangleupfill
- loading
  #icon-loading1
- emoji_light
  #icon-emojilight
- keyboard_light
  #icon-keyboardlight
- sort_light
  #icon-sortlight
- attention_forbid
  #icon-attentionforbid
- attention_forbid_fill
  #icon-attentionforbidfill
- pic_light
  #icon-piclight
- loading
  #icon-loadBrush
- usefull_fill
  #icon-usefullfill
- usefull
  #icon-usefull
- home_light
  #icon-home_light
- my_light
  #icon-my_light
- cart_light
  #icon-cart_light
- home_fill_light
  #icon-home_fill_light
- cart_fill_light
  #icon-cart_fill_light
- my_fill_light
  #icon-my_fill_light
- search_light
  #icon-search_light
- scan_light
  #icon-scan_light
- message_light
  #icon-message_light
- close_light
  #icon-close_light
- camera_light
  #icon-camera_light
- refresh_light
  #icon-refresh_light
- back_light
  #icon-back_light
- share_light
  #icon-share_light
- comment_light
  #icon-comment_light
- favor_light
  #icon-favor_light
- comment_fill_light
  #icon-comment_fill_light
- more_android_light
  #icon-more_android_light
- more_light
  #icon-more_light
- message_fill_light
  #icon-message_fill_light
- search_list_light
  #icon-search_list_light
- favor_fill_light
  #icon-favor_fill_light
- delete_light
  #icon-delete_light
- back_android
  #icon-back_android
- back_android_light
  #icon-back_android_light
- down_light
  #icon-down_light
- round_close_light
  #icon-round_close_light
- round_close_fill_light
  #icon-round_close_fill_light
- location_light
  #icon-location_light
- settings_light
  #icon-settings_light
- Loading
  #icon-Loading
- warn_light
  #icon-warn_light

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