# IconFont 图标

- 
  arrow-left
  &#xe620;
  .arrowleft
- 
  arrow-right
  &#xe621;
  .arrowright
- 
  arrow-up
  &#xe622;
  .arrowup
- 
  arrow-down
  &#xe623;
  .arrowdown
- 
  caret-circle-left
  &#xe604;
  .caretcircleleft
- 
  caret-circle-right
  &#xe605;
  .caretcircleright
- 
  caret-circle-up
  &#xe606;
  .caretcircleup
- 
  caret-circle-down
  &#xe607;
  .caretcircledown
- 
  forward
  &#xe608;
  .forward
- 
  backward
  &#xe609;
  .backward
- 
  caret-circle-o-left
  &#xe60b;
  .caretcircleoleft
- 
  caret-circle-o-right
  &#xe60d;
  .caretcircleoright
- 
  caret-circle-o-down
  &#xe60e;
  .caretcircleodown
- 
  caret-right
  &#xe60a;
  .caretright
- 
  caret-left
  &#xe60f;
  .caretleft
- 
  caret-up
  &#xe610;
  .caretup
- 
  caret-down
  &#xe611;
  .caretdown
- 
  fast-forward
  &#xe612;
  .fastforward
- 
  fast-backward
  &#xe613;
  .fastbackward
- 
  step-backward
  &#xe614;
  .stepbackward
- 
  step-forward
  &#xe615;
  .stepforward
- 
  circle-o-down
  &#xe617;
  .circleodown
- 
  circle-o-up
  &#xe618;
  .circleoup
- 
  circle-o-left
  &#xe619;
  .circleoleft
- 
  circle-o-right
  &#xe616;
  .circleoright
- 
  circle-right
  &#xe61a;
  .circleright
- 
  circle-up
  &#xe61c;
  .circleup
- 
  play-circle
  &#xe61e;
  .playcircle
- 
  play-circle-o
  &#xe61f;
  .playcircleo
- 
  circle-left
  &#xe61b;
  .circleleft
- 
  right
  &#xe600;
  .right
- 
  left
  &#xe601;
  .left
- 
  up
  &#xe602;
  .up
- 
  down
  &#xe603;
  .down
- 
  reload
  &#xe626;
  .reload
- 
  double-left
  &#xe624;
  .doubleleft
- 
  double-right
  &#xe625;
  .doubleright
- 
  retweet
  &#xe627;
  .retweet
- 
  shrink
  &#xe628;
  .shrink
- 
  arrow-salt
  &#xe629;
  .arrowsalt
- 
  rollback
  &#xe62a;
  .rollback
- 
  verticle-left
  &#xe62b;
  .verticleleft
- 
  verticle-right
  &#xe62c;
  .verticleright
- 
  cross
  &#xe62d;
  .cross
- 
  check
  &#xe62e;
  .check
- 
  check-circle
  &#xe62f;
  .checkcircle
- 
  check-circle-o
  &#xe630;
  .checkcircleo
- 
  cross-circle
  &#xe631;
  .crosscircle
- 
  cross-circle-o
  &#xe632;
  .crosscircleo
- 
  exclamation
  &#xe633;
  .exclamation
- 
  exclamation-circle
  &#xe634;
  .exclamationcircle
- 
  exclamation-circle-o
  &#xe635;
  .exclamationcircleo
- 
  info
  &#xe636;
  .info
- 
  info-circle
  &#xe637;
  .infocircle
- 
  info-circle-o
  &#xe638;
  .infocircleo
- 
  minus-circle
  &#xe639;
  .minuscircle
- 
  minus-circle-o
  &#xe63a;
  .minuscircleo
- 
  minus
  &#xe63b;
  .minus
- 
  plus-circle-o
  &#xe63c;
  .pluscircleo
- 
  plus-circle
  &#xe63d;
  .pluscircle
- 
  plus
  &#xe63e;
  .plus
- 
  swap-left
  &#xe63f;
  .swapleft
- 
  swap-right
  &#xe640;
  .swapright
- 
  swap
  &#xe641;
  .swap
- 
  clock-circle
  &#xe642;
  .clockcircle
- 
  clock-circle-o
  &#xe643;
  .clockcircleo
- 
  pause-circle
  &#xe644;
  .pausecircle
- 
  pause-circle-o
  &#xe645;
  .pausecircleo
- 
  pause
  &#xe646;
  .pause
- 
  question-circle
  &#xe647;
  .questioncircle
- 
  question-circle-o
  &#xe648;
  .questioncircleo
- 
  question
  &#xe649;
  .question
- 
  area-chart
  &#xe64c;
  .areachart
- 
  appstore
  &#xe64d;
  .appstore
- 
  apple
  &#xe64e;
  .apple
- 
  android
  &#xe64f;
  .android
- 
  bars
  &#xe650;
  .bars
- 
  bar-chart
  &#xe651;
  .barchart
- 
  calendar
  &#xe654;
  .calendar
- 
  book
  &#xe655;
  .book
- 
  chrome
  &#xe65c;
  .chrome
- 
  code
  &#xe65d;
  .code
- 
  credit-card
  &#xe65f;
  .creditcard
- 
  customerservice
  &#xe65e;
  .customerservice
- 
  copy
  &#xe660;
  .copy
- 
  delete
  &#xe661;
  .delete
- 
  ellipsis
  &#xe667;
  .ellipsis
- 
  edit
  &#xe668;
  .edit
- 
  exception
  &#xe66a;
  .exception
- 
  file
  &#xe66b;
  .file
- 
  filter
  &#xe66f;
  .filter
- 
  folder
  &#xe670;
  .folder
- 
  frown-circle
  &#xe672;
  .frowncircle
- 
  frown
  &#xe673;
  .frown
- 
  smile-circle
  &#xe676;
  .smilecircle
- 
  smile
  &#xe677;
  .smile
- 
  meh-circle
  &#xe678;
  .mehcircle
- 
  meh
  &#xe679;
  .meh
- 
  github
  &#xe674;
  .github
- 
  laptop
  &#xe67a;
  .laptop
- 
  inbox
  &#xe67b;
  .inbox
- 
  ie
  &#xe67c;
  .ie
- 
  home
  &#xe67d;
  .home
- 
  line-chart
  &#xe67f;
  .linechart
- 
  link
  &#xe67e;
  .link
- 
  logout
  &#xe681;
  .logout
- 
  mail
  &#xe682;
  .mail
- 
  menu-unfold
  &#xe683;
  .menuunfold
- 
  menu-fold
  &#xe684;
  .menufold
- 
  mobile
  &#xe685;
  .mobile
- 
  notification
  &#xe686;
  .notification
- 
  paper-clip
  &#xe687;
  .paperclip
- 
  phone
  &#xe688;
  .phone
- 
  picture
  &#xe689;
  .picture
- 
  pie-chart
  &#xe68a;
  .piechart
- 
  poweroff
  &#xe68b;
  .poweroff
- 
  setting
  &#xe68d;
  .setting
- 
  share-alt
  &#xe68e;
  .sharealt
- 
  search
  &#xe690;
  .search
- 
  poweroff
  &#xe691;
  .poweroff1
- 
  solution
  &#xe68f;
  .solution
- 
  tablet
  &#xe695;
  .tablet
- 
  team
  &#xe680;
  .team
- 
  to-top
  &#xe69a;
  .totop
- 
  video-camera
  &#xe69b;
  .videocamera
- 
  user
  &#xe69c;
  .user
- 
  save
  &#xe69e;
  .save
- 
  unlock
  &#xe69f;
  .unlock
- 
  shopping-cart
  &#xe692;
  .shoppingcart
- 
  windows
  &#xe6a0;
  .windows
- 
  aliwangwang-o
  &#xe64a;
  .aliwangwango
- 
  aliwangwang
  &#xe64b;
  .aliwangwang
- 
  camera-o
  &#xe652;
  .camerao
- 
  camera
  &#xe653;
  .camera
- 
  eye-o
  &#xe66d;
  .eyeo
- 
  eye
  &#xe66e;
  .eye
- 
  enviroment
  &#xe665;
  .enviroment
- 
  enviroment-o
  &#xe666;
  .enviromento
- 
  star-o
  &#xe693;
  .staro
- 
  star
  &#xe694;
  .star
- 
  tags
  &#xe656;
  .tags
- 
  tags-o
  &#xe657;
  .tagso
- 
  tag
  &#xe658;
  .tag
- 
  tag-o
  &#xe659;
  .tago
- 
  cloud
  &#xe65a;
  .cloud
- 
  cloud-download
  &#xe65b;
  .clouddownload
- 
  cloud-upload
  &#xe696;
  .cloudupload
- 
  cloud-upload-o
  &#xe697;
  .clouduploado
- 
  cloud-download-o
  &#xe698;
  .clouddownloado
- 
  cloud-o
  &#xe699;
  .cloudo
- 
  iconfont-caretcircle-o-up
  &#xe60c;
  .iconfontcaretcircleoup
- 
  loading
  &#xe6a1;
  .loading
- 
  dislike
  &#xe6a2;
  .dislike
- 
  like
  &#xe6a3;
  .like
- 
  message
  &#xe6a4;
  .message
- 
  download
  &#xe663;
  .download
- 
  upload
  &#xe664;
  .upload
- 
  pay-circle
  &#xe6a8;
  .paycircle
- 
  pay-circle-o
  &#xe6a9;
  .paycircleo
- 
  exclefile
  &#xe6ac;
  .exclefile
- 
  pdffile
  &#xe6ab;
  .pdffile
- 
  pptfile
  &#xe6a7;
  .pptfile
- 
  jpgfile
  &#xe6aa;
  .jpgfile
- 
  unknowfile
  &#xe6a6;
  .unknowfile
- 
  minus-square-o
  &#xe6ad;
  .minussquareo
- 
  plus-square-o
  &#xe6ae;
  .plussquareo
- 
  desktop
  &#xe662;
  .iconfontdesktop
- 
  hdd
  &#xe675;
  .hdd
- 
  folderopen
  &#xe671;
  .folderopen
- 
  circle-down
  &#xe61d;
  .circledown
- 
  scan
  &#xe6af;
  .scan
- 
  heart
  &#xe68c;
  .heart
- 
  heart-o
  &#xe6b0;
  .hearto
- 
  calculator
  &#xe6b1;
  .calculator
- 
  appstore-o
  &#xe6b2;
  .appstoreo
- 
  lock
  &#xe69d;
  .lock
- 
  filetext
  &#xe66c;
  .filetext
- 
  export
  &#xe669;
  .export
- 
  export2
  &#xe6b4;
  .export2
- 
  pushpin-o
  &#xe6b3;
  .pushpino
- 
  pushpin
  &#xe6b5;
  .pushpin
- 
  enter
  &#xe6b6;
  .enter
- 
  qrcode
  &#xe6a5;
  .qrcode

第一步：使用font-face声明字体

    @font-face {font-family: 'iconfont';
        src: url('iconfont.eot'); /* IE9*/
        src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('iconfont.woff') format('woff'), /* chrome、firefox */
        url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
    }

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

    .iconfont{
        font-family:"iconfont" !important;
        font-size:16px;font-style:normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;}

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

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