• product
    
  • share live
    
  • product-list
    
  • sign-board
    
  • time-fill
    
  • sign-board-fill
    
  • time-response
    
  • share live-fill
    
  • product-get-catalog
    
  • stamping-service
    
  • time-task
    
  • store-fill
    
  • add-btn-fill
    
  • suggest
    
  • add-btn
    
  • survey
    
  • add
    
  • store
    
  • ascending
    
  • table-fill
    
  • atm-away-fill
    
  • table
    
  • atm-fill
    
  • tap
    
  • atm-away
    
  • teaching
    
  • atm
    
  • template-fill
    
  • attachent
    
  • tool-fill
    
  • bad-fill
    
  • training-fill
    
  • bad
    
  • tool
    
  • cry
    
  • template-success-fill
    
  • error
    
  • template-success
    
  • down-arrow
    
  • training
    
  • delete-fill
    
  • template
    
  • calendar
    
  • top-raning-fill
    
  • down-btn-fill
    
  • top-raning
    
  • cry-fill
    
  • trust-fill
    
  • daytime-mode
    
  • upload-btn
    
  • down-btn
    
  • trade-alert
    
  • filter-fill
    
  • trust
    
  • error-fill
    
  • user-defined-fill
    
  • filter
    
  • user-defined
    
  • filter-records-fill
    
  • video-fill
    
  • favorites-fill
    
  • video
    
  • calendar-fill
    
  • vip-fill
    
  • edit
    
  • vip-management
    
  • flashlight-auto
    
  • vip
    
  • calculator
    
  • 
    vr-fill
    
  • confirm
    
  • vr-video-fill
    
  • favorites
    
  • vr-video
    
  • daytime-mode-fill
    
  • writing-fill
    
  • down
    
  • writing
    
  • close
    
  • wifi
    
  • flashlight-turned-off
    
  • 成长指引
    
  • delete
    
  • 场景流量
    
  • descending
    
  • 服务顾问
    
  • cut
    
  • 短视频话题
    
  • flashlight
    
  • 3D会场
    
  • filter-records
    
  • 大促优先
    
  • download
    
  • 供应链服务
    
  • copy
    
  • 供应链优先
    
  • calculator-fill
    
  • 海运优先权
    
  • gallery
    
  • 海外特权
    
  • good-fill
    
  • 会员首单满减
    
  • follow
    
  • 金品服务报告
    
  • follow-fill
    
  • 金品俱乐部
    
  • good
    
  • 金品专享
    
  • hot-for-ux-fill
    
  • 品牌广告热词
    
  • hot-for-atmosphere
    
  • 客户通
    
  • left
    
  • 品证商品 2
    
  • list
    
  • 绿色环保会场
    
  • info-fill
    
  • 品质商品会场
    
  • left-arrow
    
  • 全球E站发品
    
  • night-mode-fill
    
  • 品证商品
    
  • lower-left-arrow
    
  • 人才双选会
    
  • lock
    
  • 全景图
    
  • left-btn
    
  • 人工客服
    
  • mute-fill
    
  • 生意贷
    
  • help-fill
    
  • 实力工厂
    
  • info
    
  • 实力卡片
    
  • more
    
  • 数据参谋
    
  • loading
    
  • 实地认证
    
  • business-icon-Alibaba.com Online Trade Show
    
  • location-fill
    
  • 搜索排序
    
  • business-icon-Big promotion
    
  • mute
    
  • 私有模具会场
    
  • business-icon-buyers-club-fill
    
  • lock-fill
    
  • 网商贷
    
  • business-icon-ali-clould
    
  • link
    
  • 行业竞争力
    
  • business-icon- MOQ
    
  • left-double-arrow
    
  • 行业报告
    
  • business-icon-buyers-club
    
  • help
    
  • 证书验真
    
  • business-icon-gold-supplier 2
    
  • move
    
  • 旺铺装修
    
  • business-icon-feeds
    
  • mute-btn
    
  • 行业活动
    
  • business-icon-gold-supplier
    
  • location
    
  • 专属场景
    
  • business-icon-feeds-logo-fill
    
  • left-btn-fill
    
  • 优质贸易区
    
  • business-icon-feeds-fill
    
  • notice-fill
    
  • 专属经理
    
  • business-icon-feeds-logo
    
  • lower-right-arrow
    
  • showroom
    
  • business-icon-festivals
    
  • hot-for-ux
    
  • SDK会场
    
  • business-icon-rfq-word
    
  • hide
    
  • WD活动
    
  • business-icon-vs
    
  • mute-btn-fill
    
  • 验场视频
    
  • business-icon-vs-fill
    
  • play-fill
    
  • 专属服务
    
  • business-icon-trade-assurance-fill
    
  • night-mode
    
  • business-rfq
    
  • business-MY bank
    
  • reduce-btn-fill
    
  • layers
    
  • cart-add
    
  • play
    
  • layered-configuration
    
  • business-icon-two-years
    
  • notice
    
  • express discount
    
  • business-icon-sales-center
    
  • right
    
  • send-fill
    
  • business-icon-OEM
    
  • reduce
    
  • Image Processing
    
  • business-icon-weekly Deals
    
  • right-btn-fill
    
  • video generation
    
  • business-icon-sales-center-fill
    
  • reduce-btn
    
  • translate
    
  • business-icon-rfq-word-fill
    
  • right-btn
    
  • command inquiry-fill
    
  • business-icon-trade-assurance
    
  • selected
    
  • title optimization
    
  • cart-add-fill
    
  • search-for-similar
    
  • AI-money
    
  • business-icon-one-touch
    
  • remind-fill
    
  • New-outline(3)
    
  • business-icon-two-years-fill
    
  • right-arrow
    
  • change
    
  • cart-full-fill
    
  • 
    remind-btn-fill
    
  • catalog-check
    
  • return
    
  • catalog-check-fill
    
  • search
    
  • catalog-fill
    
  • remind
    
  • charts-line
    
  • remind-btn
    
  • cart-full
    
  • scan
    
  • cart-search
    
  • right-double-arrow
    
  • cart-empty
    
  • smile-fill
    
  • cart-empty-fill
    
  • settings-fill
    
  • catalog
    
  • share
    
  • charts-pie
    
  • smile
    
  • catalog-download
    
  • settings
    
  • charts-curve
    
  • sorting 2
    
  • charts-bar
    
  • stop-fill
    
  • cart-search-fill
    
  • stop
    
  • costoms
    
  • sorting
    
  • catalog-download-fill
    
  • success-fill
    
  • customer-businessman-fill
    
  • suspend-fill
    
  • customer-add
    
  • success
    
  • customer-bussinessman
    
  • suspend
    
  • customer-add-fill
    
  • unlock-fill
    
  • customer-certified
    
  • unlock
    
  • customer-certified-fill
    
  • up-arrow
    
  • customer-center
    
  • up-btn-fill
    
  • customer-filter-fill
    
  • up-btn
    
  • customer-fill
    
  • up
    
  • customer-fee
    
  • upload
    
  • customer-filter
    
  • upper-right-arrow
    
  • customer-group-fill
    
  • volume-btn-fill
    
  • customer-group
    
  • view
    
  • customs-clearance
    
  • view-fill
    
  • customer-search
    
  • upper-left-arrow
    
  • editor-background-color
    
  • volume-fill
    
  • editor-add-cell
    
  • volume
    
  • customer-official
    
  • volume-btn
    
  • customer-official-fill
    
  • warning-fill
    
  • customer-management
    
  • zoom-out-fill
    
  • editor-center-alignment
    
  • warning
    
  • editor-eraser
    
  • zoom-in
    
  • editor-background
    
  • zoom-out
    
  • editor-bold
    
  • zoom-in-fill
    
  • customs-clearance-data
    
  • address-book-fill
    
  • customer
    
  • all-fill
    
  • customer-interests
    
  • all
    
  • editor-italic
    
  • address-book
    
  • editor-reduce-cell
    
  • application-record
    
  • editor-filling
    
  • association
    
  • editor-four-column
    
  • assessed-badge
    
  • editor-subscript
    
  • camera-fill
    
  • editor-three-column
    
  • camera-switching-fill
    
  • editor-right-alignment
    
  • camera
    
  • editor-left-alignment
    
  • cascades
    
  • editor-under-line
    
  • category-add
    
  • editor-superscript
    
  • camera-switching
    
  • editor-text
    
  • category
    
  • format-exl
    
  • checkstand
    
  • format-bmp
    
  • click
    
  • editor-rotate
    
  • code
    
  • format-doc
    
  • computer-fill
    
  • editor-tag-subscript
    
  • component
    
  • format-gif
    
  • computer
    
  • format-tif
    
  • company-fill
    
  • goods-add
    
  • conditions
    
  • goods-inspection-fill
    
  • coupon-fill
    
  • format-txt
    
  • 
    connections
    
  • goods-inspection
    
  • company
    
  • goods-start-to-ship
    
  • coupon
    
  • format-xlsx
    
  • communicate-fill
    
  • goods-add-fill
    
  • credit-level-fill
    
  • logistics-container
    
  • communicate
    
  • format-pdf
    
  • credit-level
    
  • format-jpeg
    
  • customer-service-fill
    
  • format-png
    
  • customer-service-24hour-fill
    
  • logistics-airfreight
    
  • customer-service-24hour
    
  • goods
    
  • customer-service
    
  • goods-fill
    
  • customization-fill
    
  • goods-start-to-ship-fill
    
  • customization
    
  • logistics-data-fill
    
  • decorate-fill
    
  • logistics-picked-up
    
  • decorate
    
  • logistics-airfreight-fill
    
  • discount-fill
    
  • logistics-land-transport-fill
    
  • discount
    
  • logistics-ocean-shipping
    
  • document-conversion
    
  • logistics-data
    
  • double-censorship
    
  • format-zip
    
  • flag
    
  • logistics-warehouse-fill
    
  • folder-fill
    
  • message-comments-fill
    
  • email-fill
    
  • logistics-warehouse
    
  • flag-fill
    
  • logistics-storehouse
    
  • folder
    
  • message-language
    
  • global-fill
    
  • message-reply-template
    
  • email
    
  • logistics-ocean-shipping-fill
    
  • global-trade-fill
    
  • message-multi-language-fill
    
  • export-service
    
  • logistics-tracking-fill
    
  • global-trade
    
  • message-comments
    
  • fair
    
  • message-multi-language
    
  • earth
    
  • logistics-tracking
    
  • guide
    
  • message-reply-template-fill
    
  • home-fill
    
  • logistics-land-transport
    
  • home
    
  • message-send-inquiry
    
  • homepage-ads-fill
    
  • money-credit-card-fill
    
  • homepage-ads
    
  • money-credit-card
    
  • honor-fill
    
  • money-bank-fill
    
  • global
    
  • message-send-inquiry-fill
    
  • honor
    
  • money-dollar-symbol
    
  • image-text-fill
    
  • money-asp
    
  • invoice
    
  • money-dollar
    
  • image-text
    
  • money-bank
    
  • lable
    
  • money-exchange-data
    
  • monitor
    
  • money-currency-converter-fill
    
  • live-fill
    
  • money-finance-seller-fill
    
  • live
    
  • money-fee
    
  • layers-fill
    
  • money-currency-converter
    
  • monitor-fill
    
  • money-exchange-settlement
    
  • mobile-phone
    
  • money-quick-refund-plan
    
  • name-card
    
  • money-finance-buyer-fill
    
  • listening-fill
    
  • money-rmb
    
  • name-card-fill
    
  • money-tax-refund
    
  • new
    
  • money-rmb-symbol
    
  • mobile-phone-btn
    
  • money-red-packet-fill
    
  • one-stop-service
    
  • money-rmb-fill
    
  • pad
    
  • money-wallet-fill
    
  • pcm
    
  • money-exchange-rate
    
  • Panorama
    
  • money-funds
    
  • phone-fill
    
  • money-inquiry-template
    
  • phone
    
  • money-red-packet
    
  • picture-search
    
  • money-finance-buyer
    
  • picture-fill
    
  • money-inquiry-template-fill
    
  • picture
    
  • money-finance-seller
    
  • pictures-fill
    
  • money-quick-refund-plan 2
    
  • 
    listening
    
  • money-tax-rebate
    
  • print
    
  • order-inspection-fill
    
  • pin-fill
    
  • order-fill
    
  • protection-fill
    
  • money-wallet
    
  • professional
    
  • order-upload
    
  • qr-code
    
  • product-filter
    
  • print-fill
    
  • order-success
    
  • protection
    
  • order
    
  • pin
    
  • order-inspection
    
  • pictures
    
  • product-checked
    
  • post
    
  • order-manage
    
  • quick-fill
    
  • order-success-fill
    
  • quick
    
  • order-rejected-fill
    
  • ranking-list-fill
    
  • product-get-catalog-fill
    
  • reads
    
  • order-manage-fill
    
  • response
    
  • product-checked-fill
    
  • save-fill
    
  • money-transfer
    
  • response-fill
    
  • order-location
    
  • save
    
  • product-fill
    
  • scenes-fill
    
  • product-list-fill
    
  • ranking-list
    
  • order-location-fill
    
  • scenes
    
  • product-filter-fill
    
  • point-right
    
  • order-rejected
    
  • security-fill
    
  • time-history
    
  • shopping
    
  • time-ontime
    
  • shopping-fill
    
  • time
    
  • security
    
  • time-task-fill
    
  • self-operated-business
    
  • product-loaction-fill
    
  • shut-down
    
  • product-loaction
    
  • square
    

Unicode 引用


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

  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 默认情况下不支持多色,直接添加多色图标会自动去色。

注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1713385637238') format('woff2'),
       url('iconfont.woff?t=1713385637238') format('woff'),
       url('iconfont.ttf?t=1713385637238') format('truetype');
}

第二步:定义使用 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"。

  • product
    .icon-product
  • share live
    .icon-a-sharelive
  • product-list
    .icon-product-list
  • sign-board
    .icon-sign-board
  • time-fill
    .icon-time-fill
  • sign-board-fill
    .icon-sign-board-fill
  • time-response
    .icon-time-response
  • share live-fill
    .icon-a-sharelive-fill
  • product-get-catalog
    .icon-product-get-catalog
  • stamping-service
    .icon-stamping-service
  • time-task
    .icon-time-task
  • store-fill
    .icon-store-fill
  • add-btn-fill
    .icon-add-btn-fill
  • suggest
    .icon-suggest
  • add-btn
    .icon-add-btn
  • survey
    .icon-survey
  • add
    .icon-add
  • store
    .icon-store
  • ascending
    .icon-ascending
  • table-fill
    .icon-table-fill
  • atm-away-fill
    .icon-atm-away-fill
  • table
    .icon-table
  • atm-fill
    .icon-atm-fill
  • tap
    .icon-tap
  • atm-away
    .icon-atm-away
  • teaching
    .icon-teaching
  • atm
    .icon-atm
  • template-fill
    .icon-template-fill
  • attachent
    .icon-attachent
  • tool-fill
    .icon-tool-fill
  • bad-fill
    .icon-bad-fill
  • training-fill
    .icon-training-fill
  • bad
    .icon-bad
  • tool
    .icon-tool
  • cry
    .icon-cry
  • template-success-fill
    .icon-template-success-fill
  • error
    .icon-error
  • template-success
    .icon-template-success
  • down-arrow
    .icon-down-arrow
  • training
    .icon-training
  • delete-fill
    .icon-delete-fill
  • template
    .icon-template
  • calendar
    .icon-calendar
  • top-raning-fill
    .icon-top-raning-fill
  • down-btn-fill
    .icon-down-btn-fill
  • top-raning
    .icon-top-raning
  • cry-fill
    .icon-cry-fill
  • trust-fill
    .icon-trust-fill
  • daytime-mode
    .icon-daytime-mode
  • upload-btn
    .icon-upload-btn
  • down-btn
    .icon-down-btn
  • trade-alert
    .icon-trade-alert
  • filter-fill
    .icon-filter-fill
  • trust
    .icon-trust
  • error-fill
    .icon-error-fill
  • user-defined-fill
    .icon-user-defined-fill
  • filter
    .icon-filter
  • user-defined
    .icon-user-defined
  • filter-records-fill
    .icon-filter-records-fill
  • video-fill
    .icon-video-fill
  • favorites-fill
    .icon-favorites-fill
  • video
    .icon-video
  • calendar-fill
    .icon-calendar-fill
  • vip-fill
    .icon-vip-fill
  • edit
    .icon-edit
  • vip-management
    .icon-vip-management
  • flashlight-auto
    .icon-flashlight-auto
  • vip
    .icon-vip
  • calculator
    .icon-calculator
  • vr-fill
    .icon-vr-fill
  • confirm
    .icon-confirm
  • vr-video-fill
    .icon-vr-video-fill
  • favorites
    .icon-favorites
  • vr-video
    .icon-vr-video
  • daytime-mode-fill
    .icon-daytime-mode-fill
  • writing-fill
    .icon-writing-fill
  • down
    .icon-down
  • writing
    .icon-writing
  • close
    .icon-close
  • wifi
    .icon-wifi
  • flashlight-turned-off
    .icon-flashlight-turned-off
  • 成长指引
    .icon-chengchangzhiyin
  • delete
    .icon-delete
  • 场景流量
    .icon-changjingliuliang
  • descending
    .icon-descending
  • 服务顾问
    .icon-fuwuguwen
  • cut
    .icon-cut
  • 短视频话题
    .icon-duanshipinhuati
  • flashlight
    .icon-flashlight
  • 3D会场
    .icon-a-3Dhuichang
  • filter-records
    .icon-filter-records
  • 大促优先
    .icon-dacuyouxian
  • download
    .icon-download
  • 供应链服务
    .icon-gongyinglianfuwu
  • copy
    .icon-copy
  • 供应链优先
    .icon-gongyinglianyouxian
  • calculator-fill
    .icon-calculator-fill
  • 海运优先权
    .icon-haiyunyouxianquan
  • gallery
    .icon-gallery
  • 海外特权
    .icon-haiwaitequan
  • good-fill
    .icon-good-fill
  • 会员首单满减
    .icon-huiyuanshoudanmanjian
  • follow
    .icon-follow
  • 金品服务报告
    .icon-jinpinfuwubaogao
  • follow-fill
    .icon-follow-fill
  • 金品俱乐部
    .icon-jinpinjulebu
  • good
    .icon-good
  • 金品专享
    .icon-jinpinzhuanxiang
  • hot-for-ux-fill
    .icon-hot-for-ux-fill
  • 品牌广告热词
    .icon-pinpaiguanggaoreci
  • hot-for-atmosphere
    .icon-hot-for-atmosphere
  • 客户通
    .icon-kehutong
  • left
    .icon-left
  • 品证商品 2
    .icon-a-pinzhengshangpin2
  • list
    .icon-list
  • 绿色环保会场
    .icon-lvsehuanbaohuichang
  • info-fill
    .icon-info-fill
  • 品质商品会场
    .icon-pinzhishangpinhuichang
  • left-arrow
    .icon-left-arrow
  • 全球E站发品
    .icon-quanqiuEzhanfapin
  • night-mode-fill
    .icon-night-mode-fill
  • 品证商品
    .icon-pinzhengshangpin
  • lower-left-arrow
    .icon-lower-left-arrow
  • 人才双选会
    .icon-rencaishuangxuanhui
  • lock
    .icon-lock
  • 全景图
    .icon-quanjingtu
  • left-btn
    .icon-left-btn
  • 人工客服
    .icon-rengongkefu
  • mute-fill
    .icon-mute-fill
  • 生意贷
    .icon-shengyidai
  • help-fill
    .icon-help-fill
  • 实力工厂
    .icon-shiligongchang
  • info
    .icon-info
  • 实力卡片
    .icon-shilikapian
  • more
    .icon-more
  • 数据参谋
    .icon-shujucanmou
  • loading
    .icon-loading
  • 实地认证
    .icon-shidirenzheng
  • business-icon-Alibaba.com Online Trade Show
    .icon-a-business-icon-AlibabacomOnlineTradeShow
  • location-fill
    .icon-location-fill
  • 搜索排序
    .icon-sousuopaixu
  • business-icon-Big promotion
    .icon-a-business-icon-Bigpromotion
  • mute
    .icon-mute
  • 私有模具会场
    .icon-siyoumojuhuichang
  • business-icon-buyers-club-fill
    .icon-business-icon-buyers-club-fill
  • lock-fill
    .icon-lock-fill
  • 网商贷
    .icon-wangshangdai
  • business-icon-ali-clould
    .icon-business-icon-ali-clould
  • link
    .icon-link
  • 行业竞争力
    .icon-hangyejingzhengli
  • business-icon- MOQ
    .icon-a-business-icon-MOQ
  • left-double-arrow
    .icon-left-double-arrow
  • 行业报告
    .icon-hangyebaogao
  • business-icon-buyers-club
    .icon-business-icon-buyers-club
  • help
    .icon-help
  • 证书验真
    .icon-zhengshuyanzhen
  • business-icon-gold-supplier 2
    .icon-a-business-icon-gold-supplier2
  • move
    .icon-move
  • 旺铺装修
    .icon-wangpuzhuangxiu
  • business-icon-feeds
    .icon-business-icon-feeds
  • mute-btn
    .icon-mute-btn
  • 行业活动
    .icon-hangyehuodong
  • business-icon-gold-supplier
    .icon-business-icon-gold-supplier
  • location
    .icon-location
  • 专属场景
    .icon-zhuanshuchangjing
  • business-icon-feeds-logo-fill
    .icon-business-icon-feeds-logo-fill
  • left-btn-fill
    .icon-left-btn-fill
  • 优质贸易区
    .icon-youzhimaoyiqu
  • business-icon-feeds-fill
    .icon-business-icon-feeds-fill
  • notice-fill
    .icon-notice-fill
  • 专属经理
    .icon-zhuanshujingli
  • business-icon-feeds-logo
    .icon-business-icon-feeds-logo
  • lower-right-arrow
    .icon-lower-right-arrow
  • showroom
    .icon-showroom
  • business-icon-festivals
    .icon-business-icon-festivals
  • hot-for-ux
    .icon-hot-for-ux
  • SDK会场
    .icon-SDKhuichang
  • business-icon-rfq-word
    .icon-business-icon-rfq-word
  • hide
    .icon-hide
  • WD活动
    .icon-WDhuodong
  • business-icon-vs
    .icon-business-icon-vs
  • mute-btn-fill
    .icon-mute-btn-fill
  • 验场视频
    .icon-yanchangshipin
  • business-icon-vs-fill
    .icon-business-icon-vs-fill
  • play-fill
    .icon-play-fill
  • 专属服务
    .icon-zhuanshufuwu
  • business-icon-trade-assurance-fill
    .icon-business-icon-trade-assurance-fill
  • night-mode
    .icon-night-mode
  • business-rfq
    .icon-business-rfq
  • business-MY bank
    .icon-a-business-MYbank
  • reduce-btn-fill
    .icon-reduce-btn-fill
  • layers
    .icon-layers
  • cart-add
    .icon-cart-add
  • play
    .icon-play
  • layered-configuration
    .icon-layered-configuration
  • business-icon-two-years
    .icon-business-icon-two-years
  • notice
    .icon-notice
  • express discount
    .icon-a-expressdiscount
  • business-icon-sales-center
    .icon-business-icon-sales-center
  • right
    .icon-right
  • send-fill
    .icon-send-fill
  • business-icon-OEM
    .icon-business-icon-OEM
  • reduce
    .icon-reduce
  • Image Processing
    .icon-a-ImageProcessing
  • business-icon-weekly Deals
    .icon-a-business-icon-weeklyDeals
  • right-btn-fill
    .icon-right-btn-fill
  • video generation
    .icon-a-videogeneration
  • business-icon-sales-center-fill
    .icon-business-icon-sales-center-fill
  • reduce-btn
    .icon-reduce-btn
  • translate
    .icon-translate
  • business-icon-rfq-word-fill
    .icon-business-icon-rfq-word-fill
  • right-btn
    .icon-right-btn
  • command inquiry-fill
    .icon-a-commandinquiry-fill
  • business-icon-trade-assurance
    .icon-business-icon-trade-assurance
  • selected
    .icon-selected
  • title optimization
    .icon-a-titleoptimization
  • cart-add-fill
    .icon-cart-add-fill
  • search-for-similar
    .icon-search-for-similar
  • AI-money
    .icon-AI-money
  • business-icon-one-touch
    .icon-business-icon-one-touch
  • remind-fill
    .icon-remind-fill
  • New-outline(3)
    .icon-a-New-outline3
  • business-icon-two-years-fill
    .icon-business-icon-two-years-fill
  • right-arrow
    .icon-right-arrow
  • change
    .icon-change
  • cart-full-fill
    .icon-cart-full-fill
  • remind-btn-fill
    .icon-remind-btn-fill
  • catalog-check
    .icon-catalog-check
  • return
    .icon-return
  • catalog-check-fill
    .icon-catalog-check-fill
  • search
    .icon-search
  • catalog-fill
    .icon-catalog-fill
  • remind
    .icon-remind
  • charts-line
    .icon-charts-line
  • remind-btn
    .icon-remind-btn
  • cart-full
    .icon-cart-full
  • scan
    .icon-scan
  • cart-search
    .icon-cart-search
  • right-double-arrow
    .icon-right-double-arrow
  • cart-empty
    .icon-cart-empty
  • smile-fill
    .icon-smile-fill
  • cart-empty-fill
    .icon-cart-empty-fill
  • settings-fill
    .icon-settings-fill
  • catalog
    .icon-catalog
  • share
    .icon-share
  • charts-pie
    .icon-charts-pie
  • smile
    .icon-smile
  • catalog-download
    .icon-catalog-download
  • settings
    .icon-settings
  • charts-curve
    .icon-charts-curve
  • sorting 2
    .icon-a-sorting2
  • charts-bar
    .icon-charts-bar
  • stop-fill
    .icon-stop-fill
  • cart-search-fill
    .icon-cart-search-fill
  • stop
    .icon-stop
  • costoms
    .icon-costoms
  • sorting
    .icon-sorting
  • catalog-download-fill
    .icon-catalog-download-fill
  • success-fill
    .icon-success-fill
  • customer-businessman-fill
    .icon-customer-businessman-fill
  • suspend-fill
    .icon-suspend-fill
  • customer-add
    .icon-customer-add
  • success
    .icon-success
  • customer-bussinessman
    .icon-customer-bussinessman
  • suspend
    .icon-suspend
  • customer-add-fill
    .icon-customer-add-fill
  • unlock-fill
    .icon-unlock-fill
  • customer-certified
    .icon-customer-certified
  • unlock
    .icon-unlock
  • customer-certified-fill
    .icon-customer-certified-fill
  • up-arrow
    .icon-up-arrow
  • customer-center
    .icon-customer-center
  • up-btn-fill
    .icon-up-btn-fill
  • customer-filter-fill
    .icon-customer-filter-fill
  • up-btn
    .icon-up-btn
  • customer-fill
    .icon-customer-fill
  • up
    .icon-up
  • customer-fee
    .icon-customer-fee
  • upload
    .icon-upload
  • customer-filter
    .icon-customer-filter
  • upper-right-arrow
    .icon-upper-right-arrow
  • customer-group-fill
    .icon-customer-group-fill
  • volume-btn-fill
    .icon-volume-btn-fill
  • customer-group
    .icon-customer-group
  • view
    .icon-view
  • customs-clearance
    .icon-customs-clearance
  • view-fill
    .icon-view-fill
  • customer-search
    .icon-customer-search
  • upper-left-arrow
    .icon-upper-left-arrow
  • editor-background-color
    .icon-editor-background-color
  • volume-fill
    .icon-volume-fill
  • editor-add-cell
    .icon-editor-add-cell
  • volume
    .icon-volume
  • customer-official
    .icon-customer-official
  • volume-btn
    .icon-volume-btn
  • customer-official-fill
    .icon-customer-official-fill
  • warning-fill
    .icon-warning-fill
  • customer-management
    .icon-customer-management
  • zoom-out-fill
    .icon-zoom-out-fill
  • editor-center-alignment
    .icon-editor-center-alignment
  • warning
    .icon-warning
  • editor-eraser
    .icon-editor-eraser
  • zoom-in
    .icon-zoom-in
  • editor-background
    .icon-editor-background
  • zoom-out
    .icon-zoom-out
  • editor-bold
    .icon-editor-bold
  • zoom-in-fill
    .icon-zoom-in-fill
  • customs-clearance-data
    .icon-customs-clearance-data
  • address-book-fill
    .icon-address-book-fill
  • customer
    .icon-customer
  • all-fill
    .icon-all-fill
  • customer-interests
    .icon-customer-interests
  • all
    .icon-all
  • editor-italic
    .icon-editor-italic
  • address-book
    .icon-address-book
  • editor-reduce-cell
    .icon-editor-reduce-cell
  • application-record
    .icon-application-record
  • editor-filling
    .icon-editor-filling
  • association
    .icon-association
  • editor-four-column
    .icon-editor-four-column
  • assessed-badge
    .icon-assessed-badge
  • editor-subscript
    .icon-editor-subscript
  • camera-fill
    .icon-camera-fill
  • editor-three-column
    .icon-editor-three-column
  • camera-switching-fill
    .icon-camera-switching-fill
  • editor-right-alignment
    .icon-editor-right-alignment
  • camera
    .icon-camera
  • editor-left-alignment
    .icon-editor-left-alignment
  • cascades
    .icon-cascades
  • editor-under-line
    .icon-editor-under-line
  • category-add
    .icon-category-add
  • editor-superscript
    .icon-editor-superscript
  • camera-switching
    .icon-camera-switching
  • editor-text
    .icon-editor-text
  • category
    .icon-category
  • format-exl
    .icon-format-exl
  • checkstand
    .icon-checkstand
  • format-bmp
    .icon-format-bmp
  • click
    .icon-click
  • editor-rotate
    .icon-editor-rotate
  • code
    .icon-code
  • format-doc
    .icon-format-doc
  • computer-fill
    .icon-computer-fill
  • editor-tag-subscript
    .icon-editor-tag-subscript
  • component
    .icon-component
  • format-gif
    .icon-format-gif
  • computer
    .icon-computer
  • format-tif
    .icon-format-tif
  • company-fill
    .icon-company-fill
  • goods-add
    .icon-goods-add
  • conditions
    .icon-conditions
  • goods-inspection-fill
    .icon-goods-inspection-fill
  • coupon-fill
    .icon-coupon-fill
  • format-txt
    .icon-format-txt
  • connections
    .icon-connections
  • goods-inspection
    .icon-goods-inspection
  • company
    .icon-company
  • goods-start-to-ship
    .icon-goods-start-to-ship
  • coupon
    .icon-coupon
  • format-xlsx
    .icon-format-xlsx
  • communicate-fill
    .icon-communicate-fill
  • goods-add-fill
    .icon-goods-add-fill
  • credit-level-fill
    .icon-credit-level-fill
  • logistics-container
    .icon-logistics-container
  • communicate
    .icon-communicate
  • format-pdf
    .icon-format-pdf
  • credit-level
    .icon-credit-level
  • format-jpeg
    .icon-format-jpeg
  • customer-service-fill
    .icon-customer-service-fill
  • format-png
    .icon-format-png
  • customer-service-24hour-fill
    .icon-customer-service-24hour-fill
  • logistics-airfreight
    .icon-logistics-airfreight
  • customer-service-24hour
    .icon-customer-service-24hour
  • goods
    .icon-goods
  • customer-service
    .icon-customer-service
  • goods-fill
    .icon-goods-fill
  • customization-fill
    .icon-customization-fill
  • goods-start-to-ship-fill
    .icon-goods-start-to-ship-fill
  • customization
    .icon-customization
  • logistics-data-fill
    .icon-logistics-data-fill
  • decorate-fill
    .icon-decorate-fill
  • logistics-picked-up
    .icon-logistics-picked-up
  • decorate
    .icon-decorate
  • logistics-airfreight-fill
    .icon-logistics-airfreight-fill
  • discount-fill
    .icon-discount-fill
  • logistics-land-transport-fill
    .icon-logistics-land-transport-fill
  • discount
    .icon-discount
  • logistics-ocean-shipping
    .icon-logistics-ocean-shipping
  • document-conversion
    .icon-document-conversion
  • logistics-data
    .icon-logistics-data
  • double-censorship
    .icon-double-censorship
  • format-zip
    .icon-format-zip
  • flag
    .icon-flag
  • logistics-warehouse-fill
    .icon-logistics-warehouse-fill
  • folder-fill
    .icon-folder-fill
  • message-comments-fill
    .icon-message-comments-fill
  • email-fill
    .icon-email-fill
  • logistics-warehouse
    .icon-logistics-warehouse
  • flag-fill
    .icon-flag-fill
  • logistics-storehouse
    .icon-logistics-storehouse
  • folder
    .icon-folder
  • message-language
    .icon-message-language
  • global-fill
    .icon-global-fill
  • message-reply-template
    .icon-message-reply-template
  • email
    .icon-email
  • logistics-ocean-shipping-fill
    .icon-logistics-ocean-shipping-fill
  • global-trade-fill
    .icon-global-trade-fill
  • message-multi-language-fill
    .icon-message-multi-language-fill
  • export-service
    .icon-export-service
  • logistics-tracking-fill
    .icon-logistics-tracking-fill
  • global-trade
    .icon-global-trade
  • message-comments
    .icon-message-comments
  • fair
    .icon-fair
  • message-multi-language
    .icon-message-multi-language
  • earth
    .icon-earth
  • logistics-tracking
    .icon-logistics-tracking
  • guide
    .icon-guide
  • message-reply-template-fill
    .icon-message-reply-template-fill
  • home-fill
    .icon-home-fill
  • logistics-land-transport
    .icon-logistics-land-transport
  • home
    .icon-home
  • message-send-inquiry
    .icon-message-send-inquiry
  • homepage-ads-fill
    .icon-homepage-ads-fill
  • money-credit-card-fill
    .icon-money-credit-card-fill
  • homepage-ads
    .icon-homepage-ads
  • money-credit-card
    .icon-money-credit-card
  • honor-fill
    .icon-honor-fill
  • money-bank-fill
    .icon-money-bank-fill
  • global
    .icon-global
  • message-send-inquiry-fill
    .icon-message-send-inquiry-fill
  • honor
    .icon-honor
  • money-dollar-symbol
    .icon-money-dollar-symbol
  • image-text-fill
    .icon-image-text-fill
  • money-asp
    .icon-money-asp
  • invoice
    .icon-invoice
  • money-dollar
    .icon-money-dollar
  • image-text
    .icon-image-text
  • money-bank
    .icon-money-bank
  • lable
    .icon-lable
  • money-exchange-data
    .icon-money-exchange-data
  • monitor
    .icon-monitor
  • money-currency-converter-fill
    .icon-money-currency-converter-fill
  • live-fill
    .icon-live-fill
  • money-finance-seller-fill
    .icon-money-finance-seller-fill
  • live
    .icon-live
  • money-fee
    .icon-money-fee
  • layers-fill
    .icon-layers-fill
  • money-currency-converter
    .icon-money-currency-converter
  • monitor-fill
    .icon-monitor-fill
  • money-exchange-settlement
    .icon-money-exchange-settlement
  • mobile-phone
    .icon-mobile-phone
  • money-quick-refund-plan
    .icon-money-quick-refund-plan
  • name-card
    .icon-name-card
  • money-finance-buyer-fill
    .icon-money-finance-buyer-fill
  • listening-fill
    .icon-listening-fill
  • money-rmb
    .icon-money-rmb
  • name-card-fill
    .icon-name-card-fill
  • money-tax-refund
    .icon-money-tax-refund
  • new
    .icon-new
  • money-rmb-symbol
    .icon-money-rmb-symbol
  • mobile-phone-btn
    .icon-mobile-phone-btn
  • money-red-packet-fill
    .icon-money-red-packet-fill
  • one-stop-service
    .icon-one-stop-service
  • money-rmb-fill
    .icon-money-rmb-fill
  • pad
    .icon-pad
  • money-wallet-fill
    .icon-money-wallet-fill
  • pcm
    .icon-pcm
  • money-exchange-rate
    .icon-money-exchange-rate
  • Panorama
    .icon-Panorama
  • money-funds
    .icon-money-funds
  • phone-fill
    .icon-phone-fill
  • money-inquiry-template
    .icon-money-inquiry-template
  • phone
    .icon-phone
  • money-red-packet
    .icon-money-red-packet
  • picture-search
    .icon-picture-search
  • money-finance-buyer
    .icon-money-finance-buyer
  • picture-fill
    .icon-picture-fill
  • money-inquiry-template-fill
    .icon-money-inquiry-template-fill
  • picture
    .icon-picture
  • money-finance-seller
    .icon-money-finance-seller
  • pictures-fill
    .icon-pictures-fill
  • money-quick-refund-plan 2
    .icon-a-money-quick-refund-plan2
  • listening
    .icon-listening
  • money-tax-rebate
    .icon-money-tax-rebate
  • print
    .icon-print
  • order-inspection-fill
    .icon-order-inspection-fill
  • pin-fill
    .icon-pin-fill
  • order-fill
    .icon-order-fill
  • protection-fill
    .icon-protection-fill
  • money-wallet
    .icon-money-wallet
  • professional
    .icon-professional
  • order-upload
    .icon-order-upload
  • qr-code
    .icon-qr-code
  • product-filter
    .icon-product-filter
  • print-fill
    .icon-print-fill
  • order-success
    .icon-order-success
  • protection
    .icon-protection
  • order
    .icon-order
  • pin
    .icon-pin
  • order-inspection
    .icon-order-inspection
  • pictures
    .icon-pictures
  • product-checked
    .icon-product-checked
  • post
    .icon-post
  • order-manage
    .icon-order-manage
  • quick-fill
    .icon-quick-fill
  • order-success-fill
    .icon-order-success-fill
  • quick
    .icon-quick
  • order-rejected-fill
    .icon-order-rejected-fill
  • ranking-list-fill
    .icon-ranking-list-fill
  • product-get-catalog-fill
    .icon-product-get-catalog-fill
  • reads
    .icon-reads
  • order-manage-fill
    .icon-order-manage-fill
  • response
    .icon-response
  • product-checked-fill
    .icon-product-checked-fill
  • save-fill
    .icon-save-fill
  • money-transfer
    .icon-money-transfer
  • response-fill
    .icon-response-fill
  • order-location
    .icon-order-location
  • save
    .icon-save
  • product-fill
    .icon-product-fill
  • scenes-fill
    .icon-scenes-fill
  • product-list-fill
    .icon-product-list-fill
  • ranking-list
    .icon-ranking-list
  • order-location-fill
    .icon-order-location-fill
  • scenes
    .icon-scenes
  • product-filter-fill
    .icon-product-filter-fill
  • point-right
    .icon-point-right
  • order-rejected
    .icon-order-rejected
  • security-fill
    .icon-security-fill
  • time-history
    .icon-time-history
  • shopping
    .icon-shopping
  • time-ontime
    .icon-time-ontime
  • shopping-fill
    .icon-shopping-fill
  • time
    .icon-time
  • security
    .icon-security
  • time-task-fill
    .icon-time-task-fill
  • self-operated-business
    .icon-self-operated-business
  • product-loaction-fill
    .icon-product-loaction-fill
  • shut-down
    .icon-shut-down
  • product-loaction
    .icon-product-loaction
  • square
    .icon-square

font-class 引用


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

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

  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。

使用步骤如下:

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

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

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

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

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

  • product
    #icon-product
  • share live
    #icon-a-sharelive
  • product-list
    #icon-product-list
  • sign-board
    #icon-sign-board
  • time-fill
    #icon-time-fill
  • sign-board-fill
    #icon-sign-board-fill
  • time-response
    #icon-time-response
  • share live-fill
    #icon-a-sharelive-fill
  • product-get-catalog
    #icon-product-get-catalog
  • stamping-service
    #icon-stamping-service
  • time-task
    #icon-time-task
  • store-fill
    #icon-store-fill
  • add-btn-fill
    #icon-add-btn-fill
  • suggest
    #icon-suggest
  • add-btn
    #icon-add-btn
  • survey
    #icon-survey
  • add
    #icon-add
  • store
    #icon-store
  • ascending
    #icon-ascending
  • table-fill
    #icon-table-fill
  • atm-away-fill
    #icon-atm-away-fill
  • table
    #icon-table
  • atm-fill
    #icon-atm-fill
  • tap
    #icon-tap
  • atm-away
    #icon-atm-away
  • teaching
    #icon-teaching
  • atm
    #icon-atm
  • template-fill
    #icon-template-fill
  • attachent
    #icon-attachent
  • tool-fill
    #icon-tool-fill
  • bad-fill
    #icon-bad-fill
  • training-fill
    #icon-training-fill
  • bad
    #icon-bad
  • tool
    #icon-tool
  • cry
    #icon-cry
  • template-success-fill
    #icon-template-success-fill
  • error
    #icon-error
  • template-success
    #icon-template-success
  • down-arrow
    #icon-down-arrow
  • training
    #icon-training
  • delete-fill
    #icon-delete-fill
  • template
    #icon-template
  • calendar
    #icon-calendar
  • top-raning-fill
    #icon-top-raning-fill
  • down-btn-fill
    #icon-down-btn-fill
  • top-raning
    #icon-top-raning
  • cry-fill
    #icon-cry-fill
  • trust-fill
    #icon-trust-fill
  • daytime-mode
    #icon-daytime-mode
  • upload-btn
    #icon-upload-btn
  • down-btn
    #icon-down-btn
  • trade-alert
    #icon-trade-alert
  • filter-fill
    #icon-filter-fill
  • trust
    #icon-trust
  • error-fill
    #icon-error-fill
  • user-defined-fill
    #icon-user-defined-fill
  • filter
    #icon-filter
  • user-defined
    #icon-user-defined
  • filter-records-fill
    #icon-filter-records-fill
  • video-fill
    #icon-video-fill
  • favorites-fill
    #icon-favorites-fill
  • video
    #icon-video
  • calendar-fill
    #icon-calendar-fill
  • vip-fill
    #icon-vip-fill
  • edit
    #icon-edit
  • vip-management
    #icon-vip-management
  • flashlight-auto
    #icon-flashlight-auto
  • vip
    #icon-vip
  • calculator
    #icon-calculator
  • vr-fill
    #icon-vr-fill
  • confirm
    #icon-confirm
  • vr-video-fill
    #icon-vr-video-fill
  • favorites
    #icon-favorites
  • vr-video
    #icon-vr-video
  • daytime-mode-fill
    #icon-daytime-mode-fill
  • writing-fill
    #icon-writing-fill
  • down
    #icon-down
  • writing
    #icon-writing
  • close
    #icon-close
  • wifi
    #icon-wifi
  • flashlight-turned-off
    #icon-flashlight-turned-off
  • 成长指引
    #icon-chengchangzhiyin
  • delete
    #icon-delete
  • 场景流量
    #icon-changjingliuliang
  • descending
    #icon-descending
  • 服务顾问
    #icon-fuwuguwen
  • cut
    #icon-cut
  • 短视频话题
    #icon-duanshipinhuati
  • flashlight
    #icon-flashlight
  • 3D会场
    #icon-a-3Dhuichang
  • filter-records
    #icon-filter-records
  • 大促优先
    #icon-dacuyouxian
  • download
    #icon-download
  • 供应链服务
    #icon-gongyinglianfuwu
  • copy
    #icon-copy
  • 供应链优先
    #icon-gongyinglianyouxian
  • calculator-fill
    #icon-calculator-fill
  • 海运优先权
    #icon-haiyunyouxianquan
  • gallery
    #icon-gallery
  • 海外特权
    #icon-haiwaitequan
  • good-fill
    #icon-good-fill
  • 会员首单满减
    #icon-huiyuanshoudanmanjian
  • follow
    #icon-follow
  • 金品服务报告
    #icon-jinpinfuwubaogao
  • follow-fill
    #icon-follow-fill
  • 金品俱乐部
    #icon-jinpinjulebu
  • good
    #icon-good
  • 金品专享
    #icon-jinpinzhuanxiang
  • hot-for-ux-fill
    #icon-hot-for-ux-fill
  • 品牌广告热词
    #icon-pinpaiguanggaoreci
  • hot-for-atmosphere
    #icon-hot-for-atmosphere
  • 客户通
    #icon-kehutong
  • left
    #icon-left
  • 品证商品 2
    #icon-a-pinzhengshangpin2
  • list
    #icon-list
  • 绿色环保会场
    #icon-lvsehuanbaohuichang
  • info-fill
    #icon-info-fill
  • 品质商品会场
    #icon-pinzhishangpinhuichang
  • left-arrow
    #icon-left-arrow
  • 全球E站发品
    #icon-quanqiuEzhanfapin
  • night-mode-fill
    #icon-night-mode-fill
  • 品证商品
    #icon-pinzhengshangpin
  • lower-left-arrow
    #icon-lower-left-arrow
  • 人才双选会
    #icon-rencaishuangxuanhui
  • lock
    #icon-lock
  • 全景图
    #icon-quanjingtu
  • left-btn
    #icon-left-btn
  • 人工客服
    #icon-rengongkefu
  • mute-fill
    #icon-mute-fill
  • 生意贷
    #icon-shengyidai
  • help-fill
    #icon-help-fill
  • 实力工厂
    #icon-shiligongchang
  • info
    #icon-info
  • 实力卡片
    #icon-shilikapian
  • more
    #icon-more
  • 数据参谋
    #icon-shujucanmou
  • loading
    #icon-loading
  • 实地认证
    #icon-shidirenzheng
  • business-icon-Alibaba.com Online Trade Show
    #icon-a-business-icon-AlibabacomOnlineTradeShow
  • location-fill
    #icon-location-fill
  • 搜索排序
    #icon-sousuopaixu
  • business-icon-Big promotion
    #icon-a-business-icon-Bigpromotion
  • mute
    #icon-mute
  • 私有模具会场
    #icon-siyoumojuhuichang
  • business-icon-buyers-club-fill
    #icon-business-icon-buyers-club-fill
  • lock-fill
    #icon-lock-fill
  • 网商贷
    #icon-wangshangdai
  • business-icon-ali-clould
    #icon-business-icon-ali-clould
  • link
    #icon-link
  • 行业竞争力
    #icon-hangyejingzhengli
  • business-icon- MOQ
    #icon-a-business-icon-MOQ
  • left-double-arrow
    #icon-left-double-arrow
  • 行业报告
    #icon-hangyebaogao
  • business-icon-buyers-club
    #icon-business-icon-buyers-club
  • help
    #icon-help
  • 证书验真
    #icon-zhengshuyanzhen
  • business-icon-gold-supplier 2
    #icon-a-business-icon-gold-supplier2
  • move
    #icon-move
  • 旺铺装修
    #icon-wangpuzhuangxiu
  • business-icon-feeds
    #icon-business-icon-feeds
  • mute-btn
    #icon-mute-btn
  • 行业活动
    #icon-hangyehuodong
  • business-icon-gold-supplier
    #icon-business-icon-gold-supplier
  • location
    #icon-location
  • 专属场景
    #icon-zhuanshuchangjing
  • business-icon-feeds-logo-fill
    #icon-business-icon-feeds-logo-fill
  • left-btn-fill
    #icon-left-btn-fill
  • 优质贸易区
    #icon-youzhimaoyiqu
  • business-icon-feeds-fill
    #icon-business-icon-feeds-fill
  • notice-fill
    #icon-notice-fill
  • 专属经理
    #icon-zhuanshujingli
  • business-icon-feeds-logo
    #icon-business-icon-feeds-logo
  • lower-right-arrow
    #icon-lower-right-arrow
  • showroom
    #icon-showroom
  • business-icon-festivals
    #icon-business-icon-festivals
  • hot-for-ux
    #icon-hot-for-ux
  • SDK会场
    #icon-SDKhuichang
  • business-icon-rfq-word
    #icon-business-icon-rfq-word
  • hide
    #icon-hide
  • WD活动
    #icon-WDhuodong
  • business-icon-vs
    #icon-business-icon-vs
  • mute-btn-fill
    #icon-mute-btn-fill
  • 验场视频
    #icon-yanchangshipin
  • business-icon-vs-fill
    #icon-business-icon-vs-fill
  • play-fill
    #icon-play-fill
  • 专属服务
    #icon-zhuanshufuwu
  • business-icon-trade-assurance-fill
    #icon-business-icon-trade-assurance-fill
  • night-mode
    #icon-night-mode
  • business-rfq
    #icon-business-rfq
  • business-MY bank
    #icon-a-business-MYbank
  • reduce-btn-fill
    #icon-reduce-btn-fill
  • layers
    #icon-layers
  • cart-add
    #icon-cart-add
  • play
    #icon-play
  • layered-configuration
    #icon-layered-configuration
  • business-icon-two-years
    #icon-business-icon-two-years
  • notice
    #icon-notice
  • express discount
    #icon-a-expressdiscount
  • business-icon-sales-center
    #icon-business-icon-sales-center
  • right
    #icon-right
  • send-fill
    #icon-send-fill
  • business-icon-OEM
    #icon-business-icon-OEM
  • reduce
    #icon-reduce
  • Image Processing
    #icon-a-ImageProcessing
  • business-icon-weekly Deals
    #icon-a-business-icon-weeklyDeals
  • right-btn-fill
    #icon-right-btn-fill
  • video generation
    #icon-a-videogeneration
  • business-icon-sales-center-fill
    #icon-business-icon-sales-center-fill
  • reduce-btn
    #icon-reduce-btn
  • translate
    #icon-translate
  • business-icon-rfq-word-fill
    #icon-business-icon-rfq-word-fill
  • right-btn
    #icon-right-btn
  • command inquiry-fill
    #icon-a-commandinquiry-fill
  • business-icon-trade-assurance
    #icon-business-icon-trade-assurance
  • selected
    #icon-selected
  • title optimization
    #icon-a-titleoptimization
  • cart-add-fill
    #icon-cart-add-fill
  • search-for-similar
    #icon-search-for-similar
  • AI-money
    #icon-AI-money
  • business-icon-one-touch
    #icon-business-icon-one-touch
  • remind-fill
    #icon-remind-fill
  • New-outline(3)
    #icon-a-New-outline3
  • business-icon-two-years-fill
    #icon-business-icon-two-years-fill
  • right-arrow
    #icon-right-arrow
  • change
    #icon-change
  • cart-full-fill
    #icon-cart-full-fill
  • remind-btn-fill
    #icon-remind-btn-fill
  • catalog-check
    #icon-catalog-check
  • return
    #icon-return
  • catalog-check-fill
    #icon-catalog-check-fill
  • search
    #icon-search
  • catalog-fill
    #icon-catalog-fill
  • remind
    #icon-remind
  • charts-line
    #icon-charts-line
  • remind-btn
    #icon-remind-btn
  • cart-full
    #icon-cart-full
  • scan
    #icon-scan
  • cart-search
    #icon-cart-search
  • right-double-arrow
    #icon-right-double-arrow
  • cart-empty
    #icon-cart-empty
  • smile-fill
    #icon-smile-fill
  • cart-empty-fill
    #icon-cart-empty-fill
  • settings-fill
    #icon-settings-fill
  • catalog
    #icon-catalog
  • share
    #icon-share
  • charts-pie
    #icon-charts-pie
  • smile
    #icon-smile
  • catalog-download
    #icon-catalog-download
  • settings
    #icon-settings
  • charts-curve
    #icon-charts-curve
  • sorting 2
    #icon-a-sorting2
  • charts-bar
    #icon-charts-bar
  • stop-fill
    #icon-stop-fill
  • cart-search-fill
    #icon-cart-search-fill
  • stop
    #icon-stop
  • costoms
    #icon-costoms
  • sorting
    #icon-sorting
  • catalog-download-fill
    #icon-catalog-download-fill
  • success-fill
    #icon-success-fill
  • customer-businessman-fill
    #icon-customer-businessman-fill
  • suspend-fill
    #icon-suspend-fill
  • customer-add
    #icon-customer-add
  • success
    #icon-success
  • customer-bussinessman
    #icon-customer-bussinessman
  • suspend
    #icon-suspend
  • customer-add-fill
    #icon-customer-add-fill
  • unlock-fill
    #icon-unlock-fill
  • customer-certified
    #icon-customer-certified
  • unlock
    #icon-unlock
  • customer-certified-fill
    #icon-customer-certified-fill
  • up-arrow
    #icon-up-arrow
  • customer-center
    #icon-customer-center
  • up-btn-fill
    #icon-up-btn-fill
  • customer-filter-fill
    #icon-customer-filter-fill
  • up-btn
    #icon-up-btn
  • customer-fill
    #icon-customer-fill
  • up
    #icon-up
  • customer-fee
    #icon-customer-fee
  • upload
    #icon-upload
  • customer-filter
    #icon-customer-filter
  • upper-right-arrow
    #icon-upper-right-arrow
  • customer-group-fill
    #icon-customer-group-fill
  • volume-btn-fill
    #icon-volume-btn-fill
  • customer-group
    #icon-customer-group
  • view
    #icon-view
  • customs-clearance
    #icon-customs-clearance
  • view-fill
    #icon-view-fill
  • customer-search
    #icon-customer-search
  • upper-left-arrow
    #icon-upper-left-arrow
  • editor-background-color
    #icon-editor-background-color
  • volume-fill
    #icon-volume-fill
  • editor-add-cell
    #icon-editor-add-cell
  • volume
    #icon-volume
  • customer-official
    #icon-customer-official
  • volume-btn
    #icon-volume-btn
  • customer-official-fill
    #icon-customer-official-fill
  • warning-fill
    #icon-warning-fill
  • customer-management
    #icon-customer-management
  • zoom-out-fill
    #icon-zoom-out-fill
  • editor-center-alignment
    #icon-editor-center-alignment
  • warning
    #icon-warning
  • editor-eraser
    #icon-editor-eraser
  • zoom-in
    #icon-zoom-in
  • editor-background
    #icon-editor-background
  • zoom-out
    #icon-zoom-out
  • editor-bold
    #icon-editor-bold
  • zoom-in-fill
    #icon-zoom-in-fill
  • customs-clearance-data
    #icon-customs-clearance-data
  • address-book-fill
    #icon-address-book-fill
  • customer
    #icon-customer
  • all-fill
    #icon-all-fill
  • customer-interests
    #icon-customer-interests
  • all
    #icon-all
  • editor-italic
    #icon-editor-italic
  • address-book
    #icon-address-book
  • editor-reduce-cell
    #icon-editor-reduce-cell
  • application-record
    #icon-application-record
  • editor-filling
    #icon-editor-filling
  • association
    #icon-association
  • editor-four-column
    #icon-editor-four-column
  • assessed-badge
    #icon-assessed-badge
  • editor-subscript
    #icon-editor-subscript
  • camera-fill
    #icon-camera-fill
  • editor-three-column
    #icon-editor-three-column
  • camera-switching-fill
    #icon-camera-switching-fill
  • editor-right-alignment
    #icon-editor-right-alignment
  • camera
    #icon-camera
  • editor-left-alignment
    #icon-editor-left-alignment
  • cascades
    #icon-cascades
  • editor-under-line
    #icon-editor-under-line
  • category-add
    #icon-category-add
  • editor-superscript
    #icon-editor-superscript
  • camera-switching
    #icon-camera-switching
  • editor-text
    #icon-editor-text
  • category
    #icon-category
  • format-exl
    #icon-format-exl
  • checkstand
    #icon-checkstand
  • format-bmp
    #icon-format-bmp
  • click
    #icon-click
  • editor-rotate
    #icon-editor-rotate
  • code
    #icon-code
  • format-doc
    #icon-format-doc
  • computer-fill
    #icon-computer-fill
  • editor-tag-subscript
    #icon-editor-tag-subscript
  • component
    #icon-component
  • format-gif
    #icon-format-gif
  • computer
    #icon-computer
  • format-tif
    #icon-format-tif
  • company-fill
    #icon-company-fill
  • goods-add
    #icon-goods-add
  • conditions
    #icon-conditions
  • goods-inspection-fill
    #icon-goods-inspection-fill
  • coupon-fill
    #icon-coupon-fill
  • format-txt
    #icon-format-txt
  • connections
    #icon-connections
  • goods-inspection
    #icon-goods-inspection
  • company
    #icon-company
  • goods-start-to-ship
    #icon-goods-start-to-ship
  • coupon
    #icon-coupon
  • format-xlsx
    #icon-format-xlsx
  • communicate-fill
    #icon-communicate-fill
  • goods-add-fill
    #icon-goods-add-fill
  • credit-level-fill
    #icon-credit-level-fill
  • logistics-container
    #icon-logistics-container
  • communicate
    #icon-communicate
  • format-pdf
    #icon-format-pdf
  • credit-level
    #icon-credit-level
  • format-jpeg
    #icon-format-jpeg
  • customer-service-fill
    #icon-customer-service-fill
  • format-png
    #icon-format-png
  • customer-service-24hour-fill
    #icon-customer-service-24hour-fill
  • logistics-airfreight
    #icon-logistics-airfreight
  • customer-service-24hour
    #icon-customer-service-24hour
  • goods
    #icon-goods
  • customer-service
    #icon-customer-service
  • goods-fill
    #icon-goods-fill
  • customization-fill
    #icon-customization-fill
  • goods-start-to-ship-fill
    #icon-goods-start-to-ship-fill
  • customization
    #icon-customization
  • logistics-data-fill
    #icon-logistics-data-fill
  • decorate-fill
    #icon-decorate-fill
  • logistics-picked-up
    #icon-logistics-picked-up
  • decorate
    #icon-decorate
  • logistics-airfreight-fill
    #icon-logistics-airfreight-fill
  • discount-fill
    #icon-discount-fill
  • logistics-land-transport-fill
    #icon-logistics-land-transport-fill
  • discount
    #icon-discount
  • logistics-ocean-shipping
    #icon-logistics-ocean-shipping
  • document-conversion
    #icon-document-conversion
  • logistics-data
    #icon-logistics-data
  • double-censorship
    #icon-double-censorship
  • format-zip
    #icon-format-zip
  • flag
    #icon-flag
  • logistics-warehouse-fill
    #icon-logistics-warehouse-fill
  • folder-fill
    #icon-folder-fill
  • message-comments-fill
    #icon-message-comments-fill
  • email-fill
    #icon-email-fill
  • logistics-warehouse
    #icon-logistics-warehouse
  • flag-fill
    #icon-flag-fill
  • logistics-storehouse
    #icon-logistics-storehouse
  • folder
    #icon-folder
  • message-language
    #icon-message-language
  • global-fill
    #icon-global-fill
  • message-reply-template
    #icon-message-reply-template
  • email
    #icon-email
  • logistics-ocean-shipping-fill
    #icon-logistics-ocean-shipping-fill
  • global-trade-fill
    #icon-global-trade-fill
  • message-multi-language-fill
    #icon-message-multi-language-fill
  • export-service
    #icon-export-service
  • logistics-tracking-fill
    #icon-logistics-tracking-fill
  • global-trade
    #icon-global-trade
  • message-comments
    #icon-message-comments
  • fair
    #icon-fair
  • message-multi-language
    #icon-message-multi-language
  • earth
    #icon-earth
  • logistics-tracking
    #icon-logistics-tracking
  • guide
    #icon-guide
  • message-reply-template-fill
    #icon-message-reply-template-fill
  • home-fill
    #icon-home-fill
  • logistics-land-transport
    #icon-logistics-land-transport
  • home
    #icon-home
  • message-send-inquiry
    #icon-message-send-inquiry
  • homepage-ads-fill
    #icon-homepage-ads-fill
  • money-credit-card-fill
    #icon-money-credit-card-fill
  • homepage-ads
    #icon-homepage-ads
  • money-credit-card
    #icon-money-credit-card
  • honor-fill
    #icon-honor-fill
  • money-bank-fill
    #icon-money-bank-fill
  • global
    #icon-global
  • message-send-inquiry-fill
    #icon-message-send-inquiry-fill
  • honor
    #icon-honor
  • money-dollar-symbol
    #icon-money-dollar-symbol
  • image-text-fill
    #icon-image-text-fill
  • money-asp
    #icon-money-asp
  • invoice
    #icon-invoice
  • money-dollar
    #icon-money-dollar
  • image-text
    #icon-image-text
  • money-bank
    #icon-money-bank
  • lable
    #icon-lable
  • money-exchange-data
    #icon-money-exchange-data
  • monitor
    #icon-monitor
  • money-currency-converter-fill
    #icon-money-currency-converter-fill
  • live-fill
    #icon-live-fill
  • money-finance-seller-fill
    #icon-money-finance-seller-fill
  • live
    #icon-live
  • money-fee
    #icon-money-fee
  • layers-fill
    #icon-layers-fill
  • money-currency-converter
    #icon-money-currency-converter
  • monitor-fill
    #icon-monitor-fill
  • money-exchange-settlement
    #icon-money-exchange-settlement
  • mobile-phone
    #icon-mobile-phone
  • money-quick-refund-plan
    #icon-money-quick-refund-plan
  • name-card
    #icon-name-card
  • money-finance-buyer-fill
    #icon-money-finance-buyer-fill
  • listening-fill
    #icon-listening-fill
  • money-rmb
    #icon-money-rmb
  • name-card-fill
    #icon-name-card-fill
  • money-tax-refund
    #icon-money-tax-refund
  • new
    #icon-new
  • money-rmb-symbol
    #icon-money-rmb-symbol
  • mobile-phone-btn
    #icon-mobile-phone-btn
  • money-red-packet-fill
    #icon-money-red-packet-fill
  • one-stop-service
    #icon-one-stop-service
  • money-rmb-fill
    #icon-money-rmb-fill
  • pad
    #icon-pad
  • money-wallet-fill
    #icon-money-wallet-fill
  • pcm
    #icon-pcm
  • money-exchange-rate
    #icon-money-exchange-rate
  • Panorama
    #icon-Panorama
  • money-funds
    #icon-money-funds
  • phone-fill
    #icon-phone-fill
  • money-inquiry-template
    #icon-money-inquiry-template
  • phone
    #icon-phone
  • money-red-packet
    #icon-money-red-packet
  • picture-search
    #icon-picture-search
  • money-finance-buyer
    #icon-money-finance-buyer
  • picture-fill
    #icon-picture-fill
  • money-inquiry-template-fill
    #icon-money-inquiry-template-fill
  • picture
    #icon-picture
  • money-finance-seller
    #icon-money-finance-seller
  • pictures-fill
    #icon-pictures-fill
  • money-quick-refund-plan 2
    #icon-a-money-quick-refund-plan2
  • listening
    #icon-listening
  • money-tax-rebate
    #icon-money-tax-rebate
  • print
    #icon-print
  • order-inspection-fill
    #icon-order-inspection-fill
  • pin-fill
    #icon-pin-fill
  • order-fill
    #icon-order-fill
  • protection-fill
    #icon-protection-fill
  • money-wallet
    #icon-money-wallet
  • professional
    #icon-professional
  • order-upload
    #icon-order-upload
  • qr-code
    #icon-qr-code
  • product-filter
    #icon-product-filter
  • print-fill
    #icon-print-fill
  • order-success
    #icon-order-success
  • protection
    #icon-protection
  • order
    #icon-order
  • pin
    #icon-pin
  • order-inspection
    #icon-order-inspection
  • pictures
    #icon-pictures
  • product-checked
    #icon-product-checked
  • post
    #icon-post
  • order-manage
    #icon-order-manage
  • quick-fill
    #icon-quick-fill
  • order-success-fill
    #icon-order-success-fill
  • quick
    #icon-quick
  • order-rejected-fill
    #icon-order-rejected-fill
  • ranking-list-fill
    #icon-ranking-list-fill
  • product-get-catalog-fill
    #icon-product-get-catalog-fill
  • reads
    #icon-reads
  • order-manage-fill
    #icon-order-manage-fill
  • response
    #icon-response
  • product-checked-fill
    #icon-product-checked-fill
  • save-fill
    #icon-save-fill
  • money-transfer
    #icon-money-transfer
  • response-fill
    #icon-response-fill
  • order-location
    #icon-order-location
  • save
    #icon-save
  • product-fill
    #icon-product-fill
  • scenes-fill
    #icon-scenes-fill
  • product-list-fill
    #icon-product-list-fill
  • ranking-list
    #icon-ranking-list
  • order-location-fill
    #icon-order-location-fill
  • scenes
    #icon-scenes
  • product-filter-fill
    #icon-product-filter-fill
  • point-right
    #icon-point-right
  • order-rejected
    #icon-order-rejected
  • security-fill
    #icon-security-fill
  • time-history
    #icon-time-history
  • shopping
    #icon-shopping
  • time-ontime
    #icon-time-ontime
  • shopping-fill
    #icon-shopping-fill
  • time
    #icon-time
  • security
    #icon-security
  • time-task-fill
    #icon-time-task-fill
  • self-operated-business
    #icon-self-operated-business
  • product-loaction-fill
    #icon-product-loaction-fill
  • shut-down
    #icon-shut-down
  • product-loaction
    #icon-product-loaction
  • square
    #icon-square

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>