# iconfont Demo

#

- 
  关于我们
  &#xe654;
- 
  _钉子
  &#xe659;
- 
  新增
  &#xe61b;
- 
  新增添加
  &#xe61c;
- 
  夜晚
  &#xe67e;
- 
  Minimize-1
  &#xe65b;
- 
  Maximize-1
  &#xe65d;
- 
  Maximize-3
  &#xe692;
- 
  编辑
  &#xe621;
- 
  最大化
  &#xe617;
- 
  语音
  &#xe607;
- 
  发送
  &#xe6bd;
- 
  密码
  &#xe66d;
- 
  添加图片
  &#xe62c;
- 
  语音
  &#xe618;
- 
  语音
  &#xe672;
- 
  点点
  &#xe653;
- 
  图片
  &#xe62f;
- 
  点点
  &#xe93e;
- 
  设置
  &#xe6a9;
- 
  清除
  &#xe72e;
- 
  暗黑模式
  &#xe72f;
- 
  多语言
  &#xe734;
- 
  模板参数
  &#xe736;
- 
  发布
  &#xe73b;
- 
  设置
  &#xe73c;
- 
  明亮模式
  &#xe748;
- 
  关闭
  &#xe767;
- 
  上下移动
  &#xe6c9;
- 
  左右移动
  &#xe6ca;
- 
  初始化
  &#xe604;
- 
  播放-上一个
  &#xe68b;
- 
  播放-下一个
  &#xe68d;
- 
  放大镜1-线型
  &#xe6ac;
- 
  放大镜2-线型
  &#xe6ad;
- 
  图片2-面型
  &#xe6fd;
- 
  下载5
  &#xe6ff;
- 
  逆时针旋转
  &#xe65a;
- 
  顺时针旋转
  &#xe65c;
- 
  收起
  &#xe619;
- 
  全屏
  &#xe61a;
- 
  排序
  &#xe610;
- 
  向上
  &#xe611;
- 
  向下
  &#xe612;
- 
  全屏
  &#xe613;
- 
  收起列
  &#xe614;
- 
  下拉
  &#xe615;
- 
  全屏退出
  &#xe616;
- 
  enter
  &#xe872;
- 
  enviroment
  &#xe873;
- 
  enviroment-o
  &#xe874;
- 
  exclamation-circle-o
  &#xe875;
- 
  exclamation-circle
  &#xe876;
- 
  exception
  &#xe877;
- 
  export
  &#xe878;
- 
  exclefile
  &#xe879;
- 
  export2
  &#xe87a;
- 
  eye-o
  &#xe87b;
- 
  eye
  &#xe87c;
- 
  file
  &#xe87d;
- 
  filetext
  &#xe87e;
- 
  filter
  &#xe87f;
- 
  folder
  &#xe880;
- 
  folderopen
  &#xe881;
- 
  frown-o
  &#xe882;
- 
  github
  &#xe883;
- 
  frown
  &#xe884;
- 
  hdd
  &#xe885;
- 
  heart-o
  &#xe886;
- 
  heart
  &#xe887;
- 
  inbox
  &#xe888;
- 
  ie
  &#xe889;
- 
  info-cirlce
  &#xe88a;
- 
  info-cirlce-o
  &#xe88b;
- 
  left-circle-o
  &#xe88c;
- 
  jpgfile
  &#xe88d;
- 
  laptop
  &#xe88e;
- 
  left-square
  &#xe88f;
- 
  left-circle
  &#xe890;
- 
  left-square-o
  &#xe891;
- 
  left
  &#xe892;
- 
  like_fill
  &#xe893;
- 
  linechart
  &#xe894;
- 
  loading1
  &#xe895;
- 
  lock
  &#xe897;
- 
  meho
  &#xe89a;
- 
  meh
  &#xe89b;
- 
  menufold
  &#xe89c;
- 
  menuunfold
  &#xe89d;
- 
  minus-circle-o
  &#xe89e;
- 
  minus-square-o
  &#xe89f;
- 
  minus-circle
  &#xe8a0;
- 
  minus-square
  &#xe8a2;
- 
  mobile
  &#xe8a4;
- 
  paperclip
  &#xe8a5;
- 
  notification
  &#xe8a6;
- 
  pause-circle
  &#xe8a7;
- 
  pause-circle-o
  &#xe8a8;
- 
  pay-circle
  &#xe8a9;
- 
  pay-circle-o
  &#xe8aa;
- 
  pen
  &#xe8ab;
- 
  pdffile
  &#xe8ac;
- 
  piechart
  &#xe8af;
- 
  play
  &#xe8b0;
- 
  play-circle-o
  &#xe8b1;
- 
  plus-circle-o
  &#xe8b2;
- 
  plus-square-o
  &#xe8b3;
- 
  plus-circle
  &#xe8b4;
- 
  plus
  &#xe8b5;
- 
  poweroff
  &#xe8b6;
- 
  plus-square
  &#xe8b7;
- 
  pushpin
  &#xe8b8;
- 
  pushpin-o
  &#xe8b9;
- 
  reload
  &#xe8ba;
- 
  question-circle-o
  &#xe8bb;
- 
  question-circle
  &#xe8bc;
- 
  qrcode
  &#xe8bd;
- 
  retweet
  &#xe8be;
- 
  right-circle
  &#xe8bf;
- 
  right-circle-o
  &#xe8c0;
- 
  right-square-o
  &#xe8c1;
- 
  right-square
  &#xe8c2;
- 
  rollback
  &#xe8c3;
- 
  right
  &#xe8c4;
- 
  save
  &#xe8c6;
- 
  shoppingcart
  &#xe8c7;
- 
  scan
  &#xe8c8;
- 
  shrink
  &#xe8c9;
- 
  sharealt
  &#xe8ca;
- 
  setting
  &#xe8cb;
- 
  smile
  &#xe8cc;
- 
  smile-o
  &#xe8cd;
- 
  star-o
  &#xe8ce;
- 
  solution
  &#xe8cf;
- 
  star
  &#xe8d0;
- 
  stepforward
  &#xe8d1;
- 
  stepbackward
  &#xe8d2;
- 
  swap
  &#xe8d3;
- 
  swapleft
  &#xe8d4;
- 
  tag-o
  &#xe8d5;
- 
  tablet
  &#xe8d6;
- 
  swapright
  &#xe8d7;
- 
  tag
  &#xe8d8;
- 
  tags
  &#xe8d9;
- 
  tagso
  &#xe8da;
- 
  rest
  &#xe733;
- 
  team
  &#xe8db;
- 
  search
  &#xe735;
- 
  totop
  &#xe8dc;
- 
  smile
  &#xe737;
- 
  unlock
  &#xe8dd;
- 
  tag
  &#xe738;
- 
  up-circle-o
  &#xe8de;
- 
  top
  &#xe73a;
- 
  up-circle
  &#xe8df;
- 
  user
  &#xe73e;
- 
  up-square-o
  &#xe8e0;
- 
  link
  &#xe740;
- 
  up-square
  &#xe8e1;
- 
  logout
  &#xe742;
- 
  up
  &#xe8e2;
- 
  mail
  &#xe743;
- 
  verticleleft
  &#xe8e3;
- 
  minus
  &#xe744;
- 
  mobile
  &#xe745;
- 
  upload
  &#xe8e5;
- 
  note
  &#xe746;
- 
  windows-o
  &#xe8e6;
- 
  notification
  &#xe747;
- 
  windows
  &#xe8e7;
- 
  picture
  &#xe749;
- 
  wordfile
  &#xe8e8;
- 
  place
  &#xe74a;
- 
  note_fill
  &#xe8e9;
- 
  plus
  &#xe74b;
- 
  mail_fill
  &#xe8ea;
- 
  edit
  &#xe74c;
- 
  export_fill
  &#xe8eb;
- 
  ellipsis
  &#xe74d;
- 
  export
  &#xe74e;
- 
  express
  &#xe74f;
- 
  eye
  &#xe750;
- 
  edit
  &#xe8ef;
- 
  file
  &#xe751;
- 
  addfile
  &#xe8f0;
- 
  filter
  &#xe752;
- 
  bulb
  &#xe8f1;
- 
  history
  &#xe755;
- 
  addfolder
  &#xe8f2;
- 
  home
  &#xe756;
- 
  id
  &#xe8f3;
- 
  info
  &#xe757;
- 
  card
  &#xe8f4;
- 
  laptop
  &#xe758;
- 
  appstore
  &#xe75a;
- 
  calender
  &#xe75c;
- 
  plugin
  &#xe8f7;
- 
  change
  &#xe75d;
- 
  chart
  &#xe75e;
- 
  menu
  &#xe8f9;
- 
  check
  &#xe75f;
- 
  reload
  &#xe8fa;
- 
  clip
  &#xe760;
- 
  clock
  &#xe761;
- 
  setting_fill
  &#xe8fc;
- 
  computer
  &#xe762;
- 
  dashboard_fill
  &#xe8fd;
- 
  cross
  &#xe763;
- 
  send
  &#xe8fe;
- 
  dashboard
  &#xe764;
- 
  rocket_fill
  &#xe8ff;
- 
  delete
  &#xe765;
- 
  schedule_fill
  &#xe900;
- 
  download
  &#xe766;
- 
  schedule
  &#xe901;
- 
  message
  &#xe768;
- 
  team_fill
  &#xe902;
- 
  bars
  &#xe76a;
- 
  move
  &#xe903;
- 
  hide
  &#xe76b;
- 
  express_fill
  &#xe904;
- 
  eye
  &#xe76c;
- 
  warranty
  &#xe905;
- 
  zoom in
  &#xe76d;
- 
  tstar_3
  &#xe906;
- 
  zoom out
  &#xe76e;
- 
  tstar_2
  &#xe907;
- 
  ac rotate
  &#xe770;
- 
  tstar_1
  &#xe908;
- 
  cw rotate
  &#xe771;
- 
  tstar_4
  &#xe909;
- 
  heart
  &#xe772;
- 
  pay
  &#xe90a;
- 
  like
  &#xe773;
- 
  wifi
  &#xe90b;
- 
  arrow_right
  &#xe774;
- 
  customermanager
  &#xe90c;
- 
  arrow_up
  &#xe775;
- 
  drag
  &#xe90d;
- 
  arrow down
  &#xe776;
- 
  enterprise
  &#xe90e;
- 
  arrow_left
  &#xe777;
- 
  channel
  &#xe90f;
- 
  favor_fill
  &#xe778;
- 
  compass
  &#xe910;
- 
  heart_fill
  &#xe779;
- 
  database
  &#xe911;
- 
  dislike
  &#xe77a;
- 
  contacts
  &#xe912;
- 
  account
  &#xe77b;
- 
  key
  &#xe913;
- 
  menu off
  &#xe77c;
- 
  global
  &#xe914;
- 
  menu on
  &#xe77d;
- 
  red-envelope
  &#xe915;
- 
  order select
  &#xe77e;
- 
  layout
  &#xe916;
- 
  order
  &#xe77f;
- 
  printer
  &#xe917;
- 
  favor
  &#xe780;
- 
  skin
  &#xe918;
- 
  id input
  &#xe781;
- 
  table
  &#xe919;
- 
  rank
  &#xe785;
- 
  wallet
  &#xe91a;
- 
  sort
  &#xe786;
- 
  gift
  &#xe91b;
- 
  automation
  &#xe788;
- 
  car
  &#xe91c;
- 
  caret_down
  &#xe789;
- 
  coffee
  &#xe91d;
- 
  caret_up
  &#xe78a;
- 
  case-o
  &#xe91e;
- 
  reload
  &#xe78c;
- 
  order-o
  &#xe91f;
- 
  flag_fill
  &#xe78d;
- 
  flag
  &#xe78e;
- 
  call_in
  &#xe78f;
- 
  call_out
  &#xe790;
- 
  dial
  &#xe791;
- 
  refund
  &#xe792;
- 
  message_fill
  &#xe793;
- 
  phone_fill
  &#xe794;
- 
  phone
  &#xe797;
- 
  clock_fill
  &#xe798;
- 
  notification_fill
  &#xe799;
- 
  cut
  &#xe79c;
- 
  book
  &#xe79d;
- 
  barrage
  &#xe79e;
- 
  male
  &#xe7a0;
- 
  female
  &#xe7a1;
- 
  expand
  &#xe7a4;
- 
  refund
  &#xe7a6;
- 
  pie-chart
  &#xe7a7;
- 
  backspace
  &#xe7a9;
- 
  Invalid
  &#xe7c0;
- 
  repeat
  &#xe7c1;
- 
  timeout
  &#xe7c2;
- 
  urged
  &#xe7c3;
- 
  intervene
  &#xe7c4;
- 
  voice
  &#xe7c5;
- 
  apple
  &#xe83a;
- 
  appstore-o
  &#xe83b;
- 
  areachart
  &#xe83c;
- 
  apple-o
  &#xe83d;
- 
  android
  &#xe83e;
- 
  appstore
  &#xe83f;
- 
  arrowsalt
  &#xe840;
- 
  banckward
  &#xe841;
- 
  bars
  &#xe842;
- 
  book
  &#xe843;
- 
  barchart
  &#xe844;
- 
  calendar
  &#xe845;
- 
  camera-o
  &#xe846;
- 
  caretleft
  &#xe847;
- 
  caretdown
  &#xe848;
- 
  calculator
  &#xe849;
- 
  camera
  &#xe84a;
- 
  caretright
  &#xe84b;
- 
  check-circle
  &#xe84c;
- 
  caretup
  &#xe84d;
- 
  check-circle-o
  &#xe84e;
- 
  check-square
  &#xe84f;
- 
  check-square-o
  &#xe850;
- 
  circledown
  &#xe851;
- 
  chrome
  &#xe852;
- 
  check
  &#xe853;
- 
  circledown-o
  &#xe854;
- 
  clock-circle
  &#xe855;
- 
  clock-circle-o
  &#xe856;
- 
  close-circle-o
  &#xe857;
- 
  close-circle
  &#xe858;
- 
  close-square-o
  &#xe859;
- 
  close-square
  &#xe85a;
- 
  close
  &#xe85b;
- 
  clouddownload-o
  &#xe85c;
- 
  clouddownload
  &#xe85d;
- 
  cloudupload-o
  &#xe85e;
- 
  cloudupload
  &#xe85f;
- 
  code-square-o
  &#xe860;
- 
  code-square
  &#xe861;
- 
  creditcard
  &#xe862;
- 
  copy
  &#xe863;
- 
  desktop
  &#xe864;
- 
  customerservice
  &#xe866;
- 
  dislike_fill
  &#xe867;
- 
  dotchart
  &#xe868;
- 
  doubleleft
  &#xe869;
- 
  doubleright
  &#xe86a;
- 
  down-circle-o
  &#xe86b;
- 
  down-circle
  &#xe86c;
- 
  down
  &#xe86d;
- 
  down-square-o
  &#xe86e;
- 
  down-square
  &#xe86f;
- 
  ellipsis
  &#xe870;
- 
  download
  &#xe871;
- 
  切换语言
  &#xe66a;

## Unicode 引用

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

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

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

Unicode 使用步骤如下：

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

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

- 关于我们
  .ve-icon-about
- _钉子
  .ve-icon-pin
- 新增
  .ve-icon-addfiletext
- 新增添加
  .ve-icon-addnote
- 夜晚
  .ve-icon-yewan
- Minimize-1
  .ve-icon-minimize
- Maximize-1
  .ve-icon-maximize
- Maximize-3
  .ve-icon-maxrestore
- 编辑
  .ve-icon-bianji
- 最大化
  .ve-icon-restore
- 语音
  .ve-icon-yuyin1
- 发送
  .ve-icon-submit
- 密码
  .ve-icon-mima
- 添加图片
  .ve-icon-image
- 语音
  .ve-icon-audio
- 语音
  .ve-icon-yuyin
- 点点
  .ve-icon-dots
- 图片
  .ve-icon-photo
- 点点
  .ve-icon-vdots
- 设置
  .ve-icon-filter2
- 清除
  .ve-icon-clean
- 暗黑模式
  .ve-icon-dark
- 多语言
  .ve-icon-language
- 模板参数
  .ve-icon-layers-o
- 发布
  .ve-icon-send-o
- 设置
  .ve-icon-settings-o
- 明亮模式
  .ve-icon-sunny
- 关闭
  .ve-icon-guanbi
- 上下移动
  .ve-icon-scaleY
- 左右移动
  .ve-icon-scaleX
- 初始化
  .ve-icon-reset
- 播放-上一个
  .ve-icon-prev
- 播放-下一个
  .ve-icon-next
- 放大镜1-线型
  .ve-icon-zoomBig
- 放大镜2-线型
  .ve-icon-zoomSmall
- 图片2-面型
  .ve-icon-imgerr
- 下载5
  .ve-icon-downfile
- 逆时针旋转
  .ve-icon-rotateLeft
- 顺时针旋转
  .ve-icon-rotateRight
- 收起
  .ve-icon-shouqi
- 全屏
  .ve-icon-quanping
- 排序
  .ve-icon-paixu
- 向上
  .ve-icon-xiangshang
- 向下
  .ve-icon-xiangxia
- 全屏
  .ve-icon-full
- 收起列
  .ve-icon-collapse
- 下拉
  .ve-icon-xiala
- 全屏退出
  .ve-icon-unfull
- enter
  .ve-icon-enter
- enviroment
  .ve-icon-enviroment
- enviroment-o
  .ve-icon-enviroment-o
- exclamation-circle-o
  .ve-icon-exclamation-circle-o
- exclamation-circle
  .ve-icon-exclamation-circle
- exception
  .ve-icon-exception
- export
  .ve-icon-export1
- exclefile
  .ve-icon-exclefile
- export2
  .ve-icon-export2
- eye-o
  .ve-icon-eye-o
- eye
  .ve-icon-eye2
- file
  .ve-icon-fileplain
- filetext
  .ve-icon-filetext
- filter
  .ve-icon-filter1
- folder
  .ve-icon-folder
- folderopen
  .ve-icon-folderopen
- frown-o
  .ve-icon-frown-o
- github
  .ve-icon-github
- frown
  .ve-icon-frown
- hdd
  .ve-icon-hdd
- heart-o
  .ve-icon-heart-o
- heart
  .ve-icon-heart1
- inbox
  .ve-icon-inbox
- ie
  .ve-icon-ie
- info-cirlce
  .ve-icon-info-cirlce
- info-cirlce-o
  .ve-icon-info-cirlce-o
- left-circle-o
  .ve-icon-left-circle-o
- jpgfile
  .ve-icon-jpgfile
- laptop
  .ve-icon-laptop1
- left-square
  .ve-icon-left-square
- left-circle
  .ve-icon-left-circle
- left-square-o
  .ve-icon-left-square-o
- left
  .ve-icon-left
- like_fill
  .ve-icon-like1
- linechart
  .ve-icon-linechart
- loading1
  .ve-icon-loading
- lock
  .ve-icon-lock
- meho
  .ve-icon-meho
- meh
  .ve-icon-meh
- menufold
  .ve-icon-menufold
- menuunfold
  .ve-icon-menuunfold
- minus-circle-o
  .ve-icon-minus-circle-o
- minus-square-o
  .ve-icon-minus-square-o
- minus-circle
  .ve-icon-minus-circle
- minus-square
  .ve-icon-minus-square
- mobile
  .ve-icon-mobile1
- paperclip
  .ve-icon-paperclip
- notification
  .ve-icon-notification1
- pause-circle
  .ve-icon-pause-circle
- pause-circle-o
  .ve-icon-pause-circle-o
- pay-circle
  .ve-icon-pay-circle
- pay-circle-o
  .ve-icon-pay-circle-o
- pen
  .ve-icon-pen
- pdffile
  .ve-icon-pdffile
- piechart
  .ve-icon-piechart
- play
  .ve-icon-play
- play-circle-o
  .ve-icon-play-circle-o
- plus-circle-o
  .ve-icon-plus-circle-o
- plus-square-o
  .ve-icon-plus-square-o
- plus-circle
  .ve-icon-plus-circle
- plus
  .ve-icon-plus1
- poweroff
  .ve-icon-poweroff
- plus-square
  .ve-icon-plus-square
- pushpin
  .ve-icon-pushpin
- pushpin-o
  .ve-icon-pushpin-o
- reload
  .ve-icon-reload1
- question-circle-o
  .ve-icon-question-circle-o
- question-circle
  .ve-icon-question-circle
- qrcode
  .ve-icon-qrcode
- retweet
  .ve-icon-retweet
- right-circle
  .ve-icon-right-circle
- right-circle-o
  .ve-icon-right-circle-o
- right-square-o
  .ve-icon-right-square-o
- right-square
  .ve-icon-right-square
- rollback
  .ve-icon-rollback
- right
  .ve-icon-right
- save
  .ve-icon-save
- shoppingcart
  .ve-icon-shoppingcart
- scan
  .ve-icon-scan
- shrink
  .ve-icon-shrink
- sharealt
  .ve-icon-sharealt
- setting
  .ve-icon-setting
- smile
  .ve-icon-smile1
- smile-o
  .ve-icon-smile-o
- star-o
  .ve-icon-star-o
- solution
  .ve-icon-solution
- star
  .ve-icon-star
- stepforward
  .ve-icon-stepforward
- stepbackward
  .ve-icon-stepbackward
- swap
  .ve-icon-swap
- swapleft
  .ve-icon-swapleft
- tag-o
  .ve-icon-tag-o
- tablet
  .ve-icon-tablet
- swapright
  .ve-icon-swapright
- tag
  .ve-icon-tag1
- tags
  .ve-icon-tags
- tagso
  .ve-icon-tagso
- rest
  .ve-icon-rest
- team
  .ve-icon-team
- search
  .ve-icon-search
- totop
  .ve-icon-totop
- smile
  .ve-icon-smile
- unlock
  .ve-icon-unlock
- tag
  .ve-icon-tag
- up-circle-o
  .ve-icon-up-circle-o
- top
  .ve-icon-top
- up-circle
  .ve-icon-up-circle
- user
  .ve-icon-user
- up-square-o
  .ve-icon-up-square-o
- link
  .ve-icon-link
- up-square
  .ve-icon-up-square
- logout
  .ve-icon-logout
- up
  .ve-icon-up
- mail
  .ve-icon-mail
- verticleleft
  .ve-icon-verticleleft
- minus
  .ve-icon-minus
- mobile
  .ve-icon-mobile
- upload
  .ve-icon-upload
- note
  .ve-icon-note
- windows-o
  .ve-icon-windows-o
- notification
  .ve-icon-notification
- windows
  .ve-icon-windows
- picture
  .ve-icon-picture
- wordfile
  .ve-icon-wordfile
- place
  .ve-icon-place
- note_fill
  .ve-icon-note_fill
- plus
  .ve-icon-plus
- mail_fill
  .ve-icon-mail_fill
- edit
  .ve-icon-edit
- export_fill
  .ve-icon-export_fill
- ellipsis
  .ve-icon-ellipsis
- export
  .ve-icon-export
- express
  .ve-icon-express
- eye
  .ve-icon-eye
- edit
  .ve-icon-edit1
- file
  .ve-icon-file
- addfile
  .ve-icon-addfile
- filter
  .ve-icon-filter
- bulb
  .ve-icon-bulb
- history
  .ve-icon-history
- addfolder
  .ve-icon-addfolder
- home
  .ve-icon-home
- id
  .ve-icon-id
- info
  .ve-icon-info
- card
  .ve-icon-card
- laptop
  .ve-icon-laptop
- appstore
  .ve-icon-appstore
- calender
  .ve-icon-calender
- plugin
  .ve-icon-plugin
- change
  .ve-icon-change
- chart
  .ve-icon-chart
- menu
  .ve-icon-menu
- check
  .ve-icon-check
- reload
  .ve-icon-reload2
- clip
  .ve-icon-clip
- clock
  .ve-icon-clock
- setting_fill
  .ve-icon-setting_fill
- computer
  .ve-icon-computer
- dashboard_fill
  .ve-icon-dashboard_fill
- cross
  .ve-icon-cross
- send
  .ve-icon-send
- dashboard
  .ve-icon-dashboard
- rocket_fill
  .ve-icon-rocket_fill
- delete
  .ve-icon-delete
- schedule_fill
  .ve-icon-schedulefill
- download
  .ve-icon-download
- schedule
  .ve-icon-schedule
- message
  .ve-icon-message
- team_fill
  .ve-icon-team_fill
- bars
  .ve-icon-bars
- move
  .ve-icon-move
- hide
  .ve-icon-hide
- express_fill
  .ve-icon-express_fill
- eye
  .ve-icon-eye1
- warranty
  .ve-icon-warranty
- zoom in
  .ve-icon-zoomin
- tstar_3
  .ve-icon-tstar_
- zoom out
  .ve-icon-zoomout
- tstar_2
  .ve-icon-tstar_1
- ac rotate
  .ve-icon-acrotate
- tstar_1
  .ve-icon-tstar_2
- cw rotate
  .ve-icon-cwrotate
- tstar_4
  .ve-icon-tstar_3
- heart
  .ve-icon-heart
- pay
  .ve-icon-pay
- like
  .ve-icon-like
- wifi
  .ve-icon-wifi
- arrow_right
  .ve-icon-arrowright
- customermanager
  .ve-icon-customermanager
- arrow_up
  .ve-icon-arrowup
- drag
  .ve-icon-drag
- arrow down
  .ve-icon-arrowdown
- enterprise
  .ve-icon-enterprise
- arrow_left
  .ve-icon-arrowleft
- channel
  .ve-icon-channel
- favor_fill
  .ve-icon-favorfill
- compass
  .ve-icon-compass
- heart_fill
  .ve-icon-heartfill
- database
  .ve-icon-database
- dislike
  .ve-icon-dislike
- contacts
  .ve-icon-contacts
- account
  .ve-icon-account
- key
  .ve-icon-key
- menu off
  .ve-icon-menuoff
- global
  .ve-icon-global
- menu on
  .ve-icon-menuon
- red-envelope
  .ve-icon-red-envelope
- order select
  .ve-icon-orderselect
- layout
  .ve-icon-layout
- order
  .ve-icon-order
- printer
  .ve-icon-printer
- favor
  .ve-icon-favor
- skin
  .ve-icon-skin
- id input
  .ve-icon-idinput
- table
  .ve-icon-table
- rank
  .ve-icon-rank
- wallet
  .ve-icon-wallet
- sort
  .ve-icon-sort
- gift
  .ve-icon-gift
- automation
  .ve-icon-automation
- car
  .ve-icon-car
- caret_down
  .ve-icon-caretdown
- coffee
  .ve-icon-coffee
- caret_up
  .ve-icon-caretup
- case-o
  .ve-icon-case-o
- reload
  .ve-icon-reload
- order-o
  .ve-icon-order-o
- flag_fill
  .ve-icon-flagfill
- flag
  .ve-icon-flag
- call_in
  .ve-icon-callin
- call_out
  .ve-icon-callout
- dial
  .ve-icon-dial
- refund
  .ve-icon-refund
- message_fill
  .ve-icon-messagefill
- phone_fill
  .ve-icon-phonefill
- phone
  .ve-icon-phone
- clock_fill
  .ve-icon-clockfill
- notification_fill
  .ve-icon-notificationfill
- cut
  .ve-icon-cut
- book
  .ve-icon-book
- barrage
  .ve-icon-barrage
- male
  .ve-icon-male
- female
  .ve-icon-female
- expand
  .ve-icon-expand
- refund
  .ve-icon-refund1
- pie-chart
  .ve-icon-pie-chart
- backspace
  .ve-icon-backspace
- Invalid
  .ve-icon-Invalid
- repeat
  .ve-icon-repeat
- timeout
  .ve-icon-timeout
- urged
  .ve-icon-urged
- intervene
  .ve-icon-intervene
- voice
  .ve-icon-voice
- apple
  .ve-icon-apple
- appstore-o
  .ve-icon-appstore-o
- areachart
  .ve-icon-areachart
- apple-o
  .ve-icon-apple-o
- android
  .ve-icon-android
- appstore
  .ve-icon-appstore1
- arrowsalt
  .ve-icon-arrowsalt
- banckward
  .ve-icon-banckward
- bars
  .ve-icon-bars1
- book
  .ve-icon-book1
- barchart
  .ve-icon-barchart
- calendar
  .ve-icon-calendar
- camera-o
  .ve-icon-camera-o
- caretleft
  .ve-icon-caretleft
- caretdown
  .ve-icon-caretdown1
- calculator
  .ve-icon-calculator
- camera
  .ve-icon-camera
- caretright
  .ve-icon-caretright
- check-circle
  .ve-icon-check-circle
- caretup
  .ve-icon-caretup1
- check-circle-o
  .ve-icon-check-circle-o
- check-square
  .ve-icon-check-square
- check-square-o
  .ve-icon-check-square-o
- circledown
  .ve-icon-circledown
- chrome
  .ve-icon-chrome
- check
  .ve-icon-check1
- circledown-o
  .ve-icon-circledown-o
- clock-circle
  .ve-icon-clock-circle
- clock-circle-o
  .ve-icon-clock-circle-o
- close-circle-o
  .ve-icon-close-circle-o
- close-circle
  .ve-icon-close-circle
- close-square-o
  .ve-icon-close-square-o
- close-square
  .ve-icon-close-square
- close
  .ve-icon-close
- clouddownload-o
  .ve-icon-clouddownload-o
- clouddownload
  .ve-icon-clouddownload
- cloudupload-o
  .ve-icon-cloudupload-o
- cloudupload
  .ve-icon-cloudupload
- code-square-o
  .ve-icon-code-square-o
- code-square
  .ve-icon-code-square
- creditcard
  .ve-icon-creditcard
- copy
  .ve-icon-copy
- desktop
  .ve-icon-desktop
- customerservice
  .ve-icon-customerservice
- dislike_fill
  .ve-icon-dislike1
- dotchart
  .ve-icon-dotchart
- doubleleft
  .ve-icon-doubleleft
- doubleright
  .ve-icon-doubleright
- down-circle-o
  .ve-icon-down-circle-o
- down-circle
  .ve-icon-down-circle
- down
  .ve-icon-down
- down-square-o
  .ve-icon-down-square-o
- down-square
  .ve-icon-down-square
- ellipsis
  .ve-icon-ellipsis1
- download
  .ve-icon-download1
- 切换语言
  .ve-icon-lang

## font-class 引用

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

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

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

使用步骤如下：

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

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

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

    <span class="iconfont ve-icon-xxx"></span>

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

- 关于我们
  #ve-icon-about
- _钉子
  #ve-icon-pin
- 新增
  #ve-icon-addfiletext
- 新增添加
  #ve-icon-addnote
- 夜晚
  #ve-icon-yewan
- Minimize-1
  #ve-icon-minimize
- Maximize-1
  #ve-icon-maximize
- Maximize-3
  #ve-icon-maxrestore
- 编辑
  #ve-icon-bianji
- 最大化
  #ve-icon-restore
- 语音
  #ve-icon-yuyin1
- 发送
  #ve-icon-submit
- 密码
  #ve-icon-mima
- 添加图片
  #ve-icon-image
- 语音
  #ve-icon-audio
- 语音
  #ve-icon-yuyin
- 点点
  #ve-icon-dots
- 图片
  #ve-icon-photo
- 点点
  #ve-icon-vdots
- 设置
  #ve-icon-filter2
- 清除
  #ve-icon-clean
- 暗黑模式
  #ve-icon-dark
- 多语言
  #ve-icon-language
- 模板参数
  #ve-icon-layers-o
- 发布
  #ve-icon-send-o
- 设置
  #ve-icon-settings-o
- 明亮模式
  #ve-icon-sunny
- 关闭
  #ve-icon-guanbi
- 上下移动
  #ve-icon-scaleY
- 左右移动
  #ve-icon-scaleX
- 初始化
  #ve-icon-reset
- 播放-上一个
  #ve-icon-prev
- 播放-下一个
  #ve-icon-next
- 放大镜1-线型
  #ve-icon-zoomBig
- 放大镜2-线型
  #ve-icon-zoomSmall
- 图片2-面型
  #ve-icon-imgerr
- 下载5
  #ve-icon-downfile
- 逆时针旋转
  #ve-icon-rotateLeft
- 顺时针旋转
  #ve-icon-rotateRight
- 收起
  #ve-icon-shouqi
- 全屏
  #ve-icon-quanping
- 排序
  #ve-icon-paixu
- 向上
  #ve-icon-xiangshang
- 向下
  #ve-icon-xiangxia
- 全屏
  #ve-icon-full
- 收起列
  #ve-icon-collapse
- 下拉
  #ve-icon-xiala
- 全屏退出
  #ve-icon-unfull
- enter
  #ve-icon-enter
- enviroment
  #ve-icon-enviroment
- enviroment-o
  #ve-icon-enviroment-o
- exclamation-circle-o
  #ve-icon-exclamation-circle-o
- exclamation-circle
  #ve-icon-exclamation-circle
- exception
  #ve-icon-exception
- export
  #ve-icon-export1
- exclefile
  #ve-icon-exclefile
- export2
  #ve-icon-export2
- eye-o
  #ve-icon-eye-o
- eye
  #ve-icon-eye2
- file
  #ve-icon-fileplain
- filetext
  #ve-icon-filetext
- filter
  #ve-icon-filter1
- folder
  #ve-icon-folder
- folderopen
  #ve-icon-folderopen
- frown-o
  #ve-icon-frown-o
- github
  #ve-icon-github
- frown
  #ve-icon-frown
- hdd
  #ve-icon-hdd
- heart-o
  #ve-icon-heart-o
- heart
  #ve-icon-heart1
- inbox
  #ve-icon-inbox
- ie
  #ve-icon-ie
- info-cirlce
  #ve-icon-info-cirlce
- info-cirlce-o
  #ve-icon-info-cirlce-o
- left-circle-o
  #ve-icon-left-circle-o
- jpgfile
  #ve-icon-jpgfile
- laptop
  #ve-icon-laptop1
- left-square
  #ve-icon-left-square
- left-circle
  #ve-icon-left-circle
- left-square-o
  #ve-icon-left-square-o
- left
  #ve-icon-left
- like_fill
  #ve-icon-like1
- linechart
  #ve-icon-linechart
- loading1
  #ve-icon-loading
- lock
  #ve-icon-lock
- meho
  #ve-icon-meho
- meh
  #ve-icon-meh
- menufold
  #ve-icon-menufold
- menuunfold
  #ve-icon-menuunfold
- minus-circle-o
  #ve-icon-minus-circle-o
- minus-square-o
  #ve-icon-minus-square-o
- minus-circle
  #ve-icon-minus-circle
- minus-square
  #ve-icon-minus-square
- mobile
  #ve-icon-mobile1
- paperclip
  #ve-icon-paperclip
- notification
  #ve-icon-notification1
- pause-circle
  #ve-icon-pause-circle
- pause-circle-o
  #ve-icon-pause-circle-o
- pay-circle
  #ve-icon-pay-circle
- pay-circle-o
  #ve-icon-pay-circle-o
- pen
  #ve-icon-pen
- pdffile
  #ve-icon-pdffile
- piechart
  #ve-icon-piechart
- play
  #ve-icon-play
- play-circle-o
  #ve-icon-play-circle-o
- plus-circle-o
  #ve-icon-plus-circle-o
- plus-square-o
  #ve-icon-plus-square-o
- plus-circle
  #ve-icon-plus-circle
- plus
  #ve-icon-plus1
- poweroff
  #ve-icon-poweroff
- plus-square
  #ve-icon-plus-square
- pushpin
  #ve-icon-pushpin
- pushpin-o
  #ve-icon-pushpin-o
- reload
  #ve-icon-reload1
- question-circle-o
  #ve-icon-question-circle-o
- question-circle
  #ve-icon-question-circle
- qrcode
  #ve-icon-qrcode
- retweet
  #ve-icon-retweet
- right-circle
  #ve-icon-right-circle
- right-circle-o
  #ve-icon-right-circle-o
- right-square-o
  #ve-icon-right-square-o
- right-square
  #ve-icon-right-square
- rollback
  #ve-icon-rollback
- right
  #ve-icon-right
- save
  #ve-icon-save
- shoppingcart
  #ve-icon-shoppingcart
- scan
  #ve-icon-scan
- shrink
  #ve-icon-shrink
- sharealt
  #ve-icon-sharealt
- setting
  #ve-icon-setting
- smile
  #ve-icon-smile1
- smile-o
  #ve-icon-smile-o
- star-o
  #ve-icon-star-o
- solution
  #ve-icon-solution
- star
  #ve-icon-star
- stepforward
  #ve-icon-stepforward
- stepbackward
  #ve-icon-stepbackward
- swap
  #ve-icon-swap
- swapleft
  #ve-icon-swapleft
- tag-o
  #ve-icon-tag-o
- tablet
  #ve-icon-tablet
- swapright
  #ve-icon-swapright
- tag
  #ve-icon-tag1
- tags
  #ve-icon-tags
- tagso
  #ve-icon-tagso
- rest
  #ve-icon-rest
- team
  #ve-icon-team
- search
  #ve-icon-search
- totop
  #ve-icon-totop
- smile
  #ve-icon-smile
- unlock
  #ve-icon-unlock
- tag
  #ve-icon-tag
- up-circle-o
  #ve-icon-up-circle-o
- top
  #ve-icon-top
- up-circle
  #ve-icon-up-circle
- user
  #ve-icon-user
- up-square-o
  #ve-icon-up-square-o
- link
  #ve-icon-link
- up-square
  #ve-icon-up-square
- logout
  #ve-icon-logout
- up
  #ve-icon-up
- mail
  #ve-icon-mail
- verticleleft
  #ve-icon-verticleleft
- minus
  #ve-icon-minus
- mobile
  #ve-icon-mobile
- upload
  #ve-icon-upload
- note
  #ve-icon-note
- windows-o
  #ve-icon-windows-o
- notification
  #ve-icon-notification
- windows
  #ve-icon-windows
- picture
  #ve-icon-picture
- wordfile
  #ve-icon-wordfile
- place
  #ve-icon-place
- note_fill
  #ve-icon-note_fill
- plus
  #ve-icon-plus
- mail_fill
  #ve-icon-mail_fill
- edit
  #ve-icon-edit
- export_fill
  #ve-icon-export_fill
- ellipsis
  #ve-icon-ellipsis
- export
  #ve-icon-export
- express
  #ve-icon-express
- eye
  #ve-icon-eye
- edit
  #ve-icon-edit1
- file
  #ve-icon-file
- addfile
  #ve-icon-addfile
- filter
  #ve-icon-filter
- bulb
  #ve-icon-bulb
- history
  #ve-icon-history
- addfolder
  #ve-icon-addfolder
- home
  #ve-icon-home
- id
  #ve-icon-id
- info
  #ve-icon-info
- card
  #ve-icon-card
- laptop
  #ve-icon-laptop
- appstore
  #ve-icon-appstore
- calender
  #ve-icon-calender
- plugin
  #ve-icon-plugin
- change
  #ve-icon-change
- chart
  #ve-icon-chart
- menu
  #ve-icon-menu
- check
  #ve-icon-check
- reload
  #ve-icon-reload2
- clip
  #ve-icon-clip
- clock
  #ve-icon-clock
- setting_fill
  #ve-icon-setting_fill
- computer
  #ve-icon-computer
- dashboard_fill
  #ve-icon-dashboard_fill
- cross
  #ve-icon-cross
- send
  #ve-icon-send
- dashboard
  #ve-icon-dashboard
- rocket_fill
  #ve-icon-rocket_fill
- delete
  #ve-icon-delete
- schedule_fill
  #ve-icon-schedulefill
- download
  #ve-icon-download
- schedule
  #ve-icon-schedule
- message
  #ve-icon-message
- team_fill
  #ve-icon-team_fill
- bars
  #ve-icon-bars
- move
  #ve-icon-move
- hide
  #ve-icon-hide
- express_fill
  #ve-icon-express_fill
- eye
  #ve-icon-eye1
- warranty
  #ve-icon-warranty
- zoom in
  #ve-icon-zoomin
- tstar_3
  #ve-icon-tstar_
- zoom out
  #ve-icon-zoomout
- tstar_2
  #ve-icon-tstar_1
- ac rotate
  #ve-icon-acrotate
- tstar_1
  #ve-icon-tstar_2
- cw rotate
  #ve-icon-cwrotate
- tstar_4
  #ve-icon-tstar_3
- heart
  #ve-icon-heart
- pay
  #ve-icon-pay
- like
  #ve-icon-like
- wifi
  #ve-icon-wifi
- arrow_right
  #ve-icon-arrowright
- customermanager
  #ve-icon-customermanager
- arrow_up
  #ve-icon-arrowup
- drag
  #ve-icon-drag
- arrow down
  #ve-icon-arrowdown
- enterprise
  #ve-icon-enterprise
- arrow_left
  #ve-icon-arrowleft
- channel
  #ve-icon-channel
- favor_fill
  #ve-icon-favorfill
- compass
  #ve-icon-compass
- heart_fill
  #ve-icon-heartfill
- database
  #ve-icon-database
- dislike
  #ve-icon-dislike
- contacts
  #ve-icon-contacts
- account
  #ve-icon-account
- key
  #ve-icon-key
- menu off
  #ve-icon-menuoff
- global
  #ve-icon-global
- menu on
  #ve-icon-menuon
- red-envelope
  #ve-icon-red-envelope
- order select
  #ve-icon-orderselect
- layout
  #ve-icon-layout
- order
  #ve-icon-order
- printer
  #ve-icon-printer
- favor
  #ve-icon-favor
- skin
  #ve-icon-skin
- id input
  #ve-icon-idinput
- table
  #ve-icon-table
- rank
  #ve-icon-rank
- wallet
  #ve-icon-wallet
- sort
  #ve-icon-sort
- gift
  #ve-icon-gift
- automation
  #ve-icon-automation
- car
  #ve-icon-car
- caret_down
  #ve-icon-caretdown
- coffee
  #ve-icon-coffee
- caret_up
  #ve-icon-caretup
- case-o
  #ve-icon-case-o
- reload
  #ve-icon-reload
- order-o
  #ve-icon-order-o
- flag_fill
  #ve-icon-flagfill
- flag
  #ve-icon-flag
- call_in
  #ve-icon-callin
- call_out
  #ve-icon-callout
- dial
  #ve-icon-dial
- refund
  #ve-icon-refund
- message_fill
  #ve-icon-messagefill
- phone_fill
  #ve-icon-phonefill
- phone
  #ve-icon-phone
- clock_fill
  #ve-icon-clockfill
- notification_fill
  #ve-icon-notificationfill
- cut
  #ve-icon-cut
- book
  #ve-icon-book
- barrage
  #ve-icon-barrage
- male
  #ve-icon-male
- female
  #ve-icon-female
- expand
  #ve-icon-expand
- refund
  #ve-icon-refund1
- pie-chart
  #ve-icon-pie-chart
- backspace
  #ve-icon-backspace
- Invalid
  #ve-icon-Invalid
- repeat
  #ve-icon-repeat
- timeout
  #ve-icon-timeout
- urged
  #ve-icon-urged
- intervene
  #ve-icon-intervene
- voice
  #ve-icon-voice
- apple
  #ve-icon-apple
- appstore-o
  #ve-icon-appstore-o
- areachart
  #ve-icon-areachart
- apple-o
  #ve-icon-apple-o
- android
  #ve-icon-android
- appstore
  #ve-icon-appstore1
- arrowsalt
  #ve-icon-arrowsalt
- banckward
  #ve-icon-banckward
- bars
  #ve-icon-bars1
- book
  #ve-icon-book1
- barchart
  #ve-icon-barchart
- calendar
  #ve-icon-calendar
- camera-o
  #ve-icon-camera-o
- caretleft
  #ve-icon-caretleft
- caretdown
  #ve-icon-caretdown1
- calculator
  #ve-icon-calculator
- camera
  #ve-icon-camera
- caretright
  #ve-icon-caretright
- check-circle
  #ve-icon-check-circle
- caretup
  #ve-icon-caretup1
- check-circle-o
  #ve-icon-check-circle-o
- check-square
  #ve-icon-check-square
- check-square-o
  #ve-icon-check-square-o
- circledown
  #ve-icon-circledown
- chrome
  #ve-icon-chrome
- check
  #ve-icon-check1
- circledown-o
  #ve-icon-circledown-o
- clock-circle
  #ve-icon-clock-circle
- clock-circle-o
  #ve-icon-clock-circle-o
- close-circle-o
  #ve-icon-close-circle-o
- close-circle
  #ve-icon-close-circle
- close-square-o
  #ve-icon-close-square-o
- close-square
  #ve-icon-close-square
- close
  #ve-icon-close
- clouddownload-o
  #ve-icon-clouddownload-o
- clouddownload
  #ve-icon-clouddownload
- cloudupload-o
  #ve-icon-cloudupload-o
- cloudupload
  #ve-icon-cloudupload
- code-square-o
  #ve-icon-code-square-o
- code-square
  #ve-icon-code-square
- creditcard
  #ve-icon-creditcard
- copy
  #ve-icon-copy
- desktop
  #ve-icon-desktop
- customerservice
  #ve-icon-customerservice
- dislike_fill
  #ve-icon-dislike1
- dotchart
  #ve-icon-dotchart
- doubleleft
  #ve-icon-doubleleft
- doubleright
  #ve-icon-doubleright
- down-circle-o
  #ve-icon-down-circle-o
- down-circle
  #ve-icon-down-circle
- down
  #ve-icon-down
- down-square-o
  #ve-icon-down-square-o
- down-square
  #ve-icon-down-square
- ellipsis
  #ve-icon-ellipsis1
- download
  #ve-icon-download1
- 切换语言
  #ve-icon-lang

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