# IconFont 图标

- stepforward
  #icon-stepforward
- stepbackward
  #icon-stepbackward
- forward
  #icon-forward
- banckward
  #icon-banckward
- caretright
  #icon-caretright
- caretleft
  #icon-caretleft
- caretdown
  #icon-caretdown
- caretup
  #icon-caretup
- right-circle
  #icon-rightcircle
- left-circle
  #icon-leftcircle
- up-circle
  #icon-upcircle
- down-circle
  #icon-downcircle
- right-circle-o
  #icon-rightcircleo
- left-circle-o
  #icon-leftcircleo
- up-circle-o
  #icon-upcircleo
- down-circle-o
  #icon-downcircleo
- verticleleft
  #icon-verticleleft
- verticleright
  #icon-verticleright
- rollback
  #icon-back
- retweet
  #icon-retweet
- shrink
  #icon-shrink
- arrowsalt
  #icon-arrowsalt
- doubleright
  #icon-doubleright
- doubleleft
  #icon-doubleleft
- arrowdown
  #icon-arrowdown
- arrowup
  #icon-arrowup
- arrowright
  #icon-arrowright
- arrowleft
  #icon-arrowleft
- down
  #icon-down
- up
  #icon-up
- right
  #icon-right
- left
  #icon-left
- minus-square-o
  #icon-minussquareo
- minus-circle
  #icon-minuscircle
- minus-circle-o
  #icon-minuscircleo
- minus
  #icon-minus
- plus-circle-o
  #icon-pluscircleo
- plus-circle
  #icon-pluscircle
- plus
  #icon-plus
- info-cirlce
  #icon-infocirlce
- info-cirlce-o
  #icon-infocirlceo
- info
  #icon-info
- exclamation
  #icon-exclamation
- exclamation-circle
  #icon-exclamationcircle
- exclamation-circle-o
  #icon-exclamationcircleo
- close-circle
  #icon-closecircle
- close-circle-o
  #icon-closecircleo
- check-circle
  #icon-checkcircle
- check-circle-o
  #icon-checkcircleo
- check
  #icon-check
- close
  #icon-close
- customerservice
  #icon-customerservice
- creditcard
  #icon-creditcard
- code-square-o
  #icon-codesquareo
- book
  #icon-book
- barschart
  #icon-barschart
- bars
  #icon-bars
- question
  #icon-question
- question-circle
  #icon-questioncircle
- question-circle-o
  #icon-questioncircleo
- pause
  #icon-pause
- pause-circle
  #icon-pausecircle
- pause-circle-o
  #icon-pausecircleo
- clock-circle
  #icon-clockcircle
- clock-circle-o
  #icon-clockcircleo
- swap
  #icon-swap
- swapleft
  #icon-swapleft
- swapright
  #icon-swapright
- plus-square-o
  #icon-plussquareo
- frown
  #icon-frown
- menufold
  #icon-menufold
- mail
  #icon-mail
- link
  #icon-link
- areachart
  #icon-areachart
- linechart
  #icon-linechart
- home
  #icon-home
- laptop
  #icon-laptop
- star
  #icon-star
- star-o
  #icon-staro
- filter
  #icon-filter
- meho
  #icon-meho
- meh
  #icon-meh
- shoppingcart
  #icon-shoppingcart
- save
  #icon-save
- user
  #icon-user
- videocamera
  #icon-videocamera
- totop
  #icon-totop
- team
  #icon-team
- sharealt
  #icon-sharealt
- setting
  #icon-setting
- picture
  #icon-picture
- phone
  #icon-phone
- paperclip
  #icon-paperclip
- notification
  #icon-notification
- menuunfold
  #icon-menuunfold
- inbox
  #icon-inbox
- lock
  #icon-lock
- qrcode
  #icon-qrcode
- tags
  #icon-tags
- tagso
  #icon-tagso
- cloud-o
  #icon-cloudo
- cloud
  #icon-cloud
- cloudupload
  #icon-cloudupload
- clouddownload
  #icon-clouddownload
- clouddownload-o
  #icon-clouddownloado
- cloudupload-o
  #icon-clouduploado
- enviroment
  #icon-enviroment
- enviroment-o
  #icon-enviromento
- eye
  #icon-eye
- eye-o
  #icon-eyeo
- camera
  #icon-camera
- camera-o
  #icon-camerao
- windows
  #icon-windows
- export2
  #icon-export2
- export
  #icon-export
- circledown-o
  #icon-circledowno
- circledown
  #icon-circledown
- hdd
  #icon-hdd
- ie
  #icon-ie
- delete
  #icon-delete
- enter
  #icon-enter
- pushpin-o
  #icon-pushpino
- pushpin
  #icon-pushpin
- heart
  #icon-heart
- heart-o
  #icon-hearto
- smile
  #icon-smile-circle
- smile-o
  #icon-smileo
- frown-o
  #icon-frowno
- calculator
  #icon-calculator
- chrome
  #icon-chrome
- github
  #icon-github
- desktop
  #icon-iconfontdesktop
- caret-circle-o-up
  #icon-caretcircleoup
- upload
  #icon-upload
- download
  #icon-download
- piechart
  #icon-piechart
- lock
  #icon-lock1
- unlock
  #icon-unlock
- windows-o
  #icon-windowso
- dotchart
  #icon-dotchart
- barchart
  #icon-barchart
- code-square
  #icon-codesquare
- plus-square
  #icon-plussquare
- minus-square
  #icon-minussquare
- close-square
  #icon-closesquare
- close-square-o
  #icon-closesquareo
- check-square
  #icon-checksquare
- check-square-o
  #icon-checksquareo
- fastbackward
  #icon-fastbackward
- fastforward
  #icon-fastforward
- up-square
  #icon-upsquare
- down-square
  #icon-downsquare
- left-square
  #icon-leftsquare
- right-square
  #icon-rightsquare
- right-square-o
  #icon-rightsquareo
- left-square-o
  #icon-leftsquareo
- down-square-o
  #icon-down-square-o
- up-square-o
  #icon-up-square-o
- play
  #icon-play
- play-circle-o
  #icon-playcircleo
- tag
  #icon-tag
- tag-o
  #icon-tago
- addfile
  #icon-addfile
- folder
  #icon-folder1
- file
  #icon-file1
- switcher
  #icon-switcher
- addfolder
  #icon-addfolder
- folderopen
  #icon-folderopen
- search
  #icon-search1
- ellipsis
  #icon-ellipsis1
- calendar
  #icon-calendar
- filetext
  #icon-filetext1
- copy
  #icon-copy1
- jpgfile
  #icon-jpgfile1
- pdffile
  #icon-pdffile1
- exclefile
  #icon-exclefile1
- pptfile
  #icon-pptfile1
- unknowfile
  #icon-unknowfile1
- wordfile
  #icon-wordfile1
- dingding
  #icon-dingding
- dingding-o
  #icon-dingding-o
- mobile
  #icon-mobile1
- tablet
  #icon-tablet1
- bells
  #icon-bells
- disconnect
  #icon-disconnect
- database
  #icon-database
- barcode
  #icon-barcode
- hourglass
  #icon-hourglass
- key
  #icon-key
- flag
  #icon-flag
- layout
  #icon-layout
- printer
  #icon-printer
- USB
  #icon-USB
- skin
  #icon-skin
- tool
  #icon-tool
- car
  #icon-car
- addusergroup
  #icon-addusergroup
- carryout
  #icon-carryout
- deleteuser
  #icon-deleteuser
- deleteusergroup
  #icon-deleteusergroup
- man
  #icon-man
- isv
  #icon-isv
- gift
  #icon-gift
- idcard
  #icon-idcard
- medicinebox
  #icon-medicinebox
- redenvelopes
  #icon-redenvelopes
- rest
  #icon-rest
- Safety
  #icon-Safety
- wallet
  #icon-wallet
- woman
  #icon-woman
- adduser
  #icon-adduser
- bank
  #icon-bank
- Trophy
  #icon-Trophy
- loading
  #icon-loading1
- loading
  #icon-loading2
- like
  #icon-like2
- dislike
  #icon-dislike2
- like
  #icon-like1
- dislike
  #icon-dislike1
- bulb
  #icon-bulb1
- rocket
  #icon-rocket1
- select
  #icon-select1
- apple
  #icon-apple1
- apple-o
  #icon-apple-o
- android
  #icon-android1
- android-o
  #icon-android
- aliwangwang-o
  #icon-aliwangwang-o1
- aliwangwang
  #icon-aliwangwang
- pay-circle
  #icon-pay-circle1
- pay-circle-o
  #icon-pay-circle-o1
- poweroff
  #icon-poweroff
- trademark
  #icon-trademark
- find
  #icon-find
- copyright
  #icon-copyright
- sound
  #icon-sound
- earth
  #icon-earth
- wifi
  #icon-wifi
- sync
  #icon-sync
- login
  #icon-login
- logout
  #icon-logout
- reload
  #icon-reload1
- message
  #icon-message1
- shake
  #icon-shake
- API
  #icon-API
- appstore-o
  #icon-appstore-o
- appstore
  #icon-appstore1
- scan
  #icon-scan1
- exception
  #icon-exception1
- contacts
  #icon-contacts
- solution
  #icon-solution1
- fork
  #icon-fork
- edit
  #icon-edit
- 表单
  #icon-form
- error
  #icon-warning
- 列表
  #icon-table
- 详情
  #icon-profile
- dashboard
  #icon-dashboard
- indent-left
  #icon-indent-left
- indent-right
  #icon-indent-right
- menu-unfold
  #icon-menu-unfold
- menu-fold
  #icon-menu-fold
- ant design
  #icon-antdesign
- alipay-square
  #icon-alipay-square
- codepen-circle
  #icon-codepen-circle
- google
  #icon-google
- amazon
  #icon-amazon
- codepen
  #icon-codepen
- facebook-square
  #icon-facebook-square
- dropbox
  #icon-dropbox
- google plus
  #icon-googleplus
- linkedin-square
  #icon-linkedin-square
- medium-monogram
  #icon-medium-monogram
- gitlab
  #icon-gitlab
- medium-wordmark
  #icon-medium-wordmark
- QQ
  #icon-QQ
- skype
  #icon-skype
- taobao-square
  #icon-taobao-square
- alipay-circle
  #icon-alipay-circle
- youtube
  #icon-youtube
- wechat
  #icon-wechat
- twitter
  #icon-twitter
- weibo
  #icon-weibo
- HTML5
  #icon-HTML
- taobao-circle
  #icon-taobao-circle
- weibo-circle
  #icon-weibo-circle
- weibo-square
  #icon-weibo-square
- CodeSandbox
  #icon-CodeSandbox
- 阿里云
  #icon-aliyun
- zhihu
  #icon-zhihu
- behance
  #icon-behance
- dribbble
  #icon-dribbble
- dribbble-square
  #icon-dribbble-square
- behance-square
  #icon-behance-square
- file-markdown
  #icon-file-markdown
- instagram
  #icon-instagram
- yuque
  #icon-yuque
- slack
  #icon-slack
- slack-square
  #icon-slack-square

## symbol引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：

- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过`font-size`,`color`来调整样式。
- 兼容性较差，支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般，还不如png。

使用步骤如下：

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

    <script src="./iconfont.js"></script>

### 第二步：加入通用css代码（引入一次就行）：

    <style type="text/css">
    .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>