# 

- 
  favor_fill
  &#xe64b;
- 
  favor
  &#xe64c;
- 
  comment
  &#xe667;
- 
  like_fill
  &#xe668;
- 
  like
  &#xe669;
- 
  message
  &#xe6bc;
- 󰁪
  天猫提示-提醒
  &#xf006a;
- 
  iconfont-iconfontleijipingjia
  &#xe612;
- 
  iconfont-shoucang
  &#xe621;
- 
  iconfont-start
  &#xe623;
- 
  收藏
  &#xe603;
- 
  收藏-填充
  &#xe604;
- 
  喜欢
  &#xe605;
- 
  喜欢-填充
  &#xe606;
- 
  相机
  &#xe618;
- 
  3.0-相机
  &#xe6aa;
- 
  heart-o
  &#xe85b;
- 
  heart
  &#xe85c;
- 
  comment
  &#xe6f3;
- 
  消息
  &#xe86f;
- 
  喜欢2
  &#xe870;
- 
  喜欢
  &#xe871;
- 
  评论
  &#xe891;
- 
  相机
  &#xe638;
- 
  通知消息
  &#xe615;
- 
  icon_ding_ding_fill
  &#xeba6;
- 
  icon_ping
  &#xebad;
- 
  message
  &#xe635;
- 
  like
  &#xe657;
- 
  like_filled
  &#xe658;
- 
  star
  &#xe659;
- 
  star_filled
  &#xe65a;
- 
  通知
  &#xe63c;
- 
  编辑
  &#xe8ac;
- 
  话题
  &#xe8b1;
- 
  朋友圈
  &#xe8b4;
- 
  删除
  &#xe8b6;
- 
  设置
  &#xe8b7;
- 
  讨论区
  &#xe8b9;
- 
  相机
  &#xe8c7;
- 
  all
  &#xe6ef;
- 
  editor
  &#xe6f6;
- 
  export services
  &#xe702;
- 
  favorites-fill
  &#xe721;
- 
  ashbin
  &#xe744;
- 
  browse
  &#xe745;
- 
  atm-away
  &#xe746;
- 
  clock
  &#xe74b;
- 
  Customer management
  &#xe74c;
- 
  editor
  &#xe74d;
- 
  earth
  &#xe74e;
- 
  good
  &#xe753;
- 
  user center
  &#xe773;
- 
  all-fill
  &#xe777;
- 
  atm-fill
  &#xe779;
- 
  camera switching-fill
  &#xe77a;
- 
  camera-fill
  &#xe77b;
- 
  good-fill
  &#xe780;
- 
  pin-fill
  &#xe788;
- 
  remind-fill
  &#xe78a;
- 
  set
  &#xe78e;
- 
  collection
  &#xe79d;
- 
  message center-fill
  &#xe7a2;
- 
  camera
  &#xe7b2;
- 
  arrow-down
  &#xe7b3;
- 
  favorites
  &#xe7b4;
- 
  search
  &#xe7b5;
- 
  user center
  &#xe7b6;

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

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

    <i class="iconfont">&#x33;</i>

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

- favor_fill
  .icon-favorfill
- favor
  .icon-favor
- comment
  .icon-comment
- like_fill
  .icon-likefill
- like
  .icon-like
- message
  .icon-message
- 天猫提示-提醒
  .icon-tixing
- iconfont-iconfontleijipingjia
  .icon-iconfonticonfontleijipingjia
- iconfont-shoucang
  .icon-iconfontshoucang
- iconfont-start
  .icon-iconfontstart
- 收藏
  .icon-fav-1
- 收藏-填充
  .icon-fav
- 喜欢
  .icon-like-1
- 喜欢-填充
  .icon-like1
- 相机
  .icon-camera_full
- 3.0-相机
  .icon-xiangji
- heart-o
  .icon-heart-o
- heart
  .icon-heart
- comment
  .icon-comment1
- 消息
  .icon-xiaoxi
- 喜欢2
  .icon-xihuan
- 喜欢
  .icon-xihuan1
- 评论
  .icon-pinglun
- 相机
  .icon-tianchongxing-
- 通知消息
  .icon-tongzhixiaoxi
- icon_ding_ding_fill
  .icon-icon_ding_ding_fill
- icon_ping
  .icon-icon_ping
- message
  .icon-icon-test
- like
  .icon-icon-test1
- like_filled
  .icon-icon-test2
- star
  .icon-icon-test3
- star_filled
  .icon-icon-test4
- 通知
  .icon-tongzhi
- 编辑
  .icon-bianji
- 话题
  .icon-huati
- 朋友圈
  .icon-pengyouquan
- 删除
  .icon-shanchu
- 设置
  .icon-shezhi
- 讨论区
  .icon-taolunqu
- 相机
  .icon-xiangji1
- all
  .icon-all
- editor
  .icon-editor
- export services
  .icon-Exportservices
- favorites-fill
  .icon-favorites-fill
- ashbin
  .icon-ashbin
- browse
  .icon-browse
- atm-away
  .icon-atm-away
- clock
  .icon-clock
- Customer management
  .icon-Customermanagement
- editor
  .icon-editor1
- earth
  .icon-earth
- good
  .icon-good
- user center
  .icon-usercenter
- all-fill
  .icon-all-fill
- atm-fill
  .icon-atm-fill
- camera switching-fill
  .icon-cameraswitching-fill
- camera-fill
  .icon-camera-fill
- good-fill
  .icon-good-fill
- pin-fill
  .icon-pin-fill
- remind-fill
  .icon-remind-fill
- set
  .icon-set
- collection
  .icon-collection
- message center-fill
  .icon-messagecenter-fill
- camera
  .icon-camera
- arrow-down
  .icon-arrow-down
- favorites
  .icon-favorites
- search
  .icon-search
- user center
  .icon-usercenter1

## font-class 引用

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

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

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

使用步骤如下：

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

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

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

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

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

- favor_fill
  #icon-favorfill
- favor
  #icon-favor
- comment
  #icon-comment
- like_fill
  #icon-likefill
- like
  #icon-like
- message
  #icon-message
- 天猫提示-提醒
  #icon-tixing
- iconfont-iconfontleijipingjia
  #icon-iconfonticonfontleijipingjia
- iconfont-shoucang
  #icon-iconfontshoucang
- iconfont-start
  #icon-iconfontstart
- 收藏
  #icon-fav-1
- 收藏-填充
  #icon-fav
- 喜欢
  #icon-like-1
- 喜欢-填充
  #icon-like1
- 相机
  #icon-camera_full
- 3.0-相机
  #icon-xiangji
- heart-o
  #icon-heart-o
- heart
  #icon-heart
- comment
  #icon-comment1
- 消息
  #icon-xiaoxi
- 喜欢2
  #icon-xihuan
- 喜欢
  #icon-xihuan1
- 评论
  #icon-pinglun
- 相机
  #icon-tianchongxing-
- 通知消息
  #icon-tongzhixiaoxi
- icon_ding_ding_fill
  #icon-icon_ding_ding_fill
- icon_ping
  #icon-icon_ping
- message
  #icon-icon-test
- like
  #icon-icon-test1
- like_filled
  #icon-icon-test2
- star
  #icon-icon-test3
- star_filled
  #icon-icon-test4
- 通知
  #icon-tongzhi
- 编辑
  #icon-bianji
- 话题
  #icon-huati
- 朋友圈
  #icon-pengyouquan
- 删除
  #icon-shanchu
- 设置
  #icon-shezhi
- 讨论区
  #icon-taolunqu
- 相机
  #icon-xiangji1
- all
  #icon-all
- editor
  #icon-editor
- export services
  #icon-Exportservices
- favorites-fill
  #icon-favorites-fill
- ashbin
  #icon-ashbin
- browse
  #icon-browse
- atm-away
  #icon-atm-away
- clock
  #icon-clock
- Customer management
  #icon-Customermanagement
- editor
  #icon-editor1
- earth
  #icon-earth
- good
  #icon-good
- user center
  #icon-usercenter
- all-fill
  #icon-all-fill
- atm-fill
  #icon-atm-fill
- camera switching-fill
  #icon-cameraswitching-fill
- camera-fill
  #icon-camera-fill
- good-fill
  #icon-good-fill
- pin-fill
  #icon-pin-fill
- remind-fill
  #icon-remind-fill
- set
  #icon-set
- collection
  #icon-collection
- message center-fill
  #icon-messagecenter-fill
- camera
  #icon-camera
- arrow-down
  #icon-arrow-down
- favorites
  #icon-favorites
- search
  #icon-search
- user center
  #icon-usercenter1

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