• atm-away
    
  • reeor-fill
    
  • assessed-badge
    
  • pic-fill
    
  • auto
    
  • ranking list
    
  • bags
    
  • product
    
  • calendar
    
  • prompt-fill
    
  • cart- full
    
  • resonse rate-fill
    
  • calculator
    
  • remind-fill
    
  • camera switching
    
  • Right button-fill
    
  • cecurity-protection
    
  • RFQ-logo-fill
    
  • category
    
  • RFQ-word-fill
    
  • close
    
  • search cart-fill
    
  • certified-supplier
    
  • sales center-fill
    
  • cart-Empty
    
  • save-fill
    
  • code
    
  • security-fill
    
  • color
    
  • category products-fill
    
  • conditions
    
  • signboard-fill
    
  • confirm
    
  • service-fill
    
  • company
    
  • shuffling-banner-fill
    
  • ali-clould
    
  • supplier-features-fill
    
  • copy
    
  • store-fill
    
  • credit-level
    
  • smile-fill
    
  • coupons
    
  • success-fill
    
  • connections
    
  • sound-filling-fill
    
  • cry
    
  • sound-Mute
    
  • costoms-alearance
    
  • suspended-fill
    
  • clock
    
  • tool-fill
    
  • Currency Converter
    
  • task-management-fill
    
  • cut
    
  • unlock-fill
    
  • data
    
  • trust-fill
    
  • Customer management
    
  • vip-fill
    
  • descending
    
  • set
    
  • double-arro- right
    
  • top-fill
    
  • customization
    
  • view larger
    
  • double-arrow-left
    
  • voice-fill
    
  • discount
    
  • warning-fill
    
  • download
    
  • warehouse-fill
    
  • dollar
    
  • zip-fill
    
  • default-template
    
  • trade-assurance-fill
    
  • editor
    
  • vs-fill
    
  • eletrical
    
  • video
    
  • electronics
    
  • template-fill
    
  • etrical-equipm
    
  • wallet
    
  • ellipsis
    
  • training
    
  • email
    
  • packing-labeling-fill
    
  • falling
    
  • export services-fill
    
  • earth
    
  • brand-fill
    
  • filter
    
  • collection
    
  • furniture
    
  • consumption-fill
    
  • folder
    
  • collection-fill
    
  • feeds
    
  • brand
    
  • history
    
  • rejected-order-fill
    
  • hardware
    
  • homepage-ads-fill
    
  • help
    
  • homepage-ads
    
  • good
    
  • scenes-fill
    
  • Household appliances
    
  • scenes
    
  • gift
    
  • similar-product-fill
    
  • form
    
  • topraning-fill
    
  • image-text
    
  • consumption
    
  • hot
    
  • topraning
    
  • inspection
    
  • gold-supplier
    
  • left button
    
  • message center-fill
    
  • jewelry
    
  • quick
    
  • ipad
    
  • writing
    
  • left arrow
    
  • doc-fill
    
  • integral
    
  • jpge-fill
    
  • kitchen
    
  • gif-fill
    
  • inquiry-template
    
  • bmp-fill
    
  • link
    
  • tif-fill
    
  • libra
    
  • png-fill
    
  • loading
    
  • home
    
  • listing-content
    
  • home
    
  • lights
    
  • send inquiry-fill
    
  • logistics-icon
    
  • comments-fill
    
  • message center
    
  • account-fill
    
  • mobile-phone
    
  • feed-logo-fill
    
  • manage-order
    
  • feed-logo
    
  • move
    
  • home-fill
    
  • Money management
    
  • add-select
    
  • namecard
    
  • sami-select
    
  • map
    
  • camera
    
  • New user zone
    
  • arrow-down
    
  • multi-language
    
  • account
    
  • office
    
  • comments
    
  • notice
    
  • cart-Empty
    
  • on time shipment
    
  • favorites
    
  • office-supplies
    
  • order
    
  • password
    
  • search
    
  • Not visible
    
  • trade-assurance
    
  • operation
    
  • user center
    
  • packaging
    
  • trading data
    
  • online-tracking
    
  • microphone
    
  • packing-labeling
    
  • txt
    
  • phone
    
  • xlsx
    
  • pic
    
  • 办证服务
    
  • pin
    
  • 仓库
    
  • play
    
  • 代办财税
    
  • logistic-logo
    
  • 集装箱
    
  • print
    
  • 角标
    
  • product
    
  • 客户盘点
    
  • machinery
    
  • 动态
    
  • process
    
  • 贷款
    
  • prompt
    
  • 生意经
    
  • QRcode
    
  • 结汇
    
  • reeor
    
  • 分层配置
    
  • reduce
    
  • 申请记录
    
  • Non-staple food
    
  • 上传备案单证
    
  • rejected-order
    
  • 上传
    
  • resonse rate
    
  • 客户权益
    
  • remind
    
  • 缩小
    
  • response time
    
  • 权益配置
    
  • return
    
  • 双审
    
  • paylater
    
  • 通关
    
  • rising
    
  • 退税
    
  • Right arrow
    
  • 通关数据
    
  • rmb
    
  • 快递物流
    
  • RFQ-logo
    
  • 物流产品
    
  • save
    
  • 外汇数据
    
  • scanning
    
  • 信息bar_手机
    
  • security
    
  • 新外综业务
    
  • sales center
    
  • 物流订单
    
  • seleted
    
  • 中间人
    
  • search cart
    
  • 信息bar_账户
    
  • raw
    
  • 一达通
    
  • service
    
  • 专业权威
    
  • share
    
  • 账户操作
    
  • signboard
    
  • 旋转90度
    
  • shuffling-banner
    
  • 退税融资
    
  • Right button
    
  • Add Products
    
  • sorting
    
  • 自营业务
    
  • sound-Mute
    
  • addcell
    
  • category products
    
  • background-color
    
  • sound-filling
    
  • cascades
    
  • suggest
    
  • beijing
    
  • stop
    
  • bold
    
  • success
    
  • 资金
    
  • supplier-features
    
  • eraser
    
  • switch
    
  • centeralignment
    
  • survey
    
  • click
    
  • template
    
  • asp结算
    
  • text
    
  • flag
    
  • suspended
    
  • falg-fill
    
  • task-management
    
  • Fee
    
  • tool
    
  • filling
    
  • top
    
  • Foreign currency
    
  • smile
    
  • guanliyuan
    
  • textile-products
    
  • language
    
  • trade alert
    
  • leftalignment
    
  • top sales
    
  • extra-inquiries
    
  • trading volume
    
  • Italic
    
  • training
    
  • pcm
    
  • upload
    
  • reducecell
    
  • RFQ-word
    
  • rightalignment
    
  • view larger
    
  • pointerleft
    
  • viewgallery
    
  • subscript
    
  • vehivles
    
  • square
    
  • trust
    
  • superscript
    
  • warning
    
  • tag-subscript
    
  • warehouse
    
  • 单据转换
    
  • shoes
    
  • Transfer money
    
  • video
    
  • under-line
    
  • viewlist
    
  • xiakuangxian
    
  • set
    
  • 收起
    
  • store
    
  • 展开
    
  • tool-hardware
    
  • 通讯录
    
  • vs
    
  • 已关注供应商
    
  • toy
    
  • 购买偏好
    
  • sport
    
  • Subscribe
    
  • credit card
    
  • become a gold supplier
    
  • contacts
    
  • new
    
  • checkstand
    
  • free
    
  • aviation
    
  • cad-fill
    
  • Daytime mode
    
  • robot
    
  • infant & mom
    
  • inspection
    
  • discounts
    
  • invoice
    
  • insurance
    
  • night mode
    
  • user center
    
  • unlock
    
  • vip
    
  • wallet
    
  • land transportation
    
  • voice
    
  • exchange rate
    
  • contacts-fill
    
  • add-account
    
  • 2years-fill
    
  • add-cart-fill
    
  • add-fill
    
  • all-fill
    
  • ashbin-fill
    
  • calendar-fill
    
  • bad-fill
    
  • bussiness-man-fill
    
  • atm-fill
    
  • cart- full-fill
    
  • cart-Empty-fill
    
  • camera switching-fill
    
  • atm-away-fill
    
  • certified-supplier-fill
    
  • calculator-fill
    
  • clock-fill
    
  • ali-clould-fill
    
  • color-fill
    
  • coupons-fill
    
  • cecurity-protection-fill
    
  • credit-level-fill
    
  • default-template-fill
    
  • Currency Converter-fill
    
  • Customer management-fill
    
  • discounts-fill
    
  • Daytime mode-fill
    
  • exl-fill
    
  • cry-fill
    
  • email-fill
    
  • filter-fill
    
  • folder-fill
    
  • feeds-fill
    
  • gold-supplie-fill
    
  • form-fill
    
  • camera-fill
    
  • good-fill
    
  • image-text-fill
    
  • inspection-fill
    
  • hot-fill
    
  • company-fill
    
  • discount-fill
    
  • insurance-fill
    
  • inquiry-template-fill
    
  • left button-fill
    
  • integral-fill
    
  • help
    
  • listing-content-fill
    
  • logistic-logo-fill
    
  • play-fill
    
  • Money management-fill
    
  • prompt-fill
    
  • manage-order-fill
    
  • stop-fill
    
  • multi-language-fill
    
  • 3column
    
  • logistics-icon-fill
    
  • add-account
    
  • New user zone-fill
    
  • 4column
    
  • night mode-fill
    
  • add
    
  • office-supplies-fill
    
  • agriculture
    
  • notice-fill
    
  • 2years
    
  • mute
    
  • add-cart
    
  • order-fill
    
  • arrow-right
    
  • password
    
  • arrow-left
    
  • map
    
  • apparel
    
  • paylater-fill
    
  • all
    
  • phone-fill
    
  • arrow-up
    
  • online-tracking-fill
    
  • ascending
    
  • play-fill
    
  • ashbin
    
  • pdf-fill
    
  • atm
    
  • phone
    
  • bad
    
  • pin-fill
    
  • attachent
    
  • product-fill
    
  • browse
    
  • ranking list-fill
    
  • beauty
    
  • reduce-fill
    
  • auto
    
  • all
    
  • bussiness-man
    
  • component
    
  • code
    
  • copy
    
  • dollar
    
  • history
    
  • editor
    
  • data
    
  • gift
    
  • integral
    
  • nav-list
    
  • pic
    
  • Not visible
    
  • play
    
  • rising
    
  • QRcode
    
  • rmb
    
  • similar-product
    
  • export services
    
  • send inquiry
    
  • all-fill
    
  • favorites-fill
    
  • integral-fill
    
  • namecard-fill
    
  • pic-fill
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'nebulaapps';
  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#nebulaapps') format('svg');
}

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

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

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

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

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

  • atm-away
    .nebapp-icon-atm-away
  • reeor-fill
    .nebapp-icon-reeor-fill
  • assessed-badge
    .nebapp-icon-assessed-badge
  • pic-fill
    .nebapp-icon-pic-fill1
  • auto
    .nebapp-icon-auto1
  • ranking list
    .nebapp-icon-rankinglist
  • bags
    .nebapp-icon-bags
  • product
    .nebapp-icon-product1
  • calendar
    .nebapp-icon-calendar
  • prompt-fill
    .nebapp-icon-prompt-fill1
  • cart- full
    .nebapp-icon-cart-full
  • resonse rate-fill
    .nebapp-icon-resonserate-fill
  • calculator
    .nebapp-icon-calculator
  • remind-fill
    .nebapp-icon-remind-fill
  • camera switching
    .nebapp-icon-cameraswitching
  • Right button-fill
    .nebapp-icon-Rightbutton-fill
  • cecurity-protection
    .nebapp-icon-cecurity-protection
  • RFQ-logo-fill
    .nebapp-icon-RFQ-logo-fill
  • category
    .nebapp-icon-category
  • RFQ-word-fill
    .nebapp-icon-RFQ-word-fill
  • close
    .nebapp-icon-close
  • search cart-fill
    .nebapp-icon-searchcart-fill
  • certified-supplier
    .nebapp-icon-certified-supplier
  • sales center-fill
    .nebapp-icon-salescenter-fill
  • cart-Empty
    .nebapp-icon-cart-Empty
  • save-fill
    .nebapp-icon-save-fill
  • code
    .nebapp-icon-code1
  • security-fill
    .nebapp-icon-security-fill
  • color
    .nebapp-icon-color
  • category products-fill
    .nebapp-icon-Similarproducts-fill
  • conditions
    .nebapp-icon-conditions
  • signboard-fill
    .nebapp-icon-signboard-fill
  • confirm
    .nebapp-icon-confirm
  • service-fill
    .nebapp-icon-service-fill
  • company
    .nebapp-icon-company
  • shuffling-banner-fill
    .nebapp-icon-shuffling-banner-fill
  • ali-clould
    .nebapp-icon-ali-clould
  • supplier-features-fill
    .nebapp-icon-supplier-features-fill
  • copy
    .nebapp-icon-copy1
  • store-fill
    .nebapp-icon-store-fill
  • credit-level
    .nebapp-icon-credit-level
  • smile-fill
    .nebapp-icon-smile-fill
  • coupons
    .nebapp-icon-coupons
  • success-fill
    .nebapp-icon-success-fill
  • connections
    .nebapp-icon-connections
  • sound-filling-fill
    .nebapp-icon-sound-filling-fill
  • cry
    .nebapp-icon-cry
  • sound-Mute
    .nebapp-icon-sound-Mute1
  • costoms-alearance
    .nebapp-icon-costoms-alearance
  • suspended-fill
    .nebapp-icon-suspended-fill
  • clock
    .nebapp-icon-clock
  • tool-fill
    .nebapp-icon-tool-fill
  • Currency Converter
    .nebapp-icon-CurrencyConverter
  • task-management-fill
    .nebapp-icon-task-management-fill
  • cut
    .nebapp-icon-cut
  • unlock-fill
    .nebapp-icon-unlock-fill
  • data
    .nebapp-icon-data1
  • trust-fill
    .nebapp-icon-trust-fill
  • Customer management
    .nebapp-icon-Customermanagement
  • vip-fill
    .nebapp-icon-vip-fill
  • descending
    .nebapp-icon-descending
  • set
    .nebapp-icon-set1
  • double-arro- right
    .nebapp-icon-double-arro-right
  • top-fill
    .nebapp-icon-Top-fill
  • customization
    .nebapp-icon-customization
  • view larger
    .nebapp-icon-viewlarger1
  • double-arrow-left
    .nebapp-icon-double-arrow-left
  • voice-fill
    .nebapp-icon-voice-fill
  • discount
    .nebapp-icon-discount
  • warning-fill
    .nebapp-icon-warning-fill
  • download
    .nebapp-icon-download
  • warehouse-fill
    .nebapp-icon-warehouse-fill
  • dollar
    .nebapp-icon-dollar1
  • zip-fill
    .nebapp-icon-zip-fill
  • default-template
    .nebapp-icon-default-template
  • trade-assurance-fill
    .nebapp-icon-trade-assurance-fill
  • editor
    .nebapp-icon-editor1
  • vs-fill
    .nebapp-icon-vs-fill
  • eletrical
    .nebapp-icon-eletrical
  • video
    .nebapp-icon-video1
  • electronics
    .nebapp-icon-electronics
  • template-fill
    .nebapp-icon-template-fill
  • etrical-equipm
    .nebapp-icon-etrical-equipm
  • wallet
    .nebapp-icon-wallet1
  • ellipsis
    .nebapp-icon-ellipsis
  • training
    .nebapp-icon-training1
  • email
    .nebapp-icon-email
  • packing-labeling-fill
    .nebapp-icon-packing-labeling-fill
  • falling
    .nebapp-icon-falling
  • export services-fill
    .nebapp-icon-Exportservices-fill
  • earth
    .nebapp-icon-earth
  • brand-fill
    .nebapp-icon-brand-fill
  • filter
    .nebapp-icon-filter
  • collection
    .nebapp-icon-collection
  • furniture
    .nebapp-icon-furniture
  • consumption-fill
    .nebapp-icon-consumption-fill
  • folder
    .nebapp-icon-folder
  • collection-fill
    .nebapp-icon-collection-fill
  • feeds
    .nebapp-icon-feeds
  • brand
    .nebapp-icon-brand
  • history
    .nebapp-icon-history1
  • rejected-order-fill
    .nebapp-icon-rejected-order-fill
  • hardware
    .nebapp-icon-hardware
  • homepage-ads-fill
    .nebapp-icon-homepage-ads-fill
  • help
    .nebapp-icon-help
  • homepage-ads
    .nebapp-icon-homepage-ads
  • good
    .nebapp-icon-good
  • scenes-fill
    .nebapp-icon-scenes-fill
  • Household appliances
    .nebapp-icon-Householdappliances
  • scenes
    .nebapp-icon-scenes
  • gift
    .nebapp-icon-gift1
  • similar-product-fill
    .nebapp-icon-similar-product-fill
  • form
    .nebapp-icon-form
  • topraning-fill
    .nebapp-icon-topraning-fill
  • image-text
    .nebapp-icon-image-text
  • consumption
    .nebapp-icon-consumption
  • hot
    .nebapp-icon-hot
  • topraning
    .nebapp-icon-topraning
  • inspection
    .nebapp-icon-inspection
  • gold-supplier
    .nebapp-icon-gold-supplier
  • left button
    .nebapp-icon-leftbutton
  • message center-fill
    .nebapp-icon-messagecenter-fill
  • jewelry
    .nebapp-icon-jewelry
  • quick
    .nebapp-icon-quick
  • ipad
    .nebapp-icon-ipad
  • writing
    .nebapp-icon-writing
  • left arrow
    .nebapp-icon-leftarrow
  • doc-fill
    .nebapp-icon-docjpge-fill
  • integral
    .nebapp-icon-integral1
  • jpge-fill
    .nebapp-icon-jpge-fill
  • kitchen
    .nebapp-icon-kitchen
  • gif-fill
    .nebapp-icon-gifjpge-fill
  • inquiry-template
    .nebapp-icon-inquiry-template
  • bmp-fill
    .nebapp-icon-bmpjpge-fill
  • link
    .nebapp-icon-link
  • tif-fill
    .nebapp-icon-tifjpge-fill
  • libra
    .nebapp-icon-libra
  • png-fill
    .nebapp-icon-pngjpge-fill
  • loading
    .nebapp-icon-loading
  • home
    .nebapp-icon-Hometextile
  • listing-content
    .nebapp-icon-listing-content
  • home
    .nebapp-icon-home
  • lights
    .nebapp-icon-lights
  • send inquiry-fill
    .nebapp-icon-sendinquiry-fill
  • logistics-icon
    .nebapp-icon-logistics-icon
  • comments-fill
    .nebapp-icon-comments-fill
  • message center
    .nebapp-icon-messagecenter
  • account-fill
    .nebapp-icon-account-fill
  • mobile-phone
    .nebapp-icon-mobile-phone
  • feed-logo-fill
    .nebapp-icon-feed-logo-fill
  • manage-order
    .nebapp-icon-manage-order
  • feed-logo
    .nebapp-icon-feed-logo
  • move
    .nebapp-icon-move
  • home-fill
    .nebapp-icon-home-fill
  • Money management
    .nebapp-icon-Moneymanagement
  • add-select
    .nebapp-icon-add-select
  • namecard
    .nebapp-icon-namecard
  • sami-select
    .nebapp-icon-sami-select
  • map
    .nebapp-icon-map
  • camera
    .nebapp-icon-camera
  • New user zone
    .nebapp-icon-Newuserzone
  • arrow-down
    .nebapp-icon-arrow-down
  • multi-language
    .nebapp-icon-multi-language
  • account
    .nebapp-icon-account
  • office
    .nebapp-icon-office
  • comments
    .nebapp-icon-comments
  • notice
    .nebapp-icon-notice
  • cart-Empty
    .nebapp-icon-cart-Empty1
  • on time shipment
    .nebapp-icon-ontimeshipment
  • favorites
    .nebapp-icon-favorites
  • office-supplies
    .nebapp-icon-office-supplies
  • order
    .nebapp-icon-order
  • password
    .nebapp-icon-password
  • search
    .nebapp-icon-search
  • Not visible
    .nebapp-icon-Notvisible1
  • trade-assurance
    .nebapp-icon-trade-assurance
  • operation
    .nebapp-icon-operation
  • user center
    .nebapp-icon-usercenter1
  • packaging
    .nebapp-icon-packaging
  • trading data
    .nebapp-icon-tradingdata
  • online-tracking
    .nebapp-icon-online-tracking
  • microphone
    .nebapp-icon-microphone
  • packing-labeling
    .nebapp-icon-packing-labeling
  • txt
    .nebapp-icon-txt
  • phone
    .nebapp-icon-phone
  • xlsx
    .nebapp-icon-xlsx
  • pic
    .nebapp-icon-pic1
  • 办证服务
    .nebapp-icon-banzhengfuwu
  • pin
    .nebapp-icon-pin
  • 仓库
    .nebapp-icon-cangku
  • play
    .nebapp-icon-play1
  • 代办财税
    .nebapp-icon-daibancaishui
  • logistic-logo
    .nebapp-icon-logistic-logo
  • 集装箱
    .nebapp-icon-jizhuangxiang
  • print
    .nebapp-icon-print
  • 角标
    .nebapp-icon-jiaobiao
  • product
    .nebapp-icon-product
  • 客户盘点
    .nebapp-icon-kehupandian
  • machinery
    .nebapp-icon-machinery
  • 动态
    .nebapp-icon-dongtai
  • process
    .nebapp-icon-process
  • 贷款
    .nebapp-icon-daikuan
  • prompt
    .nebapp-icon-prompt
  • 生意经
    .nebapp-icon-shengyijing
  • QRcode
    .nebapp-icon-QRcode1
  • 结汇
    .nebapp-icon-jiehui
  • reeor
    .nebapp-icon-reeor
  • 分层配置
    .nebapp-icon-fencengpeizhi
  • reduce
    .nebapp-icon-reduce
  • 申请记录
    .nebapp-icon-shenqingjilu
  • Non-staple food
    .nebapp-icon-Non-staplefood
  • 上传备案单证
    .nebapp-icon-shangchuanbeiandanzheng
  • rejected-order
    .nebapp-icon-rejected-order
  • 上传
    .nebapp-icon-shangchuan
  • resonse rate
    .nebapp-icon-resonserate
  • 客户权益
    .nebapp-icon-kehuquanyi
  • remind
    .nebapp-icon-remind
  • 缩小
    .nebapp-icon-suoxiao
  • response time
    .nebapp-icon-responsetime
  • 权益配置
    .nebapp-icon-quanyipeizhi
  • return
    .nebapp-icon-return
  • 双审
    .nebapp-icon-shuangshen
  • paylater
    .nebapp-icon-paylater
  • 通关
    .nebapp-icon-tongguan
  • rising
    .nebapp-icon-rising1
  • 退税
    .nebapp-icon-tuishui
  • Right arrow
    .nebapp-icon-Rightarrow
  • 通关数据
    .nebapp-icon-tongguanshuju
  • rmb
    .nebapp-icon-rmb1
  • 快递物流
    .nebapp-icon-kuaidiwuliu
  • RFQ-logo
    .nebapp-icon-RFQ-logo
  • 物流产品
    .nebapp-icon-wuliuchanpin
  • save
    .nebapp-icon-save
  • 外汇数据
    .nebapp-icon-waihuishuju
  • scanning
    .nebapp-icon-scanning
  • 信息bar_手机
    .nebapp-icon-xinxibar_shouji
  • security
    .nebapp-icon-security
  • 新外综业务
    .nebapp-icon-xinwaizongyewu
  • sales center
    .nebapp-icon-salescenter
  • 物流订单
    .nebapp-icon-wuliudingdan
  • seleted
    .nebapp-icon-seleted
  • 中间人
    .nebapp-icon-zhongjianren
  • search cart
    .nebapp-icon-searchcart
  • 信息bar_账户
    .nebapp-icon-xinxibar_zhanghu
  • raw
    .nebapp-icon-raw
  • 一达通
    .nebapp-icon-yidatong
  • service
    .nebapp-icon-service
  • 专业权威
    .nebapp-icon-zhuanyequanwei
  • share
    .nebapp-icon-share
  • 账户操作
    .nebapp-icon-zhanghucaozuo
  • signboard
    .nebapp-icon-signboard
  • 旋转90度
    .nebapp-icon-xuanzhuandu
  • shuffling-banner
    .nebapp-icon-shuffling-banner
  • 退税融资
    .nebapp-icon-tuishuirongzi
  • Right button
    .nebapp-icon-Rightbutton
  • Add Products
    .nebapp-icon-AddProducts
  • sorting
    .nebapp-icon-sorting
  • 自营业务
    .nebapp-icon-ziyingyewu
  • sound-Mute
    .nebapp-icon-sound-Mute
  • addcell
    .nebapp-icon-addcell
  • category products
    .nebapp-icon-Similarproducts
  • background-color
    .nebapp-icon-background-color
  • sound-filling
    .nebapp-icon-sound-filling
  • cascades
    .nebapp-icon-cascades
  • suggest
    .nebapp-icon-suggest
  • beijing
    .nebapp-icon-beijing
  • stop
    .nebapp-icon-stop
  • bold
    .nebapp-icon-bold
  • success
    .nebapp-icon-success
  • 资金
    .nebapp-icon-zijin
  • supplier-features
    .nebapp-icon-supplier-features
  • eraser
    .nebapp-icon-eraser
  • switch
    .nebapp-icon-switch
  • centeralignment
    .nebapp-icon-centeralignment
  • survey
    .nebapp-icon-survey
  • click
    .nebapp-icon-click
  • template
    .nebapp-icon-template
  • asp结算
    .nebapp-icon-aspjiesuan
  • text
    .nebapp-icon-text
  • flag
    .nebapp-icon-flag
  • suspended
    .nebapp-icon-suspended
  • falg-fill
    .nebapp-icon-falg-fill
  • task-management
    .nebapp-icon-task-management
  • Fee
    .nebapp-icon-Fee
  • tool
    .nebapp-icon-tool
  • filling
    .nebapp-icon-filling
  • top
    .nebapp-icon-Top
  • Foreign currency
    .nebapp-icon-Foreigncurrency
  • smile
    .nebapp-icon-smile
  • guanliyuan
    .nebapp-icon-guanliyuan
  • textile-products
    .nebapp-icon-textile-products
  • language
    .nebapp-icon-language
  • trade alert
    .nebapp-icon-tradealert
  • leftalignment
    .nebapp-icon-leftalignment
  • top sales
    .nebapp-icon-topsales
  • extra-inquiries
    .nebapp-icon-extra-inquiries
  • trading volume
    .nebapp-icon-tradingvolume
  • Italic
    .nebapp-icon-Italic
  • training
    .nebapp-icon-training
  • pcm
    .nebapp-icon-pcm
  • upload
    .nebapp-icon-upload
  • reducecell
    .nebapp-icon-reducecell
  • RFQ-word
    .nebapp-icon-RFQ-word
  • rightalignment
    .nebapp-icon-rightalignment
  • view larger
    .nebapp-icon-viewlarger
  • pointerleft
    .nebapp-icon-pointerleft
  • viewgallery
    .nebapp-icon-viewgallery
  • subscript
    .nebapp-icon-subscript
  • vehivles
    .nebapp-icon-vehivles
  • square
    .nebapp-icon-square
  • trust
    .nebapp-icon-trust
  • superscript
    .nebapp-icon-superscript
  • warning
    .nebapp-icon-warning
  • tag-subscript
    .nebapp-icon-tag-subscript
  • warehouse
    .nebapp-icon-warehouse
  • 单据转换
    .nebapp-icon-danjuzhuanhuan
  • shoes
    .nebapp-icon-shoes
  • Transfer money
    .nebapp-icon-Transfermoney
  • video
    .nebapp-icon-video
  • under-line
    .nebapp-icon-under-line
  • viewlist
    .nebapp-icon-viewlist
  • xiakuangxian
    .nebapp-icon-xiakuangxian
  • set
    .nebapp-icon-set
  • 收起
    .nebapp-icon-shouqi
  • store
    .nebapp-icon-store
  • 展开
    .nebapp-icon-zhankai
  • tool-hardware
    .nebapp-icon-tool-hardware
  • 通讯录
    .nebapp-icon-tongxunlu
  • vs
    .nebapp-icon-vs
  • 已关注供应商
    .nebapp-icon-yiguanzhugongyingshang
  • toy
    .nebapp-icon-toy
  • 购买偏好
    .nebapp-icon-goumaipianhao
  • sport
    .nebapp-icon-sport
  • Subscribe
    .nebapp-icon-Subscribe
  • credit card
    .nebapp-icon-creditcard
  • become a gold supplier
    .nebapp-icon-becomeagoldsupplier
  • contacts
    .nebapp-icon-contacts
  • new
    .nebapp-icon-new
  • checkstand
    .nebapp-icon-checkstand
  • free
    .nebapp-icon-free
  • aviation
    .nebapp-icon-aviation
  • cad-fill
    .nebapp-icon-cad-fill
  • Daytime mode
    .nebapp-icon-Daytimemode
  • robot
    .nebapp-icon-robot
  • infant & mom
    .nebapp-icon-infantmom
  • inspection
    .nebapp-icon-inspection1
  • discounts
    .nebapp-icon-discounts
  • invoice
    .nebapp-icon-invoice
  • insurance
    .nebapp-icon-insurance
  • night mode
    .nebapp-icon-nightmode
  • user center
    .nebapp-icon-usercenter
  • unlock
    .nebapp-icon-unlock
  • vip
    .nebapp-icon-vip
  • wallet
    .nebapp-icon-wallet
  • land transportation
    .nebapp-icon-landtransportation
  • voice
    .nebapp-icon-voice
  • exchange rate
    .nebapp-icon-exchangerate
  • contacts-fill
    .nebapp-icon-contacts-fill
  • add-account
    .nebapp-icon-add-account1
  • 2years-fill
    .nebapp-icon-years-fill
  • add-cart-fill
    .nebapp-icon-add-cart-fill
  • add-fill
    .nebapp-icon-add-fill
  • all-fill
    .nebapp-icon-all-fill1
  • ashbin-fill
    .nebapp-icon-ashbin-fill
  • calendar-fill
    .nebapp-icon-calendar-fill
  • bad-fill
    .nebapp-icon-bad-fill
  • bussiness-man-fill
    .nebapp-icon-bussiness-man-fill
  • atm-fill
    .nebapp-icon-atm-fill
  • cart- full-fill
    .nebapp-icon-cart-full-fill
  • cart-Empty-fill
    .nebapp-icon-cart-Empty-fill
  • camera switching-fill
    .nebapp-icon-cameraswitching-fill
  • atm-away-fill
    .nebapp-icon-atm-away-fill
  • certified-supplier-fill
    .nebapp-icon-certified-supplier-fill
  • calculator-fill
    .nebapp-icon-calculator-fill
  • clock-fill
    .nebapp-icon-clock-fill
  • ali-clould-fill
    .nebapp-icon-ali-clould-fill
  • color-fill
    .nebapp-icon-color-fill
  • coupons-fill
    .nebapp-icon-coupons-fill
  • cecurity-protection-fill
    .nebapp-icon-cecurity-protection-fill
  • credit-level-fill
    .nebapp-icon-credit-level-fill
  • default-template-fill
    .nebapp-icon-default-template-fill
  • Currency Converter-fill
    .nebapp-icon-CurrencyConverter-fill
  • Customer management-fill
    .nebapp-icon-Customermanagement-fill
  • discounts-fill
    .nebapp-icon-discounts-fill
  • Daytime mode-fill
    .nebapp-icon-Daytimemode-fill
  • exl-fill
    .nebapp-icon-exl-fill
  • cry-fill
    .nebapp-icon-cry-fill
  • email-fill
    .nebapp-icon-email-fill
  • filter-fill
    .nebapp-icon-filter-fill
  • folder-fill
    .nebapp-icon-folder-fill
  • feeds-fill
    .nebapp-icon-feeds-fill
  • gold-supplie-fill
    .nebapp-icon-gold-supplie-fill
  • form-fill
    .nebapp-icon-form-fill
  • camera-fill
    .nebapp-icon-camera-fill
  • good-fill
    .nebapp-icon-good-fill
  • image-text-fill
    .nebapp-icon-image-text-fill
  • inspection-fill
    .nebapp-icon-inspection-fill
  • hot-fill
    .nebapp-icon-hot-fill
  • company-fill
    .nebapp-icon-company-fill
  • discount-fill
    .nebapp-icon-discount-fill
  • insurance-fill
    .nebapp-icon-insurance-fill
  • inquiry-template-fill
    .nebapp-icon-inquiry-template-fill
  • left button-fill
    .nebapp-icon-leftbutton-fill
  • integral-fill
    .nebapp-icon-integral-fill1
  • help
    .nebapp-icon-help1
  • listing-content-fill
    .nebapp-icon-listing-content-fill
  • logistic-logo-fill
    .nebapp-icon-logistic-logo-fill
  • play-fill
    .nebapp-icon-play-fill
  • Money management-fill
    .nebapp-icon-Moneymanagement-fill
  • prompt-fill
    .nebapp-icon-prompt-fill
  • manage-order-fill
    .nebapp-icon-manage-order-fill
  • stop-fill
    .nebapp-icon-stop-fill
  • multi-language-fill
    .nebapp-icon-multi-language-fill
  • 3column
    .nebapp-icon-column
  • logistics-icon-fill
    .nebapp-icon-logistics-icon-fill
  • add-account
    .nebapp-icon-add-account
  • New user zone-fill
    .nebapp-icon-Newuserzone-fill
  • 4column
    .nebapp-icon-column1
  • night mode-fill
    .nebapp-icon-nightmode-fill
  • add
    .nebapp-icon-add
  • office-supplies-fill
    .nebapp-icon-office-supplies-fill
  • agriculture
    .nebapp-icon-agriculture
  • notice-fill
    .nebapp-icon-notice-fill
  • 2years
    .nebapp-icon-years
  • mute
    .nebapp-icon-mute
  • add-cart
    .nebapp-icon-add-cart
  • order-fill
    .nebapp-icon-order-fill
  • arrow-right
    .nebapp-icon-arrow-right
  • password
    .nebapp-icon-password1
  • arrow-left
    .nebapp-icon-arrow-left
  • map
    .nebapp-icon-map1
  • apparel
    .nebapp-icon-apparel
  • paylater-fill
    .nebapp-icon-paylater-fill
  • all
    .nebapp-icon-all1
  • phone-fill
    .nebapp-icon-phone-fill
  • arrow-up
    .nebapp-icon-arrow-up
  • online-tracking-fill
    .nebapp-icon-online-tracking-fill
  • ascending
    .nebapp-icon-ascending
  • play-fill
    .nebapp-icon-play-fill1
  • ashbin
    .nebapp-icon-ashbin
  • pdf-fill
    .nebapp-icon-pdf-fill
  • atm
    .nebapp-icon-atm
  • phone
    .nebapp-icon-phone1
  • bad
    .nebapp-icon-bad
  • pin-fill
    .nebapp-icon-pin-fill
  • attachent
    .nebapp-icon-attachent
  • product-fill
    .nebapp-icon-product-fill
  • browse
    .nebapp-icon-browse
  • ranking list-fill
    .nebapp-icon-rankinglist-fill
  • beauty
    .nebapp-icon-beauty
  • reduce-fill
    .nebapp-icon-reduce-fill
  • auto
    .nebapp-icon-auto
  • all
    .nebapp-icon-all
  • bussiness-man
    .nebapp-icon-bussiness-man
  • component
    .nebapp-icon-component
  • code
    .nebapp-icon-code
  • copy
    .nebapp-icon-copy
  • dollar
    .nebapp-icon-dollar
  • history
    .nebapp-icon-history
  • editor
    .nebapp-icon-editor
  • data
    .nebapp-icon-data
  • gift
    .nebapp-icon-gift
  • integral
    .nebapp-icon-integral
  • nav-list
    .nebapp-icon-nav-list
  • pic
    .nebapp-icon-pic
  • Not visible
    .nebapp-icon-Notvisible
  • play
    .nebapp-icon-play
  • rising
    .nebapp-icon-rising
  • QRcode
    .nebapp-icon-QRcode
  • rmb
    .nebapp-icon-rmb
  • similar-product
    .nebapp-icon-similar-product
  • export services
    .nebapp-icon-Exportservices
  • send inquiry
    .nebapp-icon-sendinquiry
  • all-fill
    .nebapp-icon-all-fill
  • favorites-fill
    .nebapp-icon-favorites-fill
  • integral-fill
    .nebapp-icon-integral-fill
  • namecard-fill
    .nebapp-icon-namecard-fill
  • pic-fill
    .nebapp-icon-pic-fill

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="nebulaapps nebapp-icon-xxx"></span>

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

  • atm-away
    #nebapp-icon-atm-away
  • reeor-fill
    #nebapp-icon-reeor-fill
  • assessed-badge
    #nebapp-icon-assessed-badge
  • pic-fill
    #nebapp-icon-pic-fill1
  • auto
    #nebapp-icon-auto1
  • ranking list
    #nebapp-icon-rankinglist
  • bags
    #nebapp-icon-bags
  • product
    #nebapp-icon-product1
  • calendar
    #nebapp-icon-calendar
  • prompt-fill
    #nebapp-icon-prompt-fill1
  • cart- full
    #nebapp-icon-cart-full
  • resonse rate-fill
    #nebapp-icon-resonserate-fill
  • calculator
    #nebapp-icon-calculator
  • remind-fill
    #nebapp-icon-remind-fill
  • camera switching
    #nebapp-icon-cameraswitching
  • Right button-fill
    #nebapp-icon-Rightbutton-fill
  • cecurity-protection
    #nebapp-icon-cecurity-protection
  • RFQ-logo-fill
    #nebapp-icon-RFQ-logo-fill
  • category
    #nebapp-icon-category
  • RFQ-word-fill
    #nebapp-icon-RFQ-word-fill
  • close
    #nebapp-icon-close
  • search cart-fill
    #nebapp-icon-searchcart-fill
  • certified-supplier
    #nebapp-icon-certified-supplier
  • sales center-fill
    #nebapp-icon-salescenter-fill
  • cart-Empty
    #nebapp-icon-cart-Empty
  • save-fill
    #nebapp-icon-save-fill
  • code
    #nebapp-icon-code1
  • security-fill
    #nebapp-icon-security-fill
  • color
    #nebapp-icon-color
  • category products-fill
    #nebapp-icon-Similarproducts-fill
  • conditions
    #nebapp-icon-conditions
  • signboard-fill
    #nebapp-icon-signboard-fill
  • confirm
    #nebapp-icon-confirm
  • service-fill
    #nebapp-icon-service-fill
  • company
    #nebapp-icon-company
  • shuffling-banner-fill
    #nebapp-icon-shuffling-banner-fill
  • ali-clould
    #nebapp-icon-ali-clould
  • supplier-features-fill
    #nebapp-icon-supplier-features-fill
  • copy
    #nebapp-icon-copy1
  • store-fill
    #nebapp-icon-store-fill
  • credit-level
    #nebapp-icon-credit-level
  • smile-fill
    #nebapp-icon-smile-fill
  • coupons
    #nebapp-icon-coupons
  • success-fill
    #nebapp-icon-success-fill
  • connections
    #nebapp-icon-connections
  • sound-filling-fill
    #nebapp-icon-sound-filling-fill
  • cry
    #nebapp-icon-cry
  • sound-Mute
    #nebapp-icon-sound-Mute1
  • costoms-alearance
    #nebapp-icon-costoms-alearance
  • suspended-fill
    #nebapp-icon-suspended-fill
  • clock
    #nebapp-icon-clock
  • tool-fill
    #nebapp-icon-tool-fill
  • Currency Converter
    #nebapp-icon-CurrencyConverter
  • task-management-fill
    #nebapp-icon-task-management-fill
  • cut
    #nebapp-icon-cut
  • unlock-fill
    #nebapp-icon-unlock-fill
  • data
    #nebapp-icon-data1
  • trust-fill
    #nebapp-icon-trust-fill
  • Customer management
    #nebapp-icon-Customermanagement
  • vip-fill
    #nebapp-icon-vip-fill
  • descending
    #nebapp-icon-descending
  • set
    #nebapp-icon-set1
  • double-arro- right
    #nebapp-icon-double-arro-right
  • top-fill
    #nebapp-icon-Top-fill
  • customization
    #nebapp-icon-customization
  • view larger
    #nebapp-icon-viewlarger1
  • double-arrow-left
    #nebapp-icon-double-arrow-left
  • voice-fill
    #nebapp-icon-voice-fill
  • discount
    #nebapp-icon-discount
  • warning-fill
    #nebapp-icon-warning-fill
  • download
    #nebapp-icon-download
  • warehouse-fill
    #nebapp-icon-warehouse-fill
  • dollar
    #nebapp-icon-dollar1
  • zip-fill
    #nebapp-icon-zip-fill
  • default-template
    #nebapp-icon-default-template
  • trade-assurance-fill
    #nebapp-icon-trade-assurance-fill
  • editor
    #nebapp-icon-editor1
  • vs-fill
    #nebapp-icon-vs-fill
  • eletrical
    #nebapp-icon-eletrical
  • video
    #nebapp-icon-video1
  • electronics
    #nebapp-icon-electronics
  • template-fill
    #nebapp-icon-template-fill
  • etrical-equipm
    #nebapp-icon-etrical-equipm
  • wallet
    #nebapp-icon-wallet1
  • ellipsis
    #nebapp-icon-ellipsis
  • training
    #nebapp-icon-training1
  • email
    #nebapp-icon-email
  • packing-labeling-fill
    #nebapp-icon-packing-labeling-fill
  • falling
    #nebapp-icon-falling
  • export services-fill
    #nebapp-icon-Exportservices-fill
  • earth
    #nebapp-icon-earth
  • brand-fill
    #nebapp-icon-brand-fill
  • filter
    #nebapp-icon-filter
  • collection
    #nebapp-icon-collection
  • furniture
    #nebapp-icon-furniture
  • consumption-fill
    #nebapp-icon-consumption-fill
  • folder
    #nebapp-icon-folder
  • collection-fill
    #nebapp-icon-collection-fill
  • feeds
    #nebapp-icon-feeds
  • brand
    #nebapp-icon-brand
  • history
    #nebapp-icon-history1
  • rejected-order-fill
    #nebapp-icon-rejected-order-fill
  • hardware
    #nebapp-icon-hardware
  • homepage-ads-fill
    #nebapp-icon-homepage-ads-fill
  • help
    #nebapp-icon-help
  • homepage-ads
    #nebapp-icon-homepage-ads
  • good
    #nebapp-icon-good
  • scenes-fill
    #nebapp-icon-scenes-fill
  • Household appliances
    #nebapp-icon-Householdappliances
  • scenes
    #nebapp-icon-scenes
  • gift
    #nebapp-icon-gift1
  • similar-product-fill
    #nebapp-icon-similar-product-fill
  • form
    #nebapp-icon-form
  • topraning-fill
    #nebapp-icon-topraning-fill
  • image-text
    #nebapp-icon-image-text
  • consumption
    #nebapp-icon-consumption
  • hot
    #nebapp-icon-hot
  • topraning
    #nebapp-icon-topraning
  • inspection
    #nebapp-icon-inspection
  • gold-supplier
    #nebapp-icon-gold-supplier
  • left button
    #nebapp-icon-leftbutton
  • message center-fill
    #nebapp-icon-messagecenter-fill
  • jewelry
    #nebapp-icon-jewelry
  • quick
    #nebapp-icon-quick
  • ipad
    #nebapp-icon-ipad
  • writing
    #nebapp-icon-writing
  • left arrow
    #nebapp-icon-leftarrow
  • doc-fill
    #nebapp-icon-docjpge-fill
  • integral
    #nebapp-icon-integral1
  • jpge-fill
    #nebapp-icon-jpge-fill
  • kitchen
    #nebapp-icon-kitchen
  • gif-fill
    #nebapp-icon-gifjpge-fill
  • inquiry-template
    #nebapp-icon-inquiry-template
  • bmp-fill
    #nebapp-icon-bmpjpge-fill
  • link
    #nebapp-icon-link
  • tif-fill
    #nebapp-icon-tifjpge-fill
  • libra
    #nebapp-icon-libra
  • png-fill
    #nebapp-icon-pngjpge-fill
  • loading
    #nebapp-icon-loading
  • home
    #nebapp-icon-Hometextile
  • listing-content
    #nebapp-icon-listing-content
  • home
    #nebapp-icon-home
  • lights
    #nebapp-icon-lights
  • send inquiry-fill
    #nebapp-icon-sendinquiry-fill
  • logistics-icon
    #nebapp-icon-logistics-icon
  • comments-fill
    #nebapp-icon-comments-fill
  • message center
    #nebapp-icon-messagecenter
  • account-fill
    #nebapp-icon-account-fill
  • mobile-phone
    #nebapp-icon-mobile-phone
  • feed-logo-fill
    #nebapp-icon-feed-logo-fill
  • manage-order
    #nebapp-icon-manage-order
  • feed-logo
    #nebapp-icon-feed-logo
  • move
    #nebapp-icon-move
  • home-fill
    #nebapp-icon-home-fill
  • Money management
    #nebapp-icon-Moneymanagement
  • add-select
    #nebapp-icon-add-select
  • namecard
    #nebapp-icon-namecard
  • sami-select
    #nebapp-icon-sami-select
  • map
    #nebapp-icon-map
  • camera
    #nebapp-icon-camera
  • New user zone
    #nebapp-icon-Newuserzone
  • arrow-down
    #nebapp-icon-arrow-down
  • multi-language
    #nebapp-icon-multi-language
  • account
    #nebapp-icon-account
  • office
    #nebapp-icon-office
  • comments
    #nebapp-icon-comments
  • notice
    #nebapp-icon-notice
  • cart-Empty
    #nebapp-icon-cart-Empty1
  • on time shipment
    #nebapp-icon-ontimeshipment
  • favorites
    #nebapp-icon-favorites
  • office-supplies
    #nebapp-icon-office-supplies
  • order
    #nebapp-icon-order
  • password
    #nebapp-icon-password
  • search
    #nebapp-icon-search
  • Not visible
    #nebapp-icon-Notvisible1
  • trade-assurance
    #nebapp-icon-trade-assurance
  • operation
    #nebapp-icon-operation
  • user center
    #nebapp-icon-usercenter1
  • packaging
    #nebapp-icon-packaging
  • trading data
    #nebapp-icon-tradingdata
  • online-tracking
    #nebapp-icon-online-tracking
  • microphone
    #nebapp-icon-microphone
  • packing-labeling
    #nebapp-icon-packing-labeling
  • txt
    #nebapp-icon-txt
  • phone
    #nebapp-icon-phone
  • xlsx
    #nebapp-icon-xlsx
  • pic
    #nebapp-icon-pic1
  • 办证服务
    #nebapp-icon-banzhengfuwu
  • pin
    #nebapp-icon-pin
  • 仓库
    #nebapp-icon-cangku
  • play
    #nebapp-icon-play1
  • 代办财税
    #nebapp-icon-daibancaishui
  • logistic-logo
    #nebapp-icon-logistic-logo
  • 集装箱
    #nebapp-icon-jizhuangxiang
  • print
    #nebapp-icon-print
  • 角标
    #nebapp-icon-jiaobiao
  • product
    #nebapp-icon-product
  • 客户盘点
    #nebapp-icon-kehupandian
  • machinery
    #nebapp-icon-machinery
  • 动态
    #nebapp-icon-dongtai
  • process
    #nebapp-icon-process
  • 贷款
    #nebapp-icon-daikuan
  • prompt
    #nebapp-icon-prompt
  • 生意经
    #nebapp-icon-shengyijing
  • QRcode
    #nebapp-icon-QRcode1
  • 结汇
    #nebapp-icon-jiehui
  • reeor
    #nebapp-icon-reeor
  • 分层配置
    #nebapp-icon-fencengpeizhi
  • reduce
    #nebapp-icon-reduce
  • 申请记录
    #nebapp-icon-shenqingjilu
  • Non-staple food
    #nebapp-icon-Non-staplefood
  • 上传备案单证
    #nebapp-icon-shangchuanbeiandanzheng
  • rejected-order
    #nebapp-icon-rejected-order
  • 上传
    #nebapp-icon-shangchuan
  • resonse rate
    #nebapp-icon-resonserate
  • 客户权益
    #nebapp-icon-kehuquanyi
  • remind
    #nebapp-icon-remind
  • 缩小
    #nebapp-icon-suoxiao
  • response time
    #nebapp-icon-responsetime
  • 权益配置
    #nebapp-icon-quanyipeizhi
  • return
    #nebapp-icon-return
  • 双审
    #nebapp-icon-shuangshen
  • paylater
    #nebapp-icon-paylater
  • 通关
    #nebapp-icon-tongguan
  • rising
    #nebapp-icon-rising1
  • 退税
    #nebapp-icon-tuishui
  • Right arrow
    #nebapp-icon-Rightarrow
  • 通关数据
    #nebapp-icon-tongguanshuju
  • rmb
    #nebapp-icon-rmb1
  • 快递物流
    #nebapp-icon-kuaidiwuliu
  • RFQ-logo
    #nebapp-icon-RFQ-logo
  • 物流产品
    #nebapp-icon-wuliuchanpin
  • save
    #nebapp-icon-save
  • 外汇数据
    #nebapp-icon-waihuishuju
  • scanning
    #nebapp-icon-scanning
  • 信息bar_手机
    #nebapp-icon-xinxibar_shouji
  • security
    #nebapp-icon-security
  • 新外综业务
    #nebapp-icon-xinwaizongyewu
  • sales center
    #nebapp-icon-salescenter
  • 物流订单
    #nebapp-icon-wuliudingdan
  • seleted
    #nebapp-icon-seleted
  • 中间人
    #nebapp-icon-zhongjianren
  • search cart
    #nebapp-icon-searchcart
  • 信息bar_账户
    #nebapp-icon-xinxibar_zhanghu
  • raw
    #nebapp-icon-raw
  • 一达通
    #nebapp-icon-yidatong
  • service
    #nebapp-icon-service
  • 专业权威
    #nebapp-icon-zhuanyequanwei
  • share
    #nebapp-icon-share
  • 账户操作
    #nebapp-icon-zhanghucaozuo
  • signboard
    #nebapp-icon-signboard
  • 旋转90度
    #nebapp-icon-xuanzhuandu
  • shuffling-banner
    #nebapp-icon-shuffling-banner
  • 退税融资
    #nebapp-icon-tuishuirongzi
  • Right button
    #nebapp-icon-Rightbutton
  • Add Products
    #nebapp-icon-AddProducts
  • sorting
    #nebapp-icon-sorting
  • 自营业务
    #nebapp-icon-ziyingyewu
  • sound-Mute
    #nebapp-icon-sound-Mute
  • addcell
    #nebapp-icon-addcell
  • category products
    #nebapp-icon-Similarproducts
  • background-color
    #nebapp-icon-background-color
  • sound-filling
    #nebapp-icon-sound-filling
  • cascades
    #nebapp-icon-cascades
  • suggest
    #nebapp-icon-suggest
  • beijing
    #nebapp-icon-beijing
  • stop
    #nebapp-icon-stop
  • bold
    #nebapp-icon-bold
  • success
    #nebapp-icon-success
  • 资金
    #nebapp-icon-zijin
  • supplier-features
    #nebapp-icon-supplier-features
  • eraser
    #nebapp-icon-eraser
  • switch
    #nebapp-icon-switch
  • centeralignment
    #nebapp-icon-centeralignment
  • survey
    #nebapp-icon-survey
  • click
    #nebapp-icon-click
  • template
    #nebapp-icon-template
  • asp结算
    #nebapp-icon-aspjiesuan
  • text
    #nebapp-icon-text
  • flag
    #nebapp-icon-flag
  • suspended
    #nebapp-icon-suspended
  • falg-fill
    #nebapp-icon-falg-fill
  • task-management
    #nebapp-icon-task-management
  • Fee
    #nebapp-icon-Fee
  • tool
    #nebapp-icon-tool
  • filling
    #nebapp-icon-filling
  • top
    #nebapp-icon-Top
  • Foreign currency
    #nebapp-icon-Foreigncurrency
  • smile
    #nebapp-icon-smile
  • guanliyuan
    #nebapp-icon-guanliyuan
  • textile-products
    #nebapp-icon-textile-products
  • language
    #nebapp-icon-language
  • trade alert
    #nebapp-icon-tradealert
  • leftalignment
    #nebapp-icon-leftalignment
  • top sales
    #nebapp-icon-topsales
  • extra-inquiries
    #nebapp-icon-extra-inquiries
  • trading volume
    #nebapp-icon-tradingvolume
  • Italic
    #nebapp-icon-Italic
  • training
    #nebapp-icon-training
  • pcm
    #nebapp-icon-pcm
  • upload
    #nebapp-icon-upload
  • reducecell
    #nebapp-icon-reducecell
  • RFQ-word
    #nebapp-icon-RFQ-word
  • rightalignment
    #nebapp-icon-rightalignment
  • view larger
    #nebapp-icon-viewlarger
  • pointerleft
    #nebapp-icon-pointerleft
  • viewgallery
    #nebapp-icon-viewgallery
  • subscript
    #nebapp-icon-subscript
  • vehivles
    #nebapp-icon-vehivles
  • square
    #nebapp-icon-square
  • trust
    #nebapp-icon-trust
  • superscript
    #nebapp-icon-superscript
  • warning
    #nebapp-icon-warning
  • tag-subscript
    #nebapp-icon-tag-subscript
  • warehouse
    #nebapp-icon-warehouse
  • 单据转换
    #nebapp-icon-danjuzhuanhuan
  • shoes
    #nebapp-icon-shoes
  • Transfer money
    #nebapp-icon-Transfermoney
  • video
    #nebapp-icon-video
  • under-line
    #nebapp-icon-under-line
  • viewlist
    #nebapp-icon-viewlist
  • xiakuangxian
    #nebapp-icon-xiakuangxian
  • set
    #nebapp-icon-set
  • 收起
    #nebapp-icon-shouqi
  • store
    #nebapp-icon-store
  • 展开
    #nebapp-icon-zhankai
  • tool-hardware
    #nebapp-icon-tool-hardware
  • 通讯录
    #nebapp-icon-tongxunlu
  • vs
    #nebapp-icon-vs
  • 已关注供应商
    #nebapp-icon-yiguanzhugongyingshang
  • toy
    #nebapp-icon-toy
  • 购买偏好
    #nebapp-icon-goumaipianhao
  • sport
    #nebapp-icon-sport
  • Subscribe
    #nebapp-icon-Subscribe
  • credit card
    #nebapp-icon-creditcard
  • become a gold supplier
    #nebapp-icon-becomeagoldsupplier
  • contacts
    #nebapp-icon-contacts
  • new
    #nebapp-icon-new
  • checkstand
    #nebapp-icon-checkstand
  • free
    #nebapp-icon-free
  • aviation
    #nebapp-icon-aviation
  • cad-fill
    #nebapp-icon-cad-fill
  • Daytime mode
    #nebapp-icon-Daytimemode
  • robot
    #nebapp-icon-robot
  • infant & mom
    #nebapp-icon-infantmom
  • inspection
    #nebapp-icon-inspection1
  • discounts
    #nebapp-icon-discounts
  • invoice
    #nebapp-icon-invoice
  • insurance
    #nebapp-icon-insurance
  • night mode
    #nebapp-icon-nightmode
  • user center
    #nebapp-icon-usercenter
  • unlock
    #nebapp-icon-unlock
  • vip
    #nebapp-icon-vip
  • wallet
    #nebapp-icon-wallet
  • land transportation
    #nebapp-icon-landtransportation
  • voice
    #nebapp-icon-voice
  • exchange rate
    #nebapp-icon-exchangerate
  • contacts-fill
    #nebapp-icon-contacts-fill
  • add-account
    #nebapp-icon-add-account1
  • 2years-fill
    #nebapp-icon-years-fill
  • add-cart-fill
    #nebapp-icon-add-cart-fill
  • add-fill
    #nebapp-icon-add-fill
  • all-fill
    #nebapp-icon-all-fill1
  • ashbin-fill
    #nebapp-icon-ashbin-fill
  • calendar-fill
    #nebapp-icon-calendar-fill
  • bad-fill
    #nebapp-icon-bad-fill
  • bussiness-man-fill
    #nebapp-icon-bussiness-man-fill
  • atm-fill
    #nebapp-icon-atm-fill
  • cart- full-fill
    #nebapp-icon-cart-full-fill
  • cart-Empty-fill
    #nebapp-icon-cart-Empty-fill
  • camera switching-fill
    #nebapp-icon-cameraswitching-fill
  • atm-away-fill
    #nebapp-icon-atm-away-fill
  • certified-supplier-fill
    #nebapp-icon-certified-supplier-fill
  • calculator-fill
    #nebapp-icon-calculator-fill
  • clock-fill
    #nebapp-icon-clock-fill
  • ali-clould-fill
    #nebapp-icon-ali-clould-fill
  • color-fill
    #nebapp-icon-color-fill
  • coupons-fill
    #nebapp-icon-coupons-fill
  • cecurity-protection-fill
    #nebapp-icon-cecurity-protection-fill
  • credit-level-fill
    #nebapp-icon-credit-level-fill
  • default-template-fill
    #nebapp-icon-default-template-fill
  • Currency Converter-fill
    #nebapp-icon-CurrencyConverter-fill
  • Customer management-fill
    #nebapp-icon-Customermanagement-fill
  • discounts-fill
    #nebapp-icon-discounts-fill
  • Daytime mode-fill
    #nebapp-icon-Daytimemode-fill
  • exl-fill
    #nebapp-icon-exl-fill
  • cry-fill
    #nebapp-icon-cry-fill
  • email-fill
    #nebapp-icon-email-fill
  • filter-fill
    #nebapp-icon-filter-fill
  • folder-fill
    #nebapp-icon-folder-fill
  • feeds-fill
    #nebapp-icon-feeds-fill
  • gold-supplie-fill
    #nebapp-icon-gold-supplie-fill
  • form-fill
    #nebapp-icon-form-fill
  • camera-fill
    #nebapp-icon-camera-fill
  • good-fill
    #nebapp-icon-good-fill
  • image-text-fill
    #nebapp-icon-image-text-fill
  • inspection-fill
    #nebapp-icon-inspection-fill
  • hot-fill
    #nebapp-icon-hot-fill
  • company-fill
    #nebapp-icon-company-fill
  • discount-fill
    #nebapp-icon-discount-fill
  • insurance-fill
    #nebapp-icon-insurance-fill
  • inquiry-template-fill
    #nebapp-icon-inquiry-template-fill
  • left button-fill
    #nebapp-icon-leftbutton-fill
  • integral-fill
    #nebapp-icon-integral-fill1
  • help
    #nebapp-icon-help1
  • listing-content-fill
    #nebapp-icon-listing-content-fill
  • logistic-logo-fill
    #nebapp-icon-logistic-logo-fill
  • play-fill
    #nebapp-icon-play-fill
  • Money management-fill
    #nebapp-icon-Moneymanagement-fill
  • prompt-fill
    #nebapp-icon-prompt-fill
  • manage-order-fill
    #nebapp-icon-manage-order-fill
  • stop-fill
    #nebapp-icon-stop-fill
  • multi-language-fill
    #nebapp-icon-multi-language-fill
  • 3column
    #nebapp-icon-column
  • logistics-icon-fill
    #nebapp-icon-logistics-icon-fill
  • add-account
    #nebapp-icon-add-account
  • New user zone-fill
    #nebapp-icon-Newuserzone-fill
  • 4column
    #nebapp-icon-column1
  • night mode-fill
    #nebapp-icon-nightmode-fill
  • add
    #nebapp-icon-add
  • office-supplies-fill
    #nebapp-icon-office-supplies-fill
  • agriculture
    #nebapp-icon-agriculture
  • notice-fill
    #nebapp-icon-notice-fill
  • 2years
    #nebapp-icon-years
  • mute
    #nebapp-icon-mute
  • add-cart
    #nebapp-icon-add-cart
  • order-fill
    #nebapp-icon-order-fill
  • arrow-right
    #nebapp-icon-arrow-right
  • password
    #nebapp-icon-password1
  • arrow-left
    #nebapp-icon-arrow-left
  • map
    #nebapp-icon-map1
  • apparel
    #nebapp-icon-apparel
  • paylater-fill
    #nebapp-icon-paylater-fill
  • all
    #nebapp-icon-all1
  • phone-fill
    #nebapp-icon-phone-fill
  • arrow-up
    #nebapp-icon-arrow-up
  • online-tracking-fill
    #nebapp-icon-online-tracking-fill
  • ascending
    #nebapp-icon-ascending
  • play-fill
    #nebapp-icon-play-fill1
  • ashbin
    #nebapp-icon-ashbin
  • pdf-fill
    #nebapp-icon-pdf-fill
  • atm
    #nebapp-icon-atm
  • phone
    #nebapp-icon-phone1
  • bad
    #nebapp-icon-bad
  • pin-fill
    #nebapp-icon-pin-fill
  • attachent
    #nebapp-icon-attachent
  • product-fill
    #nebapp-icon-product-fill
  • browse
    #nebapp-icon-browse
  • ranking list-fill
    #nebapp-icon-rankinglist-fill
  • beauty
    #nebapp-icon-beauty
  • reduce-fill
    #nebapp-icon-reduce-fill
  • auto
    #nebapp-icon-auto
  • all
    #nebapp-icon-all
  • bussiness-man
    #nebapp-icon-bussiness-man
  • component
    #nebapp-icon-component
  • code
    #nebapp-icon-code
  • copy
    #nebapp-icon-copy
  • dollar
    #nebapp-icon-dollar
  • history
    #nebapp-icon-history
  • editor
    #nebapp-icon-editor
  • data
    #nebapp-icon-data
  • gift
    #nebapp-icon-gift
  • integral
    #nebapp-icon-integral
  • nav-list
    #nebapp-icon-nav-list
  • pic
    #nebapp-icon-pic
  • Not visible
    #nebapp-icon-Notvisible
  • play
    #nebapp-icon-play
  • rising
    #nebapp-icon-rising
  • QRcode
    #nebapp-icon-QRcode
  • rmb
    #nebapp-icon-rmb
  • similar-product
    #nebapp-icon-similar-product
  • export services
    #nebapp-icon-Exportservices
  • send inquiry
    #nebapp-icon-sendinquiry
  • all-fill
    #nebapp-icon-all-fill
  • favorites-fill
    #nebapp-icon-favorites-fill
  • integral-fill
    #nebapp-icon-integral-fill
  • namecard-fill
    #nebapp-icon-namecard-fill
  • pic-fill
    #nebapp-icon-pic-fill

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>