#

- 
  material
  &#xe6c1;
- 
  excel
  &#xe6bb;
- 
  video-linear
  &#xe6b8;
- 
  microphone-linear
  &#xe6b9;
- 
  file-linear
  &#xe6ba;
- 
  like
  &#xe6b7;
- 
  ps
  &#xe6b6;
- 
  material
  &#xe6b5;
- 
  singout
  &#xe6b3;
- 
  reward
  &#xe6b0;
- 
  integral
  &#xe6b1;
- 
  wallet
  &#xe6b2;
- 
  department
  &#xe6aa;
- 
  Team Users
  &#xe6ab;
- 
  waste basket
  &#xe6ac;
- 
  position
  &#xe6ad;
- 
  Permission
  &#xe6ae;
- 
  edit
  &#xe6af;
- 
  bind
  &#xe6a8;
- 
  Untie
  &#xe6a9;
- 
  personal
  &#xe6a7;
- 
  Finance
  &#xe69f;
- 
  revise
  &#xe6a0;
- 
  history
  &#xe6a3;
- 
  team
  &#xe6a4;
- 
  del
  &#xe69d;
- 
  selected2
  &#xe785;
- 
  left
  &#xe787;
- 
  ICON
  &#xe78a;
- 
  share
  &#xe772;
- 
  钢笔
  &#xe66f;
- 
  钢笔2
  &#xe670;
- 
  icon+
  &#xe757;
- 
  icon-
  &#xe758;
- 
  tianxiexiang
  &#xe756;
- 
  editor
  &#xe755;
- 
  biaodian
  &#xe74f;
- 
  done
  &#xe750;
- 
  location
  &#xe751;
- 
  location2
  &#xe752;
- 
  保存
  &#xe6a6;
- 
  calendar-edit
  &#xe6a5;
- 
  添加
  &#xe6a1;
- 
  预览
  &#xe69b;
- 
  新增
  &#xe69a;
- 
  投票
  &#xe68d;
- 
  评测
  &#xe68e;
- 
  两端对齐
  &#xe693;
- 
  编辑
  &#xe685;
- 
  高级表单
  &#xe682;
- 
  Questionnaire
  &#xe684;
- 
  diamond
  &#xe74c;
- 
  编组
  &#xe687;
- 
  upload-image
  &#xe749;
- 
  upload
  &#xe602;
- 
  shop2
  &#xe67e;
- 
  threeRows
  &#xe67c;
- 
  分享
  &#xe67b;
- 
  pdf
  &#xe601;
- 
  编组 18
  &#xe600;
- 
  right (3)
  &#xe677;
- 
  right (2)
  &#xe676;
- 
  shoucang
  &#xe675;
- 
  wenzi-zhidi
  &#xe673;
- 
  wenzi-zhiding
  &#xe674;
- 
  wenzi-cuizhi
  &#xe671;
- 
  wenzi-shuiping
  &#xe672;
- 
  icon-toumin
  &#xe66d;
- 
  icon-huabufangda
  &#xe66e;
- 
  wenzi-judi
  &#xe667;
- 
  wenzi-chuizhijuzhong
  &#xe668;
- 
  wenzi-juzhong
  &#xe669;
- 
  wenzi-juding
  &#xe66a;
- 
  wenzi-juyou
  &#xe66b;
- 
  wenzi-juzuo
  &#xe66c;
- 
  icon-shang
  &#xe65b;
- 
  icon-suo
  &#xe65c;
- 
  icon-shuipingjingxiang
  &#xe65d;
- 
  icon-xia
  &#xe65e;
- 
  wenzi-jiachu
  &#xe65f;
- 
  icon-fuzhi
  &#xe660;
- 
  wenzi-xieti
  &#xe661;
- 
  icon-zhiding
  &#xe662;
- 
  wenzi-shanchuxian
  &#xe663;
- 
  icon-lajitong
  &#xe664;
- 
  wenzi-xiahuaxian
  &#xe665;
- 
  icon-chuizhijingxiang
  &#xe666;
- 
  icon-guangbi
  &#xe657;
- 
  icon-fangda
  &#xe658;
- 
  icon-fanhui
  &#xe656;
- 
  pad
  &#xe652;
- 
  book
  &#xe653;
- 
  pc
  &#xe654;
- 
  phone
  &#xe655;
- 
  gongjulan-xinzeng-wenzi
  &#xe650;
- 
  gongjulan-xinzeng-chatu
  &#xe651;
- 
  baojin
  &#xe643;
- 
  gongjulan-juzhong
  &#xe644;
- 
  gongjulan-shangyibu
  &#xe645;
- 
  gongjulan-daoru
  &#xe646;
- 
  gongjulan-shangyiceng
  &#xe647;
- 
  gongjulan-youduiqi
  &#xe649;
- 
  gongjulan-xiayiceng
  &#xe64b;
- 
  gongjulan-xiayibu
  &#xe64c;
- 
  vip
  &#xe64d;
- 
  gongjulan-yulan
  &#xe64e;
- 
  gongjulan-zuoduiqi
  &#xe64f;
- 
  tubiao-zhuzhang
  &#xe63f;
- 
  tubiao-sandian
  &#xe640;
- 
  tubiao-tuxian
  &#xe641;
- 
  tubiao-bingtu
  &#xe642;
- 
  toupiao-timu
  &#xe63d;
- 
  toupiao-luojiti
  &#xe63e;
- 
  biaodan-danxuan
  &#xe62e;
- 
  biaodan-fengefu
  &#xe62f;
- 
  biaodan-duoxuan
  &#xe630;
- 
  biaodan-lianjie
  &#xe631;
- 
  biaodan-jine
  &#xe632;
- 
  biaodan-shenfenzheng
  &#xe633;
- 
  biaodan-youxiang
  &#xe634;
- 
  biaodan-danhang
  &#xe635;
- 
  biaodan-duohang
  &#xe636;
- 
  biaodan-shouji
  &#xe637;
- 
  biaodan-riqi
  &#xe638;
- 
  biaodan-xiala
  &#xe639;
- 
  biaodan-wenben
  &#xe63a;
- 
  yaoyiyao
  &#xe627;
- 
  zajindan2
  &#xe628;
- 
  manghe
  &#xe629;
- 
  zhuanpan
  &#xe62a;
- 
  zajindan
  &#xe62b;
- 
  zhuanzhuanle
  &#xe62c;
- 
  paomadeng
  &#xe62d;
- 
  TUBIAO
  &#xe621;
- 
  JIELONG
  &#xe622;
- 
  ERWEIMA
  &#xe624;
- 
  TOUPIAO
  &#xe625;
- 
  SHANGPING
  &#xe626;
- 
  muban
  &#xe61a;
- 
  kefu
  &#xe61b;
- 
  shezhi
  &#xe61c;
- 
  zhuti
  &#xe61d;
- 
  zujian
  &#xe61e;
- 
  wenan
  &#xe61f;
- 
  toutu
  &#xe620;
- 
  loudou-fenxi
  &#xe617;
- 
  suju-fenxi
  &#xe618;
- 
  dianji-fenxi
  &#xe619;
- 
  zhenghefuwu
  &#xe616;
- 
  haibaosheji
  &#xe615;
- 
  huodongzhongxin
  &#xe60b;
- 
  sousuo
  &#xe60c;
- 
  shouyifenxi
  &#xe60e;
- 
  wodehaibao
  &#xe611;
- 
  zhutizhongxin
  &#xe612;
- 
  tongzhi
  &#xe610;
- 
  bangzhu
  &#xe613;
- 
  xiatu
  &#xe614;

## Unicode 引用

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

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

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

Unicode 使用步骤如下：

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

    @font-face {
      font-family: 'xiatu-rich';
      src:
           url('data:application/x-font-woff2;charset=utf-8;base64, ') format('woff2'),
           url('iconfont.woff?t=1672733466480') format('woff'),
           url('iconfont.ttf?t=1672733466480') format('truetype');
    }

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

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

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

    <span class="xiatu-rich">&#x33;</span>

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

- material
  .xt-subtitlebeifen
- excel
  .xt-excel
- video-linear
  .xt-video-linear
- microphone-linear
  .xt-microphone-linear
- file-linear
  .xt-file-linear
- like
  .xt-like
- ps
  .xt-ps
- material
  .xt-material
- singout
  .xt-singout
- reward
  .xt-a-bianzu8
- integral
  .xt-a-bianzu11
- wallet
  .xt-wallet-minus
- department
  .xt-department
- Team Users
  .xt-a-TeamUsers
- waste basket
  .xt-a-wastebasket
- position
  .xt-position
- Permission
  .xt-Permission
- edit
  .xt-edit
- bind
  .xt-bind
- Untie
  .xt-Untie
- personal
  .xt-personal
- Finance
  .xt-Finance
- revise
  .xt-revise
- history
  .xt-history
- team
  .xt-team
- del
  .xt-del
- selected2
  .xt-selected2
- left
  .xt-left
- ICON
  .xt-icon
- share
  .xt-share
- 钢笔
  .xt-gangbi
- 钢笔2
  .xt-gangbi2
- icon+
  .xt-icon-plus
- icon-
  .xt-icon-minus
- tianxiexiang
  .xt-tianxiexiang
- editor
  .xt-editor
- biaodian
  .xt-biaodan
- done
  .xt-done
- location
  .xt-location
- location2
  .xt-location2
- 保存
  .xt-baocun
- calendar-edit
  .xt-calendar-edit
- 添加
  .xt-tianjia
- 预览
  .xt-yulan
- 新增
  .xt-xinzeng
- 投票
  .xt-toupiao
- 评测
  .xt-pingce
- 两端对齐
  .xt-juyoubeifen
- 编辑
  .xt-bianji
- 高级表单
  .xt-gaojibiaodan
- Questionnaire
  .xt-Questionnaire
- diamond
  .xt-diamond
- 编组
  .xt-bianzu
- upload-image
  .xt-upload-image
- upload
  .xt-upload
- shop2
  .xt-shop2
- threeRows
  .xt-loudou-fenxibeifen
- 分享
  .xt-fenxiang
- pdf
  .xt-a-bianzu1
- 编组 18
  .xt-a-bianzu18
- right (3)
  .xt-a-icngeneralarrowdarkright3
- right (2)
  .xt-a-icngeneralarrowdarkright2
- shoucang
  .xt-shoucang
- wenzi-zhidi
  .xt-wenzi-zhidi
- wenzi-zhiding
  .xt-wenzi-zhiding
- wenzi-cuizhi
  .xt-wenzi-cuizhi
- wenzi-shuiping
  .xt-wenzi-shuiping
- icon-toumin
  .xt-icon-toumin
- icon-huabufangda
  .xt-icon-huabufangda
- wenzi-judi
  .xt-wenzi-judi
- wenzi-chuizhijuzhong
  .xt-wenzi-chuizhijuzhong
- wenzi-juzhong
  .xt-wenzi-juzhong
- wenzi-juding
  .xt-wenzi-juding
- wenzi-juyou
  .xt-wenzi-juyou
- wenzi-juzuo
  .xt-wenzi-juzuo
- icon-shang
  .xt-icon-shang
- icon-suo
  .xt-icon-suo
- icon-shuipingjingxiang
  .xt-icon-shuipingjingxiang
- icon-xia
  .xt-icon-xia
- wenzi-jiachu
  .xt-wenzi-jiachu
- icon-fuzhi
  .xt-icon-fuzhi
- wenzi-xieti
  .xt-wenzi-xieti
- icon-zhiding
  .xt-icon-zhiding
- wenzi-shanchuxian
  .xt-wenzi-shanchuxian
- icon-lajitong
  .xt-icon-lajitong
- wenzi-xiahuaxian
  .xt-wenzi-xiahuaxian
- icon-chuizhijingxiang
  .xt-icon-chuizhijingxiang
- icon-guangbi
  .xt-icon-guangbi
- icon-fangda
  .xt-icon-fangda
- icon-fanhui
  .xt-icon-fanhui
- pad
  .xt-pad
- book
  .xt-book
- pc
  .xt-pc
- phone
  .xt-phone
- gongjulan-xinzeng-wenzi
  .xt-gongjulan-xinzeng-wenzi
- gongjulan-xinzeng-chatu
  .xt-gongjulan-xinzeng-chatu
- baojin
  .xt-baojin
- gongjulan-juzhong
  .xt-gongjulan-juzhong
- gongjulan-shangyibu
  .xt-gongjulan-shangyibu
- gongjulan-daoru
  .xt-gongjulan-daoru
- gongjulan-shangyiceng
  .xt-gongjulan-shangyiceng
- gongjulan-youduiqi
  .xt-gongjulan-youduiqi
- gongjulan-xiayiceng
  .xt-gongjulan-xiayiceng
- gongjulan-xiayibu
  .xt-gongjulan-xiayibu
- vip
  .xt-vip
- gongjulan-yulan
  .xt-gongjulan-yulan
- gongjulan-zuoduiqi
  .xt-gongjulan-zuoduiqi
- tubiao-zhuzhang
  .xt-tubiao-zhuzhang
- tubiao-sandian
  .xt-tubiao-sandian
- tubiao-tuxian
  .xt-tubiao-tuxian
- tubiao-bingtu
  .xt-tubiao-bingtu
- toupiao-timu
  .xt-toupiao-timu
- toupiao-luojiti
  .xt-toupiao-luojiti
- biaodan-danxuan
  .xt-biaodan-danxuan
- biaodan-fengefu
  .xt-biaodan-fengefu
- biaodan-duoxuan
  .xt-biaodan-duoxuan
- biaodan-lianjie
  .xt-biaodan-lianjie
- biaodan-jine
  .xt-biaodan-jine
- biaodan-shenfenzheng
  .xt-biaodan-shenfenzheng
- biaodan-youxiang
  .xt-biaodan-youxiang
- biaodan-danhang
  .xt-biaodan-danhang
- biaodan-duohang
  .xt-biaodan-duohang
- biaodan-shouji
  .xt-biaodan-shouji
- biaodan-riqi
  .xt-biaodan-riqi
- biaodan-xiala
  .xt-biaodan-xiala
- biaodan-wenben
  .xt-biaodan-wenben
- yaoyiyao
  .xt-yaoyiyao
- zajindan2
  .xt-zajindan2
- manghe
  .xt-manghe
- zhuanpan
  .xt-zhuanpan
- zajindan
  .xt-zajindan
- zhuanzhuanle
  .xt-zhuanzhuanle
- paomadeng
  .xt-paomadeng
- TUBIAO
  .xt-TUBIAO
- JIELONG
  .xt-JIELONG
- ERWEIMA
  .xt-ERWEIMA
- TOUPIAO
  .xt-TOUPIAO
- SHANGPING
  .xt-SHANGPING
- muban
  .xt-muban
- kefu
  .xt-kefu
- shezhi
  .xt-shezhi
- zhuti
  .xt-zhuti
- zujian
  .xt-zujian
- wenan
  .xt-wenan
- toutu
  .xt-toutu
- loudou-fenxi
  .xt-loudou-fenxi
- suju-fenxi
  .xt-suju-fenxi
- dianji-fenxi
  .xt-dianji-fenxi
- zhenghefuwu
  .xt-zhenghefuwu
- haibaosheji
  .xt-haibaosheji
- huodongzhongxin
  .xt-huodongzhongxin
- sousuo
  .xt-sousuo
- shouyifenxi
  .xt-shouyifenxi
- wodehaibao
  .xt-wodehaibao
- zhutizhongxin
  .xt-zhutizhongxin
- tongzhi
  .xt-tongzhi
- bangzhu
  .xt-bangzhu
- xiatu
  .xt-xiatu

## font-class 引用

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

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

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

使用步骤如下：

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

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

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

    <span class="xiatu-rich xt-xxx"></span>

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

- material
  #xt-subtitlebeifen
- excel
  #xt-excel
- video-linear
  #xt-video-linear
- microphone-linear
  #xt-microphone-linear
- file-linear
  #xt-file-linear
- like
  #xt-like
- ps
  #xt-ps
- material
  #xt-material
- singout
  #xt-singout
- reward
  #xt-a-bianzu8
- integral
  #xt-a-bianzu11
- wallet
  #xt-wallet-minus
- department
  #xt-department
- Team Users
  #xt-a-TeamUsers
- waste basket
  #xt-a-wastebasket
- position
  #xt-position
- Permission
  #xt-Permission
- edit
  #xt-edit
- bind
  #xt-bind
- Untie
  #xt-Untie
- personal
  #xt-personal
- Finance
  #xt-Finance
- revise
  #xt-revise
- history
  #xt-history
- team
  #xt-team
- del
  #xt-del
- selected2
  #xt-selected2
- left
  #xt-left
- ICON
  #xt-icon
- share
  #xt-share
- 钢笔
  #xt-gangbi
- 钢笔2
  #xt-gangbi2
- icon+
  #xt-icon-plus
- icon-
  #xt-icon-minus
- tianxiexiang
  #xt-tianxiexiang
- editor
  #xt-editor
- biaodian
  #xt-biaodan
- done
  #xt-done
- location
  #xt-location
- location2
  #xt-location2
- 保存
  #xt-baocun
- calendar-edit
  #xt-calendar-edit
- 添加
  #xt-tianjia
- 预览
  #xt-yulan
- 新增
  #xt-xinzeng
- 投票
  #xt-toupiao
- 评测
  #xt-pingce
- 两端对齐
  #xt-juyoubeifen
- 编辑
  #xt-bianji
- 高级表单
  #xt-gaojibiaodan
- Questionnaire
  #xt-Questionnaire
- diamond
  #xt-diamond
- 编组
  #xt-bianzu
- upload-image
  #xt-upload-image
- upload
  #xt-upload
- shop2
  #xt-shop2
- threeRows
  #xt-loudou-fenxibeifen
- 分享
  #xt-fenxiang
- pdf
  #xt-a-bianzu1
- 编组 18
  #xt-a-bianzu18
- right (3)
  #xt-a-icngeneralarrowdarkright3
- right (2)
  #xt-a-icngeneralarrowdarkright2
- shoucang
  #xt-shoucang
- wenzi-zhidi
  #xt-wenzi-zhidi
- wenzi-zhiding
  #xt-wenzi-zhiding
- wenzi-cuizhi
  #xt-wenzi-cuizhi
- wenzi-shuiping
  #xt-wenzi-shuiping
- icon-toumin
  #xt-icon-toumin
- icon-huabufangda
  #xt-icon-huabufangda
- wenzi-judi
  #xt-wenzi-judi
- wenzi-chuizhijuzhong
  #xt-wenzi-chuizhijuzhong
- wenzi-juzhong
  #xt-wenzi-juzhong
- wenzi-juding
  #xt-wenzi-juding
- wenzi-juyou
  #xt-wenzi-juyou
- wenzi-juzuo
  #xt-wenzi-juzuo
- icon-shang
  #xt-icon-shang
- icon-suo
  #xt-icon-suo
- icon-shuipingjingxiang
  #xt-icon-shuipingjingxiang
- icon-xia
  #xt-icon-xia
- wenzi-jiachu
  #xt-wenzi-jiachu
- icon-fuzhi
  #xt-icon-fuzhi
- wenzi-xieti
  #xt-wenzi-xieti
- icon-zhiding
  #xt-icon-zhiding
- wenzi-shanchuxian
  #xt-wenzi-shanchuxian
- icon-lajitong
  #xt-icon-lajitong
- wenzi-xiahuaxian
  #xt-wenzi-xiahuaxian
- icon-chuizhijingxiang
  #xt-icon-chuizhijingxiang
- icon-guangbi
  #xt-icon-guangbi
- icon-fangda
  #xt-icon-fangda
- icon-fanhui
  #xt-icon-fanhui
- pad
  #xt-pad
- book
  #xt-book
- pc
  #xt-pc
- phone
  #xt-phone
- gongjulan-xinzeng-wenzi
  #xt-gongjulan-xinzeng-wenzi
- gongjulan-xinzeng-chatu
  #xt-gongjulan-xinzeng-chatu
- baojin
  #xt-baojin
- gongjulan-juzhong
  #xt-gongjulan-juzhong
- gongjulan-shangyibu
  #xt-gongjulan-shangyibu
- gongjulan-daoru
  #xt-gongjulan-daoru
- gongjulan-shangyiceng
  #xt-gongjulan-shangyiceng
- gongjulan-youduiqi
  #xt-gongjulan-youduiqi
- gongjulan-xiayiceng
  #xt-gongjulan-xiayiceng
- gongjulan-xiayibu
  #xt-gongjulan-xiayibu
- vip
  #xt-vip
- gongjulan-yulan
  #xt-gongjulan-yulan
- gongjulan-zuoduiqi
  #xt-gongjulan-zuoduiqi
- tubiao-zhuzhang
  #xt-tubiao-zhuzhang
- tubiao-sandian
  #xt-tubiao-sandian
- tubiao-tuxian
  #xt-tubiao-tuxian
- tubiao-bingtu
  #xt-tubiao-bingtu
- toupiao-timu
  #xt-toupiao-timu
- toupiao-luojiti
  #xt-toupiao-luojiti
- biaodan-danxuan
  #xt-biaodan-danxuan
- biaodan-fengefu
  #xt-biaodan-fengefu
- biaodan-duoxuan
  #xt-biaodan-duoxuan
- biaodan-lianjie
  #xt-biaodan-lianjie
- biaodan-jine
  #xt-biaodan-jine
- biaodan-shenfenzheng
  #xt-biaodan-shenfenzheng
- biaodan-youxiang
  #xt-biaodan-youxiang
- biaodan-danhang
  #xt-biaodan-danhang
- biaodan-duohang
  #xt-biaodan-duohang
- biaodan-shouji
  #xt-biaodan-shouji
- biaodan-riqi
  #xt-biaodan-riqi
- biaodan-xiala
  #xt-biaodan-xiala
- biaodan-wenben
  #xt-biaodan-wenben
- yaoyiyao
  #xt-yaoyiyao
- zajindan2
  #xt-zajindan2
- manghe
  #xt-manghe
- zhuanpan
  #xt-zhuanpan
- zajindan
  #xt-zajindan
- zhuanzhuanle
  #xt-zhuanzhuanle
- paomadeng
  #xt-paomadeng
- TUBIAO
  #xt-TUBIAO
- JIELONG
  #xt-JIELONG
- ERWEIMA
  #xt-ERWEIMA
- TOUPIAO
  #xt-TOUPIAO
- SHANGPING
  #xt-SHANGPING
- muban
  #xt-muban
- kefu
  #xt-kefu
- shezhi
  #xt-shezhi
- zhuti
  #xt-zhuti
- zujian
  #xt-zujian
- wenan
  #xt-wenan
- toutu
  #xt-toutu
- loudou-fenxi
  #xt-loudou-fenxi
- suju-fenxi
  #xt-suju-fenxi
- dianji-fenxi
  #xt-dianji-fenxi
- zhenghefuwu
  #xt-zhenghefuwu
- haibaosheji
  #xt-haibaosheji
- huodongzhongxin
  #xt-huodongzhongxin
- sousuo
  #xt-sousuo
- shouyifenxi
  #xt-shouyifenxi
- wodehaibao
  #xt-wodehaibao
- zhutizhongxin
  #xt-zhutizhongxin
- tongzhi
  #xt-tongzhi
- bangzhu
  #xt-bangzhu
- xiatu
  #xt-xiatu

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