# 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-rollback
- 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
- exception
  .icon-exception
- meho
  .icon-meho
- meh
  .icon-meh
- shoppingcart
  .icon-shoppingcart
- save
  .icon-save
- user
  .icon-user
- videocamera
  .icon-videocamera
- totop
  .icon-totop
- team
  .icon-team
- solution
  .icon-solution
- 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
- edit
  .icon-edit
- circledown-o
  .icon-circledowno
- circledown
  .icon-circledown
- appstore-o
  .icon-appstoreo
- appstore
  .icon-appstore
- scan
  .icon-scan
- 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
- Contacts
  .icon-Contacts
- 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

## font-class引用

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

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

- 兼容性良好，支持ie8+，及所有现代浏览器。
- 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
- 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
- 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤如下：

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

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

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

    <i class="anticon icon-xxx"></i>

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