• all
    
  • back
    
  • cart
    
  • Category
    
  • close
    
  • comments
    
  • cry
    
  • delete
    
  • edit
    
  • email
    
  • favorite
    
  • form
    
  • help
    
  • information
    
  • less
    
  • more_unfold
    
  • more
    
  • pic
    
  • QRCode
    
  • refresh
    
  • RFQ
    
  • search
    
  • selected
    
  • set
    
  • Smile
    
  • success
    
  • survey
    
  • training
    
  • ViewGallery
    
  • Viewlist
    
  • warning
    
  • wrong
    
  • account
    
  • add
    
  • atm
    
  • clock
    
  • remind
    
  • calendar
    
  • attachment
    
  • discount
    
  • service
    
  • print
    
  • box
    
  • process
    
  • beauty
    
  • electrical
    
  • home
    
  • electronics
    
  • gifts
    
  • lights
    
  • sports
    
  • toys
    
  • auto
    
  • jewelry
    
  • trade-assurance
    
  • browse
    
  • rfq-qm
    
  • rfq-quantity
    
  • atm-away
    
  • rfq
    
  • scanning
    
  • compare
    
  • filter
    
  • pin
    
  • history
    
  • product-features
    
  • supplier-features
    
  • similar-product
    
  • link
    
  • cut
    
  • nav-list
    
  • image-text
    
  • text
    
  • move
    
  • subtract
    
  • dollar
    
  • raw
    
  • office
    
  • agriculture
    
  • machinery
    
  • assessed-Badge
    
  • personal-center
    
  • integral
    
  • operation
    
  • remind
    
  • download
    
  • map
    
  • bad
    
  • good
    
  • skip
    
  • play
    
  • stop
    
  • compass
    
  • security
    
  • share
    
  • store
    
  • manage-order
    
  • rejected-order
    
  • phone
    
  • bussiness-man
    
  • shoes
    
  • Mobile-phone
    
  • email-filling
    
  • favorites-filling
    
  • account-filling
    
  • credit-level
    
  • credit-level-filling
    
  • QQ
    
  • exl
    
  • pdf
    
  • zip
    
  • sorting
    
  • copy
    
  • save
    
  • inquiry-template
    
  • template-default
    
  • libra
    
  • survey
    
  • 微信
    
  • ship
    
  • bussiness-card
    
  • hot
    
  • data
    
  • trade
    
  • onepage
    
  • signboard
    
  • shuffling-banner
    
  • component
    
  • component-filling
    
  • color
    
  • color-filling
    
  • favorites
    
  • pic-filling
    
  • RFQ
    
  • RFQ-filling
    
  • original-image
    
  • logistic
    
  • Calculator
    
  • 微信
    
  • video
    
  • earth
    
  • task-management
    
  • trust
    
  • password
    
  • 微信
    
  • 3column
    
  • apparel
    
  • bags
    
  • folder
    
  • 4column
    
  • code
    
  • RFQ-filling
    
  • customs-clearance
    
  • good-filling
    
  • qq
    
  • qq
    
  • 支付宝
    
  • camera
    
  • pin-fill
    
  • help-fill
    
  • add-account
    
  • 支付宝
    
  • listing-content
    
  • warehouse-delivery
    
  • customization
    
  • inspection
    
  • packing-labeling
    
  • online-tracking
    
  • play-filling
    
  • nosound-filling
    
  • sound-filling
    
  • electrical-equipment
    
  • home-appliances
    
  • furniture
    
  • fashion-accessories
    
  • security-protection
    
  • textile-products
    
  • tools-hardware
    
  • office-supplies
    
  • vehicles
    

Unicode 引用


Unicode 是字体在网页端最原始的应用方式,特点是:

  • 兼容性最好,支持 IE6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

Unicode 使用步骤如下:

第一步:拷贝项目下面生成的 @font-face

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}

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

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

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

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

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "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
  • QQ
    .icon-qq
  • 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
  • 微信
    .icon-weixin
  • 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
  • 微信
    .icon-weixin2
  • video
    .icon-video
  • earth
    .icon-earth
  • task-management
    .icon-task-management
  • trust
    .icon-trust
  • password
    .icon-password
  • 微信
    .icon-weixin1
  • 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
  • qq
    .icon-qq1
  • qq
    .icon-qq2
  • 支付宝
    .icon-zhifubao
  • camera
    .icon-camera
  • pin-fill
    .icon-pin-fill
  • help-fill
    .icon-help-fill
  • add-account
    .icon-add-account
  • 支付宝
    .icon-umidd17
  • listing-content
    .icon-listing-content
  • warehouse-delivery
    .icon-warehouse-delivery
  • customization
    .icon-customization
  • inspection
    .icon-inspection
  • packing-labeling
    .icon-packing-labeling
  • online-tracking
    .icon-online-tracking
  • play-filling
    .icon-play-filling
  • nosound-filling
    .icon-nosound-filling
  • sound-filling
    .icon-sound-filling
  • electrical-equipment
    .icon-electrical-equipment
  • home-appliances
    .icon-home-appliances
  • furniture
    .icon-furniture
  • fashion-accessories
    .icon-fashion-accessories
  • security-protection
    .icon-security-protection
  • textile-products
    .icon-textile-products
  • tools-hardware
    .icon-tools-hardware
  • office-supplies
    .icon-office-supplies
  • vehicles
    .icon-vehicles

font-class 引用


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

与 Unicode 使用方式相比,具有如下特点:

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

使用步骤如下:

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

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

第二步:挑选相应图标并获取类名,应用于页面:

<span class="iconfont icon-xxx"></span>

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "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
  • QQ
    #icon-qq
  • 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
  • 微信
    #icon-weixin
  • 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
  • 微信
    #icon-weixin2
  • video
    #icon-video
  • earth
    #icon-earth
  • task-management
    #icon-task-management
  • trust
    #icon-trust
  • password
    #icon-password
  • 微信
    #icon-weixin1
  • 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
  • qq
    #icon-qq1
  • qq
    #icon-qq2
  • 支付宝
    #icon-zhifubao
  • camera
    #icon-camera
  • pin-fill
    #icon-pin-fill
  • help-fill
    #icon-help-fill
  • add-account
    #icon-add-account
  • 支付宝
    #icon-umidd17
  • listing-content
    #icon-listing-content
  • warehouse-delivery
    #icon-warehouse-delivery
  • customization
    #icon-customization
  • inspection
    #icon-inspection
  • packing-labeling
    #icon-packing-labeling
  • online-tracking
    #icon-online-tracking
  • play-filling
    #icon-play-filling
  • nosound-filling
    #icon-nosound-filling
  • sound-filling
    #icon-sound-filling
  • electrical-equipment
    #icon-electrical-equipment
  • home-appliances
    #icon-home-appliances
  • furniture
    #icon-furniture
  • fashion-accessories
    #icon-fashion-accessories
  • security-protection
    #icon-security-protection
  • textile-products
    #icon-textile-products
  • tools-hardware
    #icon-tools-hardware
  • office-supplies
    #icon-office-supplies
  • vehicles
    #icon-vehicles

Symbol 引用


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

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

使用步骤如下:

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

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

第二步:加入通用 CSS 代码(引入一次就行):

<style>
.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>