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
• 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
• discount
  .icon-discount
• service
  .icon-service
• print
  .icon-print
• box
  .icon-box
• process
  .icon-process
• beauty
  .icon-beauty
• electrical
  .icon-electrical
• home
  .icon-home
• electronics
  .icon-electronics
• gifts
  .icon-gifts
• 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
• 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
• video
  .icon-video
• earth
  .icon-earth
• task-management
  .icon-task-management
• trust
  .icon-trust
• password
  .icon-password
• 3column
  .icon-column
• apparel
  .icon-apparel
• bags
  .icon-bags
• folder
  .icon-folder
• 4column
  .icon-column1
• code
  .icon-code
• RFQ-filling
  .icon-RFQ-filling1
• customs-clearance
  .icon-customs-clearance
• good-filling
  .icon-good-filling
• camera
  .icon-camera

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="iconfont icon-xxx"></i>

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