#

- 
  code
  &#xe776;
- 
  clipboard-detail
  &#xe775;
- 
  move-off
  &#xe774;
- 
  table
  &#xe773;
- 
  star-01-fill
  &#xe770;
- 
  star-01
  &#xe771;
- 
  help-circle
  &#xe772;
- 
  download-off
  &#xe76e;
- 
  edit-02
  &#xe76f;
- 
  trash-02-off
  &#xe76a;
- 
  edit-02-off
  &#xe76b;
- 
  eye
  &#xe76c;
- 
  eye-off
  &#xe76d;
- 
  currency-dollar
  &#xe768;
- 
  currency-yen
  &#xe769;
- 
  save-01
  &#xe767;
- 
  filter-funnel-01
  &#xe761;
- 
  trash-01
  &#xe762;
- 
  copy-03
  &#xe763;
- 
  trash-02
  &#xe764;
- 
  copy-07
  &#xe765;
- 
  filter-funnel-01-fill
  &#xe766;
- 
  arrow-narrow-right
  &#xe75e;
- 
  chevron-down
  &#xe75f;
- 
  switch-vertical-02
  &#xe760;
- 
  arrow-up-left
  &#xe756;
- 
  chevron-left
  &#xe757;
- 
  arrow-narrow-left
  &#xe758;
- 
  arrow-narrow-down
  &#xe759;
- 
  chevron-right
  &#xe75a;
- 
  corner-down-left
  &#xe75b;
- 
  chevron-up
  &#xe75c;
- 
  arrow-narrow-up
  &#xe75d;
- 
  flash
  &#xe755;
- 
  grid-01
  &#xe754;
- 
  divider
  &#xe753;
- 
  clipboard-sale
  &#xe752;
- 
  credit-card-down
  &#xe751;
- 
  coins-hand
  &#xe74f;
- 
  credit-card-up
  &#xe750;
- 
  annotation-price
  &#xe748;
- 
  file-question-02
  &#xe749;
- 
  package
  &#xe74a;
- 
  clipboard-price
  &#xe74b;
- 
  shopping-cart-price
  &#xe74c;
- 
  file-03
  &#xe74d;
- 
  bar-chart-07
  &#xe74e;
- 
  currency-yen-circle
  &#xe747;
- 
  tool-02
  &#xe73d;
- 
  cube-01
  &#xe73e;
- 
  package-search
  &#xe73f;
- 
  line-chart-up-02
  &#xe740;
- 
  briefcase-02
  &#xe741;
- 
  file-search-02
  &#xe742;
- 
  bezier-curve-03
  &#xe743;
- 
  search-md
  &#xe744;
- 
  target-04
  &#xe745;
- 
  compass
  &#xe746;
- 
  menu-01
  &#xe73c;
- 
  move
  &#xe73b;
- 
  user-minus-01
  &#xe734;
- 
  user-x-01
  &#xe735;
- 
  user-edit
  &#xe736;
- 
  user-check-01
  &#xe737;
- 
  users-01
  &#xe738;
- 
  user-01
  &#xe739;
- 
  user-plus-01
  &#xe73a;
- 
  clipboard-check
  &#xe730;
- 
  clipboard-x
  &#xe731;
- 
  clipboard-minus
  &#xe732;
- 
  paperclip
  &#xe733;
- 
  clipboard
  &#xe72d;
- 
  clipboard-plus
  &#xe72e;
- 
  clipboard-attachment
  &#xe72f;
- 
  pin-02
  &#xe72b;
- 
  pin-01
  &#xe72c;
- 
  rows-03
  &#xe729;
- 
  columns-03
  &#xe72a;
- 
  link-broken-01
  &#xe727;
- 
  link-01
  &#xe728;
- 
  qr-code-02
  &#xe725;
- 
  monitor-01
  &#xe726;
- 
  check-square-fill
  &#xe721;
- 
  circle
  &#xe722;
- 
  check-circle
  &#xe723;
- 
  check-circle-fill
  &#xe724;
- 
  square
  &#xe71f;
- 
  check-square
  &#xe720;
- 
  font-minus-01
  &#xe71d;
- 
  font-plus-01
  &#xe71e;
- 
  file-04
  &#xe71c;
- 
  stop
  &#xe71b;
- 
  target-05
  &#xe71a;
- 
  align-horizontal-centre-02
  &#xe70b;
- 
  align-left-02
  &#xe70c;
- 
  align-top-arrow-02
  &#xe70d;
- 
  align-right-02
  &#xe70e;
- 
  align-vertical-center-02
  &#xe70f;
- 
  align-bottom-02
  &#xe710;
- 
  refresh-cw-01
  &#xe711;
- 
  flip-forward
  &#xe712;
- 
  flip-backward
  &#xe713;
- 
  spacing-width-01
  &#xe714;
- 
  upload-01
  &#xe715;
- 
  zoom-in
  &#xe716;
- 
  download-01
  &#xe717;
- 
  spacing-height-01
  &#xe718;
- 
  zoom-out
  &#xe719;
- 
  brush-03-1
  &#xe70a;
- 
  calendar
  &#xe709;
- 
  type-01
  &#xe702;
- 
  calendar-date
  &#xe707;
- 
  number-01
  &#xe708;
- 
  building-05-fill
  &#xe700;
- 
  building-05
  &#xe701;
- 
  home-smile-fill
  &#xe703;
- 
  truck-01-fill
  &#xe704;
- 
  consult-price-fill
  &#xe705;
- 
  shopping-cart-01-fill
  &#xe706;
- 
  shopping-cart-01
  &#xe6fc;
- 
  truck-01
  &#xe6fd;
- 
  home-smile
  &#xe6fe;
- 
  consult-price
  &#xe6ff;
- 
  bell-ringing-01
  &#xe6fa;
- 
  bell-01
  &#xe6fb;
- 
  palette
  &#xe6f3;
- 
  sun
  &#xe6f4;
- 
  user-circle
  &#xe6f5;
- 
  moon-01
  &#xe6f6;
- 
  left-indent-01
  &#xe6f7;
- 
  right-indent-01
  &#xe6f8;
- 
  translate-01
  &#xe6f9;
- 
  maximize-02
  &#xe6f1;
- 
  minimize-02
  &#xe6f2;
- 
  压缩包
  &#xe6ec;
- 
  excel
  &#xe6ed;
- 
  txt
  &#xe6ee;
- 
  WORD
  &#xe6ef;
- 
  图片
  &#xe6f0;
- 
  bug
  &#xe6eb;
- 
  Reply
  &#xe6e9;
- 
  Reply
  &#xe6ea;
- 
  face
  &#xe6e8;
- 
  Like
  &#xe6e7;
- 
  Like
  &#xe6e6;
- 
  logout
  &#xe6e5;
- 
  Hide_light
  &#xe6e4;
- 
  Arrow - Down 3
  &#xe679;
- 
  Arrow - Down Circle
  &#xe67a;
- 
  Arrow - Left 3
  &#xe67b;
- 
  Arrow - Down 2
  &#xe67c;
- 
  Arrow - Left Circle
  &#xe67d;
- 
  Add User
  &#xe67e;
- 
  Arrow - Down Square
  &#xe67f;
- 
  2 User
  &#xe680;
- 
  Activity
  &#xe681;
- 
  Arrow - Up 3
  &#xe682;
- 
  Arrow - Right Circle
  &#xe683;
- 
  Arrow - Left 2
  &#xe684;
- 
  3 User
  &#xe685;
- 
  Arrow - Right 2
  &#xe686;
- 
  Arrow - Up 2
  &#xe687;
- 
  Arrow - Left
  &#xe688;
- 
  Arrow - Right 3
  &#xe689;
- 
  Arrow - Up
  &#xe68a;
- 
  Arrow - Down
  &#xe68b;
- 
  Call Silent
  &#xe68c;
- 
  Arrow - Up Circle
  &#xe68d;
- 
  Bag
  &#xe68e;
- 
  Arrow - Left Square
  &#xe68f;
- 
  Call
  &#xe690;
- 
  Buy
  &#xe691;
- 
  Category
  &#xe692;
- 
  Camera
  &#xe693;
- 
  Arrow - Right Square
  &#xe694;
- 
  Arrow - Right
  &#xe695;
- 
  Chart
  &#xe696;
- 
  Chat
  &#xe697;
- 
  Arrow - Up Square
  &#xe698;
- 
  Delete
  &#xe699;
- 
  Edit Square
  &#xe69a;
- 
  Bag 2
  &#xe69b;
- 
  Danger
  &#xe69c;
- 
  Document
  &#xe69d;
- 
  Call Missed
  &#xe69e;
- 
  Folder
  &#xe69f;
- 
  edition_bold
  &#xe6a0;
- 
  checkout2_bold
  &#xe6a1;
- 
  Bookmark
  &#xe6a2;
- 
  Filter
  &#xe6a3;
- 
  Discount
  &#xe6a4;
- 
  Filter 2
  &#xe6a5;
- 
  Close Square
  &#xe6a6;
- 
  Home
  &#xe6a7;
- 
  Calling
  &#xe6a8;
- 
  Heart
  &#xe6a9;
- 
  Calendar
  &#xe6aa;
- 
  Info Circle
  &#xe6ab;
- 
  honeycomb_bold
  &#xe6ac;
- 
  Hide
  &#xe6ad;
- 
  Graph
  &#xe6ae;
- 
  Discovery
  &#xe6af;
- 
  knowledge_bold
  &#xe6b0;
- 
  Game
  &#xe6b1;
- 
  Edit
  &#xe6b2;
- 
  Download
  &#xe6b3;
- 
  Info Square
  &#xe6b4;
- 
  Location
  &#xe6b5;
- 
  More Circle
  &#xe6b6;
- 
  empolder2_bold
  &#xe6b7;
- 
  Message
  &#xe6b8;
- 
  More Square
  &#xe6b9;
- 
  Notification
  &#xe6ba;
- 
  Login
  &#xe6bb;
- 
  Image
  &#xe6bc;
- 
  Logout
  &#xe6bd;
- 
  Lock
  &#xe6be;
- 
  honeycombs_bold
  &#xe6bf;
- 
  Password
  &#xe6c0;
- 
  Plus
  &#xe6c1;
- 
  Paper Upload
  &#xe6c2;
- 
  Paper Download
  &#xe6c3;
- 
  Profile
  &#xe6c4;
- 
  Paper Fail
  &#xe6c5;
- 
  knowledge_set2_bold
  &#xe6c6;
- 
  Search
  &#xe6c7;
- 
  Show
  &#xe6c8;
- 
  Send
  &#xe6c9;
- 
  Paper Plus
  &#xe6ca;
- 
  Image 2
  &#xe6cb;
- 
  Shield Done
  &#xe6cc;
- 
  Paper
  &#xe6cd;
- 
  Setting
  &#xe6ce;
- 
  Play
  &#xe6cf;
- 
  Shield Fail
  &#xe6d0;
- 
  Tick Square
  &#xe6d1;
- 
  Scan
  &#xe6d2;
- 
  Ticket Star
  &#xe6d3;
- 
  Time Circle
  &#xe6d4;
- 
  Star
  &#xe6d5;
- 
  Unlock
  &#xe6d6;
- 
  Ticket
  &#xe6d7;
- 
  Time Square
  &#xe6d8;
- 
  Paper Negative
  &#xe6d9;
- 
  Upload
  &#xe6da;
- 
  Swap
  &#xe6db;
- 
  Voice
  &#xe6dc;
- 
  Volume Down
  &#xe6dd;
- 
  Voice 2
  &#xe6de;
- 
  Volume Up
  &#xe6df;
- 
  Volume Off
  &#xe6e0;
- 
  Wallet
  &#xe6e1;
- 
  Work
  &#xe6e2;
- 
  Video
  &#xe6e3;
- 
  Activity_light
  &#xe60d;
- 
  Arrow - Down Circle_light
  &#xe612;
- 
  2 User_light
  &#xe613;
- 
  Arrow - Right Circle_light
  &#xe616;
- 
  Arrow - Right Square_light
  &#xe617;
- 
  3 User_light
  &#xe618;
- 
  Add User_light
  &#xe619;
- 
  Arrow - Left Square_light
  &#xe61a;
- 
  Arrow - Down Square_light
  &#xe61b;
- 
  Arrow - Up -Left Square_light
  &#xe61c;
- 
  Bag 3_light
  &#xe623;
- 
  Arrow - Up Square_light
  &#xe624;
- 
  Author
  &#xe625;
- 
  Bag_light
  &#xe626;
- 
  Bookmark_light
  &#xe627;
- 
  Buy_light
  &#xe628;
- 
  Chart_light
  &#xe629;
- 
  Calendar_light
  &#xe62a;
- 
  Camera_light
  &#xe62b;
- 
  Call_light
  &#xe62c;
- 
  Danger Triangle_light
  &#xe62d;
- 
  Call Silent_light
  &#xe62e;
- 
  Call Missed_light
  &#xe62f;
- 
  Close Square_light
  &#xe630;
- 
  Danger Circle_light
  &#xe631;
- 
  Delete_light
  &#xe633;
- 
  Edit Square_light
  &#xe634;
- 
  Filter_light
  &#xe635;
- 
  Discovery_light
  &#xe636;
- 
  Document_light
  &#xe637;
- 
  Discount_light
  &#xe638;
- 
  Calling_light
  &#xe639;
- 
  Filter 3_light
  &#xe63a;
- 
  Game_light
  &#xe63b;
- 
  Folder_light
  &#xe63c;
- 
  honeycomb_light
  &#xe63d;
- 
  Graph_light
  &#xe63e;
- 
  Category_light
  &#xe63f;
- 
  Home_light
  &#xe640;
- 
  Heart_light
  &#xe641;
- 
  Info Square_light
  &#xe642;
- 
  Chat_light
  &#xe643;
- 
  honeycombs_light
  &#xe644;
- 
  Location_light
  &#xe645;
- 
  Login_light
  &#xe646;
- 
  left-fold_light
  &#xe647;
- 
  Lock_light
  &#xe648;
- 
  More Circle_light
  &#xe649;
- 
  Logout_light
  &#xe64a;
- 
  Download_light
  &#xe64b;
- 
  Image 3_light
  &#xe64c;
- 
  knowledge_set_light
  &#xe64d;
- 
  Arrow - Left Circle_light
  &#xe64e;
- 
  More Square_light
  &#xe64f;
- 
  Message_light
  &#xe650;
- 
  Paper Download_light
  &#xe651;
- 
  Notification_light
  &#xe652;
- 
  Arrow - Up Circle_light
  &#xe653;
- 
  Paper Plus_light
  &#xe654;
- 
  Plus_light
  &#xe655;
- 
  Paper Upload_light
  &#xe656;
- 
  Paper Negative_light
  &#xe657;
- 
  knowledge_light
  &#xe658;
- 
  Paper_light
  &#xe659;
- 
  Scan_light
  &#xe65a;
- 
  Refresh_light
  &#xe65b;
- 
  Profile_light
  &#xe65c;
- 
  Send_light
  &#xe65d;
- 
  Password_light
  &#xe65e;
- 
  Play_light
  &#xe65f;
- 
  Search_light
  &#xe660;
- 
  right-fold_light
  &#xe661;
- 
  Paper Fail_light
  &#xe662;
- 
  Shield Done_light
  &#xe663;
- 
  Swap_light
  &#xe664;
- 
  Tick Square_light
  &#xe665;
- 
  Ticket Star_light
  &#xe666;
- 
  Setting_light
  &#xe667;
- 
  Ticket_light
  &#xe668;
- 
  Upload_light
  &#xe669;
- 
  Time Circle_light
  &#xe66a;
- 
  Show_light
  &#xe66b;
- 
  Shield Fail_light
  &#xe66c;
- 
  Voice 3_light
  &#xe66d;
- 
  To - Top_light
  &#xe66e;
- 
  Unlock_light
  &#xe66f;
- 
  Time Square_light
  &#xe670;
- 
  Wallet_light
  &#xe671;
- 
  Voice_light
  &#xe672;
- 
  Video_light
  &#xe673;
- 
  Volume Down_light
  &#xe674;
- 
  Work_light
  &#xe675;
- 
  wrong_light
  &#xe676;
- 
  Volume Up_light
  &#xe677;
- 
  Volume Off_light
  &#xe678;

## Unicode 引用

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

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

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

Unicode 使用步骤如下：

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

    @font-face {
      font-family: 'iconfont';
      src:
           url('data:application/x-font-woff2;charset=utf-8;base64, ') format('woff2'),
           url('iconfont.woff?t=1719907312902') format('woff'),
           url('iconfont.ttf?t=1719907312902') 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"。

- code
  .iconcode
- clipboard-detail
  .iconclipboard-detail
- move-off
  .iconmove-off
- table
  .icontable
- star-01-fill
  .iconstar-01-fill
- star-01
  .iconstar-01
- help-circle
  .iconhelp-circle
- download-off
  .icondownload-off
- edit-02
  .iconedit-02
- trash-02-off
  .icontrash-02-off
- edit-02-off
  .iconedit-02-off
- eye
  .iconeye
- eye-off
  .iconeye-off
- currency-dollar
  .iconcurrency-dollar
- currency-yen
  .iconcurrency-yen
- save-01
  .iconsave-01
- filter-funnel-01
  .iconfilter-funnel-01
- trash-01
  .icontrash-01
- copy-03
  .iconcopy-03
- trash-02
  .icontrash-02
- copy-07
  .iconcopy-07
- filter-funnel-01-fill
  .iconfilter-funnel-01-fill
- arrow-narrow-right
  .iconarrow-narrow-right
- chevron-down
  .iconchevron-down
- switch-vertical-02
  .iconswitch-vertical-02
- arrow-up-left
  .iconarrow-up-left
- chevron-left
  .iconchevron-left
- arrow-narrow-left
  .iconarrow-narrow-left
- arrow-narrow-down
  .iconarrow-narrow-down
- chevron-right
  .iconchevron-right
- corner-down-left
  .iconcorner-down-left
- chevron-up
  .iconchevron-up
- arrow-narrow-up
  .iconarrow-narrow-up
- flash
  .iconflash
- grid-01
  .icongrid-01
- divider
  .icondivider
- clipboard-sale
  .iconclipboard-sale
- credit-card-down
  .iconcredit-card-down
- coins-hand
  .iconcoins-hand
- credit-card-up
  .iconcredit-card-up
- annotation-price
  .iconannotation-price
- file-question-02
  .iconfile-question-02
- package
  .iconpackage
- clipboard-price
  .iconclipboard-price
- shopping-cart-price
  .iconshopping-cart-price
- file-03
  .iconfile-03
- bar-chart-07
  .iconbar-chart-07
- currency-yen-circle
  .iconcurrency-yen-circle
- tool-02
  .icontool-02
- cube-01
  .iconcube-01
- package-search
  .iconpackage-search
- line-chart-up-02
  .iconline-chart-up-02
- briefcase-02
  .iconbriefcase-02
- file-search-02
  .iconfile-search-02
- bezier-curve-03
  .iconbezier-curve-03
- search-md
  .iconsearch-md
- target-04
  .icontarget-04
- compass
  .iconcompass
- menu-01
  .iconmenu-01
- move
  .iconmove
- user-minus-01
  .iconuser-minus-01
- user-x-01
  .iconuser-x-01
- user-edit
  .iconuser-edit
- user-check-01
  .iconuser-check-01
- users-01
  .iconusers-01
- user-01
  .iconuser-01
- user-plus-01
  .iconuser-plus-01
- clipboard-check
  .iconclipboard-check
- clipboard-x
  .iconclipboard-x
- clipboard-minus
  .iconclipboard-minus
- paperclip
  .iconpaperclip
- clipboard
  .iconclipboard
- clipboard-plus
  .iconclipboard-plus
- clipboard-attachment
  .iconclipboard-attachment
- pin-02
  .iconpin-02
- pin-01
  .iconpin-01
- rows-03
  .iconrows-03
- columns-03
  .iconcolumns-03
- link-broken-01
  .iconlink-broken-01
- link-01
  .iconlink-01
- qr-code-02
  .iconqr-code-02
- monitor-01
  .iconmonitor-01
- check-square-fill
  .iconcheck-square-fill
- circle
  .iconcircle
- check-circle
  .iconcheck-circle
- check-circle-fill
  .iconcheck-circle-fill
- square
  .iconsquare
- check-square
  .iconcheck-square
- font-minus-01
  .iconfont-minus-01
- font-plus-01
  .iconfont-plus-01
- file-04
  .iconfile-04
- stop
  .iconstop
- target-05
  .icontarget-05
- align-horizontal-centre-02
  .iconalign-horizontal-centre-02
- align-left-02
  .iconalign-left-02
- align-top-arrow-02
  .iconalign-top-arrow-02
- align-right-02
  .iconalign-right-02
- align-vertical-center-02
  .iconalign-vertical-center-02
- align-bottom-02
  .iconalign-bottom-02
- refresh-cw-01
  .iconrefresh-cw-01
- flip-forward
  .iconflip-forward
- flip-backward
  .iconflip-backward
- spacing-width-01
  .iconspacing-width-01
- upload-01
  .iconupload-01
- zoom-in
  .iconzoom-in
- download-01
  .icondownload-01
- spacing-height-01
  .iconspacing-height-01
- zoom-out
  .iconzoom-out
- brush-03-1
  .iconbrush-03-1
- calendar
  .iconcalendar
- type-01
  .icontype-01
- calendar-date
  .iconcalendar-date
- number-01
  .iconnumber-01
- building-05-fill
  .iconbuilding-05-fill
- building-05
  .iconbuilding-05
- home-smile-fill
  .iconhome-smile-fill
- truck-01-fill
  .icontruck-01-fill
- consult-price-fill
  .iconconsult-price-fill
- shopping-cart-01-fill
  .iconshopping-cart-01-fill
- shopping-cart-01
  .iconshopping-cart-01
- truck-01
  .icontruck-01
- home-smile
  .iconhome-smile
- consult-price
  .iconconsult-price
- bell-ringing-01
  .iconbell-ringing-01
- bell-01
  .iconbell-01
- palette
  .iconpalette
- sun
  .iconsun
- user-circle
  .iconuser-circle
- moon-01
  .iconmoon-01
- left-indent-01
  .iconleft-indent-01
- right-indent-01
  .iconright-indent-01
- translate-01
  .icontranslate-01
- maximize-02
  .iconmaximize-02
- minimize-02
  .iconminimize-02
- 压缩包
  .iconyasuobao
- excel
  .iconexcel
- txt
  .icontxt
- WORD
  .iconWORD
- 图片
  .icontupian
- bug
  .iconbug
- Reply
  .iconReply
- Reply
  .iconReply_bold
- face
  .iconface
- Like
  .iconLike_light
- Like
  .iconLike_bold
- logout
  .iconlogout
- Hide_light
  .iconHide_light
- Arrow - Down 3
  .iconArrow-Down3
- Arrow - Down Circle
  .iconArrow-DownCircle
- Arrow - Left 3
  .iconArrow-Left3
- Arrow - Down 2
  .iconArrow-Down2
- Arrow - Left Circle
  .iconArrow-LeftCircle
- Add User
  .iconAddUser
- Arrow - Down Square
  .iconArrow-DownSquare
- 2 User
  .icon2User
- Activity
  .iconActivity
- Arrow - Up 3
  .iconArrow-Up3
- Arrow - Right Circle
  .iconArrow-RightCircle
- Arrow - Left 2
  .iconArrow-Left2
- 3 User
  .icon3User
- Arrow - Right 2
  .iconArrow-Right2
- Arrow - Up 2
  .iconArrow-Up2
- Arrow - Left
  .iconArrow-Left
- Arrow - Right 3
  .iconArrow-Right3
- Arrow - Up
  .iconArrow-Up
- Arrow - Down
  .iconArrow-Down
- Call Silent
  .iconCallSilent
- Arrow - Up Circle
  .iconArrow-UpCircle
- Bag
  .iconBag
- Arrow - Left Square
  .iconArrow-LeftSquare
- Call
  .iconCall
- Buy
  .iconBuy
- Category
  .iconCategory
- Camera
  .iconCamera
- Arrow - Right Square
  .iconArrow-RightSquare
- Arrow - Right
  .iconArrow-Right
- Chart
  .iconChart
- Chat
  .iconChat
- Arrow - Up Square
  .iconArrow-UpSquare
- Delete
  .iconDelete
- Edit Square
  .iconEditSquare
- Bag 2
  .iconBag2
- Danger
  .iconDanger
- Document
  .iconDocument
- Call Missed
  .iconCallMissed
- Folder
  .iconFolder
- edition_bold
  .iconedition_bold
- checkout2_bold
  .iconcheckout2_bold
- Bookmark
  .iconBookmark
- Filter
  .iconFilter
- Discount
  .iconDiscount
- Filter 2
  .iconFilter2
- Close Square
  .iconCloseSquare
- Home
  .iconHome
- Calling
  .iconCalling
- Heart
  .iconHeart
- Calendar
  .iconCalendar
- Info Circle
  .iconInfoCircle
- honeycomb_bold
  .iconhoneycomb_bold
- Hide
  .iconHide
- Graph
  .iconGraph
- Discovery
  .iconDiscovery
- knowledge_bold
  .iconknowledge_bold
- Game
  .iconGame
- Edit
  .iconEdit
- Download
  .iconDownload
- Info Square
  .iconInfoSquare
- Location
  .iconLocation
- More Circle
  .iconMoreCircle
- empolder2_bold
  .iconempolder2_bold
- Message
  .iconMessage
- More Square
  .iconMoreSquare
- Notification
  .iconNotification
- Login
  .iconLogin
- Image
  .iconImage
- Logout
  .iconLogout
- Lock
  .iconLock
- honeycombs_bold
  .iconhoneycombs_bold
- Password
  .iconPassword
- Plus
  .iconPlus
- Paper Upload
  .iconPaperUpload
- Paper Download
  .iconPaperDownload
- Profile
  .iconProfile
- Paper Fail
  .iconPaperFail
- knowledge_set2_bold
  .iconknowledge_set2_bold
- Search
  .iconSearch
- Show
  .iconShow
- Send
  .iconSend
- Paper Plus
  .iconPaperPlus
- Image 2
  .iconImage2
- Shield Done
  .iconShieldDone
- Paper
  .iconPaper
- Setting
  .iconSetting
- Play
  .iconPlay
- Shield Fail
  .iconShieldFail
- Tick Square
  .iconTickSquare
- Scan
  .iconScan
- Ticket Star
  .iconTicketStar
- Time Circle
  .iconTimeCircle
- Star
  .iconStar
- Unlock
  .iconUnlock
- Ticket
  .iconTicket
- Time Square
  .iconTimeSquare
- Paper Negative
  .iconPaperNegative
- Upload
  .iconUpload
- Swap
  .iconSwap
- Voice
  .iconVoice
- Volume Down
  .iconVolumeDown
- Voice 2
  .iconVoice2
- Volume Up
  .iconVolumeUp
- Volume Off
  .iconVolumeOff
- Wallet
  .iconWallet
- Work
  .iconWork
- Video
  .iconVideo
- Activity_light
  .iconActivity_light
- Arrow - Down Circle_light
  .iconArrow-DownCircle_light
- 2 User_light
  .icon2User_light
- Arrow - Right Circle_light
  .iconArrow-RightCircle_light
- Arrow - Right Square_light
  .iconArrow-RightSquare_light
- 3 User_light
  .icon3User_light
- Add User_light
  .iconAddUser_light
- Arrow - Left Square_light
  .iconArrow-LeftSquare_light
- Arrow - Down Square_light
  .iconArrow-DownSquare_light
- Arrow - Up -Left Square_light
  .iconArrow-Up-LeftSquare_light
- Bag 3_light
  .iconBag3_light
- Arrow - Up Square_light
  .iconArrow-UpSquare_light
- Author
  .iconAuthor
- Bag_light
  .iconBag_light
- Bookmark_light
  .iconBookmark_light
- Buy_light
  .iconBuy_light
- Chart_light
  .iconChart_light
- Calendar_light
  .iconCalendar_light
- Camera_light
  .iconCamera_light
- Call_light
  .iconCall_light
- Danger Triangle_light
  .iconDangerTriangle_light
- Call Silent_light
  .iconCallSilent_light
- Call Missed_light
  .iconCallMissed_light
- Close Square_light
  .iconCloseSquare_light
- Danger Circle_light
  .iconDangerCircle_light
- Delete_light
  .iconDelete_light
- Edit Square_light
  .iconEditSquare_light
- Filter_light
  .iconFilter_light
- Discovery_light
  .iconDiscovery_light
- Document_light
  .iconDocument_light
- Discount_light
  .iconDiscount_light
- Calling_light
  .iconCalling_light
- Filter 3_light
  .iconFilter3_light
- Game_light
  .iconGame_light
- Folder_light
  .iconFolder_light
- honeycomb_light
  .iconhoneycomb_light
- Graph_light
  .iconGraph_light
- Category_light
  .iconCategory_light
- Home_light
  .iconHome_light
- Heart_light
  .iconHeart_light
- Info Square_light
  .iconInfoSquare_light
- Chat_light
  .iconChat_light
- honeycombs_light
  .iconhoneycombs_light
- Location_light
  .iconLocation_light
- Login_light
  .iconLogin_light
- left-fold_light
  .iconleft-fold_light
- Lock_light
  .iconLock_light
- More Circle_light
  .iconMoreCircle_light
- Logout_light
  .iconLogout_light
- Download_light
  .iconDownload_light
- Image 3_light
  .iconImage3_light
- knowledge_set_light
  .iconknowledge_set_light
- Arrow - Left Circle_light
  .iconArrow-LeftCircle_light
- More Square_light
  .iconMoreSquare_light
- Message_light
  .iconMessage_light
- Paper Download_light
  .iconPaperDownload_light
- Notification_light
  .iconNotification_light
- Arrow - Up Circle_light
  .iconArrow-UpCircle_light
- Paper Plus_light
  .iconPaperPlus_light
- Plus_light
  .iconPlus_light
- Paper Upload_light
  .iconPaperUpload_light
- Paper Negative_light
  .iconPaperNegative_light
- knowledge_light
  .iconknowledge_light
- Paper_light
  .iconPaper_light
- Scan_light
  .iconScan_light
- Refresh_light
  .iconRefresh_light
- Profile_light
  .iconProfile_light
- Send_light
  .iconSend_light
- Password_light
  .iconPassword_light
- Play_light
  .iconPlay_light
- Search_light
  .iconSearch_light
- right-fold_light
  .iconright-fold_light
- Paper Fail_light
  .iconPaperFail_light
- Shield Done_light
  .iconShieldDone_light
- Swap_light
  .iconSwap_light
- Tick Square_light
  .iconTickSquare_light
- Ticket Star_light
  .iconTicketStar_light
- Setting_light
  .iconSetting_light
- Ticket_light
  .iconTicket_light
- Upload_light
  .iconUpload_light
- Time Circle_light
  .iconTimeCircle_light
- Show_light
  .iconShow_light
- Shield Fail_light
  .iconShieldFail_light
- Voice 3_light
  .iconVoice3_light
- To - Top_light
  .iconTo-Top_light
- Unlock_light
  .iconUnlock_light
- Time Square_light
  .iconTimeSquare_light
- Wallet_light
  .iconWallet_light
- Voice_light
  .iconVoice_light
- Video_light
  .iconVideo_light
- Volume Down_light
  .iconVolumeDown_light
- Work_light
  .iconWork_light
- wrong_light
  .iconwrong_light
- Volume Up_light
  .iconVolumeUp_light
- Volume Off_light
  .iconVolumeOff_light

## font-class 引用

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

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

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

使用步骤如下：

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

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

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

    <span class="iconfont iconxxx"></span>

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

- code
  #iconcode
- clipboard-detail
  #iconclipboard-detail
- move-off
  #iconmove-off
- table
  #icontable
- star-01-fill
  #iconstar-01-fill
- star-01
  #iconstar-01
- help-circle
  #iconhelp-circle
- download-off
  #icondownload-off
- edit-02
  #iconedit-02
- trash-02-off
  #icontrash-02-off
- edit-02-off
  #iconedit-02-off
- eye
  #iconeye
- eye-off
  #iconeye-off
- currency-dollar
  #iconcurrency-dollar
- currency-yen
  #iconcurrency-yen
- save-01
  #iconsave-01
- filter-funnel-01
  #iconfilter-funnel-01
- trash-01
  #icontrash-01
- copy-03
  #iconcopy-03
- trash-02
  #icontrash-02
- copy-07
  #iconcopy-07
- filter-funnel-01-fill
  #iconfilter-funnel-01-fill
- arrow-narrow-right
  #iconarrow-narrow-right
- chevron-down
  #iconchevron-down
- switch-vertical-02
  #iconswitch-vertical-02
- arrow-up-left
  #iconarrow-up-left
- chevron-left
  #iconchevron-left
- arrow-narrow-left
  #iconarrow-narrow-left
- arrow-narrow-down
  #iconarrow-narrow-down
- chevron-right
  #iconchevron-right
- corner-down-left
  #iconcorner-down-left
- chevron-up
  #iconchevron-up
- arrow-narrow-up
  #iconarrow-narrow-up
- flash
  #iconflash
- grid-01
  #icongrid-01
- divider
  #icondivider
- clipboard-sale
  #iconclipboard-sale
- credit-card-down
  #iconcredit-card-down
- coins-hand
  #iconcoins-hand
- credit-card-up
  #iconcredit-card-up
- annotation-price
  #iconannotation-price
- file-question-02
  #iconfile-question-02
- package
  #iconpackage
- clipboard-price
  #iconclipboard-price
- shopping-cart-price
  #iconshopping-cart-price
- file-03
  #iconfile-03
- bar-chart-07
  #iconbar-chart-07
- currency-yen-circle
  #iconcurrency-yen-circle
- tool-02
  #icontool-02
- cube-01
  #iconcube-01
- package-search
  #iconpackage-search
- line-chart-up-02
  #iconline-chart-up-02
- briefcase-02
  #iconbriefcase-02
- file-search-02
  #iconfile-search-02
- bezier-curve-03
  #iconbezier-curve-03
- search-md
  #iconsearch-md
- target-04
  #icontarget-04
- compass
  #iconcompass
- menu-01
  #iconmenu-01
- move
  #iconmove
- user-minus-01
  #iconuser-minus-01
- user-x-01
  #iconuser-x-01
- user-edit
  #iconuser-edit
- user-check-01
  #iconuser-check-01
- users-01
  #iconusers-01
- user-01
  #iconuser-01
- user-plus-01
  #iconuser-plus-01
- clipboard-check
  #iconclipboard-check
- clipboard-x
  #iconclipboard-x
- clipboard-minus
  #iconclipboard-minus
- paperclip
  #iconpaperclip
- clipboard
  #iconclipboard
- clipboard-plus
  #iconclipboard-plus
- clipboard-attachment
  #iconclipboard-attachment
- pin-02
  #iconpin-02
- pin-01
  #iconpin-01
- rows-03
  #iconrows-03
- columns-03
  #iconcolumns-03
- link-broken-01
  #iconlink-broken-01
- link-01
  #iconlink-01
- qr-code-02
  #iconqr-code-02
- monitor-01
  #iconmonitor-01
- check-square-fill
  #iconcheck-square-fill
- circle
  #iconcircle
- check-circle
  #iconcheck-circle
- check-circle-fill
  #iconcheck-circle-fill
- square
  #iconsquare
- check-square
  #iconcheck-square
- font-minus-01
  #iconfont-minus-01
- font-plus-01
  #iconfont-plus-01
- file-04
  #iconfile-04
- stop
  #iconstop
- target-05
  #icontarget-05
- align-horizontal-centre-02
  #iconalign-horizontal-centre-02
- align-left-02
  #iconalign-left-02
- align-top-arrow-02
  #iconalign-top-arrow-02
- align-right-02
  #iconalign-right-02
- align-vertical-center-02
  #iconalign-vertical-center-02
- align-bottom-02
  #iconalign-bottom-02
- refresh-cw-01
  #iconrefresh-cw-01
- flip-forward
  #iconflip-forward
- flip-backward
  #iconflip-backward
- spacing-width-01
  #iconspacing-width-01
- upload-01
  #iconupload-01
- zoom-in
  #iconzoom-in
- download-01
  #icondownload-01
- spacing-height-01
  #iconspacing-height-01
- zoom-out
  #iconzoom-out
- brush-03-1
  #iconbrush-03-1
- calendar
  #iconcalendar
- type-01
  #icontype-01
- calendar-date
  #iconcalendar-date
- number-01
  #iconnumber-01
- building-05-fill
  #iconbuilding-05-fill
- building-05
  #iconbuilding-05
- home-smile-fill
  #iconhome-smile-fill
- truck-01-fill
  #icontruck-01-fill
- consult-price-fill
  #iconconsult-price-fill
- shopping-cart-01-fill
  #iconshopping-cart-01-fill
- shopping-cart-01
  #iconshopping-cart-01
- truck-01
  #icontruck-01
- home-smile
  #iconhome-smile
- consult-price
  #iconconsult-price
- bell-ringing-01
  #iconbell-ringing-01
- bell-01
  #iconbell-01
- palette
  #iconpalette
- sun
  #iconsun
- user-circle
  #iconuser-circle
- moon-01
  #iconmoon-01
- left-indent-01
  #iconleft-indent-01
- right-indent-01
  #iconright-indent-01
- translate-01
  #icontranslate-01
- maximize-02
  #iconmaximize-02
- minimize-02
  #iconminimize-02
- 压缩包
  #iconyasuobao
- excel
  #iconexcel
- txt
  #icontxt
- WORD
  #iconWORD
- 图片
  #icontupian
- bug
  #iconbug
- Reply
  #iconReply
- Reply
  #iconReply_bold
- face
  #iconface
- Like
  #iconLike_light
- Like
  #iconLike_bold
- logout
  #iconlogout
- Hide_light
  #iconHide_light
- Arrow - Down 3
  #iconArrow-Down3
- Arrow - Down Circle
  #iconArrow-DownCircle
- Arrow - Left 3
  #iconArrow-Left3
- Arrow - Down 2
  #iconArrow-Down2
- Arrow - Left Circle
  #iconArrow-LeftCircle
- Add User
  #iconAddUser
- Arrow - Down Square
  #iconArrow-DownSquare
- 2 User
  #icon2User
- Activity
  #iconActivity
- Arrow - Up 3
  #iconArrow-Up3
- Arrow - Right Circle
  #iconArrow-RightCircle
- Arrow - Left 2
  #iconArrow-Left2
- 3 User
  #icon3User
- Arrow - Right 2
  #iconArrow-Right2
- Arrow - Up 2
  #iconArrow-Up2
- Arrow - Left
  #iconArrow-Left
- Arrow - Right 3
  #iconArrow-Right3
- Arrow - Up
  #iconArrow-Up
- Arrow - Down
  #iconArrow-Down
- Call Silent
  #iconCallSilent
- Arrow - Up Circle
  #iconArrow-UpCircle
- Bag
  #iconBag
- Arrow - Left Square
  #iconArrow-LeftSquare
- Call
  #iconCall
- Buy
  #iconBuy
- Category
  #iconCategory
- Camera
  #iconCamera
- Arrow - Right Square
  #iconArrow-RightSquare
- Arrow - Right
  #iconArrow-Right
- Chart
  #iconChart
- Chat
  #iconChat
- Arrow - Up Square
  #iconArrow-UpSquare
- Delete
  #iconDelete
- Edit Square
  #iconEditSquare
- Bag 2
  #iconBag2
- Danger
  #iconDanger
- Document
  #iconDocument
- Call Missed
  #iconCallMissed
- Folder
  #iconFolder
- edition_bold
  #iconedition_bold
- checkout2_bold
  #iconcheckout2_bold
- Bookmark
  #iconBookmark
- Filter
  #iconFilter
- Discount
  #iconDiscount
- Filter 2
  #iconFilter2
- Close Square
  #iconCloseSquare
- Home
  #iconHome
- Calling
  #iconCalling
- Heart
  #iconHeart
- Calendar
  #iconCalendar
- Info Circle
  #iconInfoCircle
- honeycomb_bold
  #iconhoneycomb_bold
- Hide
  #iconHide
- Graph
  #iconGraph
- Discovery
  #iconDiscovery
- knowledge_bold
  #iconknowledge_bold
- Game
  #iconGame
- Edit
  #iconEdit
- Download
  #iconDownload
- Info Square
  #iconInfoSquare
- Location
  #iconLocation
- More Circle
  #iconMoreCircle
- empolder2_bold
  #iconempolder2_bold
- Message
  #iconMessage
- More Square
  #iconMoreSquare
- Notification
  #iconNotification
- Login
  #iconLogin
- Image
  #iconImage
- Logout
  #iconLogout
- Lock
  #iconLock
- honeycombs_bold
  #iconhoneycombs_bold
- Password
  #iconPassword
- Plus
  #iconPlus
- Paper Upload
  #iconPaperUpload
- Paper Download
  #iconPaperDownload
- Profile
  #iconProfile
- Paper Fail
  #iconPaperFail
- knowledge_set2_bold
  #iconknowledge_set2_bold
- Search
  #iconSearch
- Show
  #iconShow
- Send
  #iconSend
- Paper Plus
  #iconPaperPlus
- Image 2
  #iconImage2
- Shield Done
  #iconShieldDone
- Paper
  #iconPaper
- Setting
  #iconSetting
- Play
  #iconPlay
- Shield Fail
  #iconShieldFail
- Tick Square
  #iconTickSquare
- Scan
  #iconScan
- Ticket Star
  #iconTicketStar
- Time Circle
  #iconTimeCircle
- Star
  #iconStar
- Unlock
  #iconUnlock
- Ticket
  #iconTicket
- Time Square
  #iconTimeSquare
- Paper Negative
  #iconPaperNegative
- Upload
  #iconUpload
- Swap
  #iconSwap
- Voice
  #iconVoice
- Volume Down
  #iconVolumeDown
- Voice 2
  #iconVoice2
- Volume Up
  #iconVolumeUp
- Volume Off
  #iconVolumeOff
- Wallet
  #iconWallet
- Work
  #iconWork
- Video
  #iconVideo
- Activity_light
  #iconActivity_light
- Arrow - Down Circle_light
  #iconArrow-DownCircle_light
- 2 User_light
  #icon2User_light
- Arrow - Right Circle_light
  #iconArrow-RightCircle_light
- Arrow - Right Square_light
  #iconArrow-RightSquare_light
- 3 User_light
  #icon3User_light
- Add User_light
  #iconAddUser_light
- Arrow - Left Square_light
  #iconArrow-LeftSquare_light
- Arrow - Down Square_light
  #iconArrow-DownSquare_light
- Arrow - Up -Left Square_light
  #iconArrow-Up-LeftSquare_light
- Bag 3_light
  #iconBag3_light
- Arrow - Up Square_light
  #iconArrow-UpSquare_light
- Author
  #iconAuthor
- Bag_light
  #iconBag_light
- Bookmark_light
  #iconBookmark_light
- Buy_light
  #iconBuy_light
- Chart_light
  #iconChart_light
- Calendar_light
  #iconCalendar_light
- Camera_light
  #iconCamera_light
- Call_light
  #iconCall_light
- Danger Triangle_light
  #iconDangerTriangle_light
- Call Silent_light
  #iconCallSilent_light
- Call Missed_light
  #iconCallMissed_light
- Close Square_light
  #iconCloseSquare_light
- Danger Circle_light
  #iconDangerCircle_light
- Delete_light
  #iconDelete_light
- Edit Square_light
  #iconEditSquare_light
- Filter_light
  #iconFilter_light
- Discovery_light
  #iconDiscovery_light
- Document_light
  #iconDocument_light
- Discount_light
  #iconDiscount_light
- Calling_light
  #iconCalling_light
- Filter 3_light
  #iconFilter3_light
- Game_light
  #iconGame_light
- Folder_light
  #iconFolder_light
- honeycomb_light
  #iconhoneycomb_light
- Graph_light
  #iconGraph_light
- Category_light
  #iconCategory_light
- Home_light
  #iconHome_light
- Heart_light
  #iconHeart_light
- Info Square_light
  #iconInfoSquare_light
- Chat_light
  #iconChat_light
- honeycombs_light
  #iconhoneycombs_light
- Location_light
  #iconLocation_light
- Login_light
  #iconLogin_light
- left-fold_light
  #iconleft-fold_light
- Lock_light
  #iconLock_light
- More Circle_light
  #iconMoreCircle_light
- Logout_light
  #iconLogout_light
- Download_light
  #iconDownload_light
- Image 3_light
  #iconImage3_light
- knowledge_set_light
  #iconknowledge_set_light
- Arrow - Left Circle_light
  #iconArrow-LeftCircle_light
- More Square_light
  #iconMoreSquare_light
- Message_light
  #iconMessage_light
- Paper Download_light
  #iconPaperDownload_light
- Notification_light
  #iconNotification_light
- Arrow - Up Circle_light
  #iconArrow-UpCircle_light
- Paper Plus_light
  #iconPaperPlus_light
- Plus_light
  #iconPlus_light
- Paper Upload_light
  #iconPaperUpload_light
- Paper Negative_light
  #iconPaperNegative_light
- knowledge_light
  #iconknowledge_light
- Paper_light
  #iconPaper_light
- Scan_light
  #iconScan_light
- Refresh_light
  #iconRefresh_light
- Profile_light
  #iconProfile_light
- Send_light
  #iconSend_light
- Password_light
  #iconPassword_light
- Play_light
  #iconPlay_light
- Search_light
  #iconSearch_light
- right-fold_light
  #iconright-fold_light
- Paper Fail_light
  #iconPaperFail_light
- Shield Done_light
  #iconShieldDone_light
- Swap_light
  #iconSwap_light
- Tick Square_light
  #iconTickSquare_light
- Ticket Star_light
  #iconTicketStar_light
- Setting_light
  #iconSetting_light
- Ticket_light
  #iconTicket_light
- Upload_light
  #iconUpload_light
- Time Circle_light
  #iconTimeCircle_light
- Show_light
  #iconShow_light
- Shield Fail_light
  #iconShieldFail_light
- Voice 3_light
  #iconVoice3_light
- To - Top_light
  #iconTo-Top_light
- Unlock_light
  #iconUnlock_light
- Time Square_light
  #iconTimeSquare_light
- Wallet_light
  #iconWallet_light
- Voice_light
  #iconVoice_light
- Video_light
  #iconVideo_light
- Volume Down_light
  #iconVolumeDown_light
- Work_light
  #iconWork_light
- wrong_light
  #iconwrong_light
- Volume Up_light
  #iconVolumeUp_light
- Volume Off_light
  #iconVolumeOff_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>