# IconFont 图标

- all
  #icon-all
- back
  #icon-back
- cart
  #icon-cart
- Category
  #icon-category
- close
  #icon-close
- comments
  #icon-comments
- cry
  #icon-cry
- delete
  #icon-delete
- edit
  #icon-edit
- email
  #icon-email
- favorite
  #icon-favorite
- folder
  #icon-folder
- form
  #icon-form
- help
  #icon-help
- information
  #icon-information
- less
  #icon-less
- more_unfold
  #icon-moreunfold
- more
  #icon-more
- pic
  #icon-pic
- QRCode
  #icon-qrcode
- refresh
  #icon-refresh
- RFQ
  #icon-rfq
- search
  #icon-search
- selected
  #icon-selected
- set
  #icon-set
- Smile
  #icon-smile
- success
  #icon-success
- survey
  #icon-survey
- training
  #icon-training
- ViewGallery
  #icon-viewgallery
- Viewlist
  #icon-viewlist
- warning
  #icon-warning
- wrong
  #icon-wrong
- account
  #icon-account
- add
  #icon-add
- atm
  #icon-atm
- clock
  #icon-clock
- remind
  #icon-remind
- calendar
  #icon-calendar
- attachment
  #icon-attachment
- 3column
  #icon-3column
- 4column
  #icon-4column
- discount
  #icon-discount
- service
  #icon-service
- print
  #icon-print
- box
  #icon-box
- process
  #icon-process
- bags
  #icon-bags
- beauty
  #icon-beauty
- electrical
  #icon-electrical
- home
  #icon-home
- electronics
  #icon-electronics
- gifts
  #icon-gifts
- apparel
  #icon-apparel
- lights
  #icon-lights
- sports
  #icon-sports
- toys
  #icon-toys
- auto
  #icon-auto
- jewelry
  #icon-jewelry
- trade-assurance
  #icon-trade-assurance
- browse
  #icon-browse
- rfq-qm
  #icon-rfqqm
- rfq-quantity
  #icon-rfqquantity
- atm-away
  #icon-atmaway
- rfq
  #icon-rfq1
- scanning
  #icon-scanning
- compare
  #icon-compare
- filter
  #icon-filter
- pin
  #icon-pin
- history
  #icon-history
- product-features
  #icon-productfeatures
- supplier-features
  #icon-supplierfeatures
- similar-product
  #icon-similarproduct
- link
  #icon-link
- cut
  #icon-cut
- nav-list
  #icon-navlist
- image-text
  #icon-imagetext
- text
  #icon-text
- move
  #icon-move
- subtract
  #icon-subtract
- dollar
  #icon-dollar
- raw
  #icon-raw
- office
  #icon-office
- agriculture
  #icon-agriculture
- machinery
  #icon-machinery
- assessed-Badge
  #icon-assessedbadge
- personal-center
  #icon-gerenzhongxin
- integral
  #icon-jifen
- Task-Management
  #icon-renwuguanli
- operation
  #icon-operation
- remind
  #icon-remind1
- download
  #icon-icondownload
- map
  #icon-map
- bad
  #icon-bad
- good
  #icon-good
- skip
  #icon-skip
- play
  #icon-iconfontplay2
- stop
  #icon-iconfontstop
- compass
  #icon-compass
- security
  #icon-security
- share
  #icon-share
- store
  #icon-store
- manage-order
  #icon-manageorder
- rejected-order
  #icon-rejectedorder
- phone
  #icon-phone
- bussiness-man
  #icon-bussinessman
- shoes
  #icon-shoes
- Mobile-phone
  #icon-mobilephone
- email-filling
  #icon-emailfilling
- favorites-filling
  #icon-favoritesfilling
- account-filling
  #icon-accountfilling
- credit-level
  #icon-creditlevel
- credit-level-filling
  #icon-creditlevelfilling
- exl
  #icon-exl
- pdf
  #icon-pdf
- zip
  #icon-zip
- sorting
  #icon-sorting
- copy
  #icon-copy
- save
  #icon-save
- inquiry-template
  #icon-inquirytemplate
- template-default
  #icon-templatedefault
- libra
  #icon-libra
- survey
  #icon-survey1
- ship
  #icon-ship
- bussiness-card
  #icon-bussinesscard
- hot
  #icon-hot
- data
  #icon-data
- trade
  #icon-trade
- onepage
  #icon-onepage48
- signboard
  #icon-signboard
- shuffling-banner
  #icon-shuffling-banner
- component
  #icon-component
- component-filling
  #icon-component-filling
- color
  #icon-color
- color-filling
  #icon-color-filling
- favorites
  #icon-favorites
- pic-filling
  #icon-pic-filling
- RFQ
  #icon-RFQ
- RFQ-filling
  #icon-RFQ-filling
- original-image
  #icon-originalimage
- logistic
  #icon-logistic
- Calculator
  #icon-Calculator

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