#

- 
  uploading_e57
  &#xe77f;
- 
  person_e
  &#xe775;
- 
  menu_format
  &#xe76f;
- 
  icon_share
  &#xe75d;
- 
  menu_copy
  &#xe75e;
- 
  swsd-v
  &#xe6c6;
- 
  swsd
  &#xe6c4;
- 
  menu_update
  &#xe6b8;
- 
  top
  &#xe6b7;
- 
  logo
  &#xe692;
- 
  more
  &#xe6b6;
- 
  shop_car
  &#xe6b5;
- 
  scene_c
  &#xe6b4;
- 
  international
  &#xe6b3;
- 
  next
  &#xe6b1;
- 
  back
  &#xe6b2;
- 
  logo-4dage-en
  &#xe6af;
- 
  logo-4dage-cn
  &#xe6b0;
- 
  share
  &#xe6ae;
- 
  unbind
  &#xe6aa;
- 
  show
  &#xe740;
- 
  file
  &#xe63c;
- 
  folder
  &#xe643;
- 
  icon-kfckfc
  &#xe630;
- 
  Facebook
  &#xe631;
- 
  play
  &#xe62f;
- 
  ar
  &#xe62b;
- 
  cloud
  &#xe62c;
- 
  sdk
  &#xe62d;
- 
  siwei
  &#xe62e;
- 
  link
  &#xe626;
- 
  QQ
  &#xe627;
- 
  weixin
  &#xe628;
- 
  weibo
  &#xe629;
- 
  new_folder
  &#xe618;
- 
  new_camera
  &#xe616;
- 
  menu_cooperation
  &#xe615;
- 
  phone
  &#xe613;
- 
  mail
  &#xe614;
- 
  del
  &#xe612;
- 
  mall
  &#xe60d;
- 
  look_flatten
  &#xe697;
- 
  look_list
  &#xe699;
- 
  look_date
  &#xe69a;
- 
  look_position
  &#xe69b;
- 
  look_like
  &#xe69c;
- 
  look_share
  &#xe69d;
- 
  look_watch
  &#xe69e;
- 
  look_people
  &#xe69f;
- 
  download
  &#xe685;
- 
  list_delete
  &#xe780;
- 
  vip_wrong
  &#xe682;
- 
  vip_right
  &#xe683;
- 
  menu_rename
  &#xe60f;
- 
  menu_panorama
  &#xe610;
- 
  menu_move
  &#xe611;
- 
  view_screen
  &#xe609;
- 
  data_time
  &#xe60c;
- 
  folder_bg
  &#xe75c;
- 
  arrow
  &#xe781;
- 
  arrow
  &#xe744;
- 
  folder
  &#xe745;
- 
  address
  &#xe746;
- 
  cam_cloud
  &#xe747;
- 
  list_menu
  &#xe748;
- 
  choose
  &#xe749;
- 
  mail
  &#xe74a;
- 
  nav_order
  &#xe74b;
- 
  preview
  &#xe74c;
- 
  nav_cam
  &#xe74d;
- 
  phone
  &#xe74e;
- 
  nav_scene
  &#xe74f;
- 
  plus
  &#xe750;
- 
  nav_my
  &#xe751;
- 
  nav_data
  &#xe752;
- 
  search
  &#xe753;
- 
  reduce
  &#xe754;
- 
  share_link
  &#xe755;
- 
  register_help
  &#xe756;
- 
  register_agreement
  &#xe757;
- 
  share_qq
  &#xe758;
- 
  share_wx
  &#xe759;
- 
  share_wb
  &#xe75a;
- 
  view_list
  &#xe75b;
- 
  main_list
  &#xe737;
- 
  main_grid
  &#xe738;
- 
  横标EN
  &#xe6a4;
- 
  确认
  &#xe695;
- 
  警示
  &#xe693;
- 
  密码不可见
  &#xe691;
- 
  密码可见
  &#xe690;
- 
  回顶页尖嘴
  &#xe68f;
- 
  logo
  &#xe71f;
- 
  新购物车
  &#xe68e;
- 
  对号
  &#xe68d;
- 
  叹号
  &#xe68c;
- 
  购物车
  &#xe68b;
- 
  首页公仔
  &#xe68a;
- 
  case_teamwork
  &#xe709;
- 
  case_hot
  &#xe704;
- 
  case_recommend
  &#xe705;
- 
  case_new
  &#xe706;
- 
  视频教学
  &#xe6bb;
- 
  ctmservice
  &#xe6ba;
- 
  6month
  &#xe6ad;
- 
  3month
  &#xe6ac;
- 
  year
  &#xe6ab;
- 
  month
  &#xe6a9;
- 
  vas
  &#xe6a8;
- 
  home
  &#xe6a7;
- 
  edit
  &#xe6a6;
- 
  choice
  &#xe6a5;
- 
  cloud
  &#xe698;
- 
  全部
  &#xe696;
- 
  _eye
  &#xe694;
- 
  forbid
  &#xe677;
- 
  close
  &#xe676;
- 
  发展机会
  &#xe675;
- 
  店面布置
  &#xe674;
- 
  宣传资料
  &#xe673;
- 
  专属客服
  &#xe672;
- 
  利润分成
  &#xe671;
- 
  经销商
  &#xe670;
- 
  保修条款
  &#xe66f;
- 
  箭头
  &#xe66e;
- 
  vip_false
  &#xe66b;
- 
  vip_true
  &#xe66d;
- 
  减号
  &#xe66a;
- 
  加号
  &#xe669;
- 
  与
  &#xe668;
- 
  shoppingcart
  &#xe667;
- 
  liulan
  &#xe666;
- 
  bianji
  &#xe665;
- 
  dianlang
  &#xe664;
- 
  3d
  &#xe663;
- 
  sfm
  &#xe662;
- 
  qiumu
  &#xe661;
- 
  haisi
  &#xe660;
- 
  sony
  &#xe65f;
- 
  kaiguan1
  &#xe65e;
- 
  kaiguan
  &#xe65d;
- 
  使用手册
  &#xe652;
- 
  shang
  &#xe65c;
- 
  xia
  &#xe65b;
- 
  yuandian
  &#xe65a;
- 
  8-sanwei
  &#xe601;
- 
  1
  &#xe649;
- 
  2
  &#xe64a;
- 
  3
  &#xe608;
- 
  4
  &#xe64c;
- 
  5
  &#xe64d;
- 
  lianxi
  &#xe64e;
- 
  kehu
  &#xe650;
- 
  meiti
  &#xe653;
- 
  yewu
  &#xe654;
- 
  8-xuanzhe
  &#xe655;
- 
  8-xuanzhe
  &#xe656;
- 
  zuo
  &#xe657;
- 
  you
  &#xe659;
- 
  8-renren
  &#xe64f;
- 
  8-AI
  &#xe651;
- 
  空间定位
  &#xe648;
- 
  空间建模
  &#xe646;
- 
  空间展示
  &#xe645;
- 
  使用教程
  &#xe642;
- 
  服务条款
  &#xe641;
- 
  维修服务
  &#xe640;
- 
  app下载
  &#xe63f;
- 
  常见问题
  &#xe63e;
- 
  行业-房地产
  &#xe63b;
- 
  行业-博物馆
  &#xe63a;
- 
  行业-工业
  &#xe639;
- 
  行业-电商
  &#xe637;
- 
  行业-餐饮
  &#xe636;
- 
  行业-app
  &#xe635;
- 
  六目相机
  &#xe634;
- 
  二目相机
  &#xe633;
- 
  相机配件
  &#xe632;
- 
  关闭
  &#xe647;
- 
  关闭
  &#xe60b;
- 
  4dkk
  &#xe605;
- 
  4dkk
  &#xe607;
- 
  抖音
  &#xe602;
- 
  chat
  &#xe603;
- 
  geren
  &#xe606;
- 
  新浪
  &#xe60a;
- 
  facebook
  &#xe62a;
- 
  提升
  &#xe604;
- 
  苹果
  &#xe658;
- 
  左箭头
  &#xe600;
- 
  微信
  &#xe64b;
- 
  ins
  &#xe63d;
- 
  搜索
  &#xe619;
- 
  安卓
  &#xe66c;
- 
  对
  &#xe61f;

## Unicode 引用

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

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

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

Unicode 使用步骤如下：

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

    @font-face {
      font-family: 'iconfont';
      src: url('iconfont.woff2?t=1739950179418') format('woff2'),
           url('iconfont.woff?t=1739950179418') format('woff'),
           url('iconfont.ttf?t=1739950179418') 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"。

- uploading_e57
  .icon-uploading_e57
- person_e
  .icon-person_e
- menu_format
  .icon-menu_format
- icon_share
  .icon-icon_share
- menu_copy
  .icon-menu_copy
- swsd-v
  .icon-swsd-v
- swsd
  .icon-swsd
- menu_update
  .icon-menu_update
- top
  .icon-top
- logo
  .icon-logo1
- more
  .icon-more
- shop_car
  .icon-shop_car
- scene_c
  .icon-scene_c
- international
  .icon-international
- next
  .icon-next
- back
  .icon-back
- logo-4dage-en
  .icon-logo-4dage-en
- logo-4dage-cn
  .icon-logo-4dage-cn
- share
  .icon-share
- unbind
  .icon-unbind
- show
  .icon-show
- file
  .icon-file
- folder
  .icon-folder1
- icon-kfckfc
  .icon-Twitter
- Facebook
  .icon-Facebook
- play
  .icon-play
- ar
  .icon-ar
- cloud
  .icon-cloud1
- sdk
  .icon-sdk
- siwei
  .icon-siwei
- link
  .icon-link
- QQ
  .icon-QQ
- weixin
  .icon-weixin1
- weibo
  .icon-weibo
- new_folder
  .icon-new_folder
- new_camera
  .icon-new_camera
- menu_cooperation
  .icon-menu_cooperation1
- phone
  .icon-phone1
- mail
  .icon-mail1
- del
  .icon-del
- mall
  .icon-mall
- look_flatten
  .icon-look_flatten
- look_list
  .icon-look_list
- look_date
  .icon-look_date
- look_position
  .icon-look_position
- look_like
  .icon-look_like
- look_share
  .icon-look_share
- look_watch
  .icon-look_watch
- look_people
  .icon-look_people
- download
  .icon-download
- list_delete
  .icon-list_delete
- vip_wrong
  .icon-vip_wrong
- vip_right
  .icon-vip_right
- menu_rename
  .icon-menu_rename
- menu_panorama
  .icon-menu_panorama
- menu_move
  .icon-menu_move
- view_screen
  .icon-view_screen
- data_time
  .icon-data_time
- folder_bg
  .icon-folder_bg
- arrow
  .icon-arrow-copy
- arrow
  .icon-arrow
- folder
  .icon-folder
- address
  .icon-address
- cam_cloud
  .icon-cam_cloud
- list_menu
  .icon-list_menu
- choose
  .icon-choose
- mail
  .icon-mail
- nav_order
  .icon-nav_order
- preview
  .icon-preview
- nav_cam
  .icon-nav_cam
- phone
  .icon-phone
- nav_scene
  .icon-nav_scene
- plus
  .icon-plus
- nav_my
  .icon-nav_my
- nav_data
  .icon-nav_data
- search
  .icon-search
- reduce
  .icon-reduce
- share_link
  .icon-share_link
- register_help
  .icon-register_help
- register_agreement
  .icon-register_agreement
- share_qq
  .icon-share_qq
- share_wx
  .icon-share_wx
- share_wb
  .icon-share_wb
- view_list
  .icon-view_list
- main_list
  .icon-main_list
- main_grid
  .icon-main_grid
- 横标EN
  .icon-hengbiaoEN
- 确认
  .icon-queren
- 警示
  .icon-jingshi
- 密码不可见
  .icon-mimabukejian
- 密码可见
  .icon-mimakejian
- 回顶页尖嘴
  .icon-huidingyejianzui
- logo
  .icon-logo
- 新购物车
  .icon-xingouwuche
- 对号
  .icon-duihao
- 叹号
  .icon-tanhao
- 购物车
  .icon-gouwuche
- 首页公仔
  .icon-shouyegongzi
- case_teamwork
  .icon-case_teamwork
- case_hot
  .icon-case_hot
- case_recommend
  .icon-case_recommend
- case_new
  .icon-case_new
- 视频教学
  .icon-teaching
- ctmservice
  .icon-ctmservice
- 6month
  .icon-month2
- 3month
  .icon-month1
- year
  .icon-year
- month
  .icon-month
- vas
  .icon-vas
- home
  .icon-home
- edit
  .icon-edit
- choice
  .icon-choice
- cloud
  .icon-cloud
- 全部
  .icon-all
- _eye
  .icon-eye
- forbid
  .icon-forbid
- close
  .icon-close
- 发展机会
  .icon-fazhanjihui
- 店面布置
  .icon-dianmianbuzhi
- 宣传资料
  .icon-xuanchuanziliao
- 专属客服
  .icon-zhuanshukefu
- 利润分成
  .icon-lirunfencheng
- 经销商
  .icon-jingxiaoshang
- 保修条款
  .icon-baoxiutiaokuan
- 箭头
  .icon-jiantou
- vip_false
  .icon-vip_false
- vip_true
  .icon-vip_true
- 减号
  .icon-jianhao
- 加号
  .icon-jiahao
- 与
  .icon-and
- shoppingcart
  .icon-cart
- liulan
  .icon-liulan
- bianji
  .icon-bianji
- dianlang
  .icon-dianlang
- 3d
  .icon-3d
- sfm
  .icon-sfm
- qiumu
  .icon-qiumu
- haisi
  .icon-haisi
- sony
  .icon-sony
- kaiguan1
  .icon-kaiguan1
- kaiguan
  .icon-kaiguan
- 使用手册
  .icon-ser_manual
- shang
  .icon-shang
- xia
  .icon-xia
- yuandian
  .icon-yuandian
- 8-sanwei
  .icon--sanwei
- 1
  .icon-icon-test
- 2
  .icon-icon-test1
- 3
  .icon-icon-test2
- 4
  .icon-icon-test3
- 5
  .icon-icon-test4
- lianxi
  .icon-lianxi
- kehu
  .icon-kehu
- meiti
  .icon-meiti
- yewu
  .icon-yewu
- 8-xuanzhe
  .icon--xuanzhe-copy
- 8-xuanzhe
  .icon--xuanzhe-copy-copy
- zuo
  .icon-zuo
- you
  .icon-you
- 8-renren
  .icon--renren
- 8-AI
  .icon--AI
- 空间定位
  .icon-tech_space_location
- 空间建模
  .icon-tech_space_modeling
- 空间展示
  .icon-tech_space_display
- 使用教程
  .icon-tutorial
- 服务条款
  .icon-protocol
- 维修服务
  .icon-service
- app下载
  .icon-appdown
- 常见问题
  .icon-faq
- 行业-房地产
  .icon-industry_realty
- 行业-博物馆
  .icon-industry_museum
- 行业-工业
  .icon-industry_industry
- 行业-电商
  .icon-industry_ecom
- 行业-餐饮
  .icon-industry_catering
- 行业-app
  .icon-industry_app
- 六目相机
  .icon-icon_cam_pro
- 二目相机
  .icon-icon_cam_lite
- 相机配件
  .icon-icon_cam_fitting
- 关闭
  .icon-cuowu
- 关闭
  .icon-guanbi
- 4dkk
  .icon-logo_a
- 4dkk
  .icon-logo_b
- 抖音
  .icon-douyin
- chat
  .icon-chat
- geren
  .icon-geren
- 新浪
  .icon-xinlang
- facebook
  .icon-facebook
- 提升
  .icon-tisheng
- 苹果
  .icon-pingguo
- 左箭头
  .icon-youjiantou
- 微信
  .icon-weixin
- ins
  .icon-ins
- 搜索
  .icon-sousuo
- 安卓
  .icon-anzhuo
- 对
  .icon-dui

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

- uploading_e57
  #icon-uploading_e57
- person_e
  #icon-person_e
- menu_format
  #icon-menu_format
- icon_share
  #icon-icon_share
- menu_copy
  #icon-menu_copy
- swsd-v
  #icon-swsd-v
- swsd
  #icon-swsd
- menu_update
  #icon-menu_update
- top
  #icon-top
- logo
  #icon-logo1
- more
  #icon-more
- shop_car
  #icon-shop_car
- scene_c
  #icon-scene_c
- international
  #icon-international
- next
  #icon-next
- back
  #icon-back
- logo-4dage-en
  #icon-logo-4dage-en
- logo-4dage-cn
  #icon-logo-4dage-cn
- share
  #icon-share
- unbind
  #icon-unbind
- show
  #icon-show
- file
  #icon-file
- folder
  #icon-folder1
- icon-kfckfc
  #icon-Twitter
- Facebook
  #icon-Facebook
- play
  #icon-play
- ar
  #icon-ar
- cloud
  #icon-cloud1
- sdk
  #icon-sdk
- siwei
  #icon-siwei
- link
  #icon-link
- QQ
  #icon-QQ
- weixin
  #icon-weixin1
- weibo
  #icon-weibo
- new_folder
  #icon-new_folder
- new_camera
  #icon-new_camera
- menu_cooperation
  #icon-menu_cooperation1
- phone
  #icon-phone1
- mail
  #icon-mail1
- del
  #icon-del
- mall
  #icon-mall
- look_flatten
  #icon-look_flatten
- look_list
  #icon-look_list
- look_date
  #icon-look_date
- look_position
  #icon-look_position
- look_like
  #icon-look_like
- look_share
  #icon-look_share
- look_watch
  #icon-look_watch
- look_people
  #icon-look_people
- download
  #icon-download
- list_delete
  #icon-list_delete
- vip_wrong
  #icon-vip_wrong
- vip_right
  #icon-vip_right
- menu_rename
  #icon-menu_rename
- menu_panorama
  #icon-menu_panorama
- menu_move
  #icon-menu_move
- view_screen
  #icon-view_screen
- data_time
  #icon-data_time
- folder_bg
  #icon-folder_bg
- arrow
  #icon-arrow-copy
- arrow
  #icon-arrow
- folder
  #icon-folder
- address
  #icon-address
- cam_cloud
  #icon-cam_cloud
- list_menu
  #icon-list_menu
- choose
  #icon-choose
- mail
  #icon-mail
- nav_order
  #icon-nav_order
- preview
  #icon-preview
- nav_cam
  #icon-nav_cam
- phone
  #icon-phone
- nav_scene
  #icon-nav_scene
- plus
  #icon-plus
- nav_my
  #icon-nav_my
- nav_data
  #icon-nav_data
- search
  #icon-search
- reduce
  #icon-reduce
- share_link
  #icon-share_link
- register_help
  #icon-register_help
- register_agreement
  #icon-register_agreement
- share_qq
  #icon-share_qq
- share_wx
  #icon-share_wx
- share_wb
  #icon-share_wb
- view_list
  #icon-view_list
- main_list
  #icon-main_list
- main_grid
  #icon-main_grid
- 横标EN
  #icon-hengbiaoEN
- 确认
  #icon-queren
- 警示
  #icon-jingshi
- 密码不可见
  #icon-mimabukejian
- 密码可见
  #icon-mimakejian
- 回顶页尖嘴
  #icon-huidingyejianzui
- logo
  #icon-logo
- 新购物车
  #icon-xingouwuche
- 对号
  #icon-duihao
- 叹号
  #icon-tanhao
- 购物车
  #icon-gouwuche
- 首页公仔
  #icon-shouyegongzi
- case_teamwork
  #icon-case_teamwork
- case_hot
  #icon-case_hot
- case_recommend
  #icon-case_recommend
- case_new
  #icon-case_new
- 视频教学
  #icon-teaching
- ctmservice
  #icon-ctmservice
- 6month
  #icon-month2
- 3month
  #icon-month1
- year
  #icon-year
- month
  #icon-month
- vas
  #icon-vas
- home
  #icon-home
- edit
  #icon-edit
- choice
  #icon-choice
- cloud
  #icon-cloud
- 全部
  #icon-all
- _eye
  #icon-eye
- forbid
  #icon-forbid
- close
  #icon-close
- 发展机会
  #icon-fazhanjihui
- 店面布置
  #icon-dianmianbuzhi
- 宣传资料
  #icon-xuanchuanziliao
- 专属客服
  #icon-zhuanshukefu
- 利润分成
  #icon-lirunfencheng
- 经销商
  #icon-jingxiaoshang
- 保修条款
  #icon-baoxiutiaokuan
- 箭头
  #icon-jiantou
- vip_false
  #icon-vip_false
- vip_true
  #icon-vip_true
- 减号
  #icon-jianhao
- 加号
  #icon-jiahao
- 与
  #icon-and
- shoppingcart
  #icon-cart
- liulan
  #icon-liulan
- bianji
  #icon-bianji
- dianlang
  #icon-dianlang
- 3d
  #icon-3d
- sfm
  #icon-sfm
- qiumu
  #icon-qiumu
- haisi
  #icon-haisi
- sony
  #icon-sony
- kaiguan1
  #icon-kaiguan1
- kaiguan
  #icon-kaiguan
- 使用手册
  #icon-ser_manual
- shang
  #icon-shang
- xia
  #icon-xia
- yuandian
  #icon-yuandian
- 8-sanwei
  #icon--sanwei
- 1
  #icon-icon-test
- 2
  #icon-icon-test1
- 3
  #icon-icon-test2
- 4
  #icon-icon-test3
- 5
  #icon-icon-test4
- lianxi
  #icon-lianxi
- kehu
  #icon-kehu
- meiti
  #icon-meiti
- yewu
  #icon-yewu
- 8-xuanzhe
  #icon--xuanzhe-copy
- 8-xuanzhe
  #icon--xuanzhe-copy-copy
- zuo
  #icon-zuo
- you
  #icon-you
- 8-renren
  #icon--renren
- 8-AI
  #icon--AI
- 空间定位
  #icon-tech_space_location
- 空间建模
  #icon-tech_space_modeling
- 空间展示
  #icon-tech_space_display
- 使用教程
  #icon-tutorial
- 服务条款
  #icon-protocol
- 维修服务
  #icon-service
- app下载
  #icon-appdown
- 常见问题
  #icon-faq
- 行业-房地产
  #icon-industry_realty
- 行业-博物馆
  #icon-industry_museum
- 行业-工业
  #icon-industry_industry
- 行业-电商
  #icon-industry_ecom
- 行业-餐饮
  #icon-industry_catering
- 行业-app
  #icon-industry_app
- 六目相机
  #icon-icon_cam_pro
- 二目相机
  #icon-icon_cam_lite
- 相机配件
  #icon-icon_cam_fitting
- 关闭
  #icon-cuowu
- 关闭
  #icon-guanbi
- 4dkk
  #icon-logo_a
- 4dkk
  #icon-logo_b
- 抖音
  #icon-douyin
- chat
  #icon-chat
- geren
  #icon-geren
- 新浪
  #icon-xinlang
- facebook
  #icon-facebook
- 提升
  #icon-tisheng
- 苹果
  #icon-pingguo
- 左箭头
  #icon-youjiantou
- 微信
  #icon-weixin
- ins
  #icon-ins
- 搜索
  #icon-sousuo
- 安卓
  #icon-anzhuo
- 对
  #icon-dui

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