• data-access
    
  • choose-drop-down-box
    
  • choose-date-range
    
  • input-editor
    
  • input-multiline-text
    
  • choose-nextmap-choose
    
  • layout-card-layout
    
  • choose-popup-window
    
  • input-counter
    
  • layout-design-child-table
    
  • choose-tree-selection
    
  • other-slider
    
  • choose-time-range
    
  • choose-date-selection
    
  • choose-pull-down-box
    
  • choose-single-selection-box
    
  • handle-button
    
  • choose-multiple-selection-box
    
  • layout-divider
    
  • upload-image-upload
    
  • system-Modify-time
    
  • system-guid
    
  • input-password
    
  • system-subordinate-companies
    
  • system-companies-choose
    
  • other-color-choices
    
  • other-icon
    
  • system-create-personnel
    
  • other-on-off
    
  • system-personnel-selection
    
  • choose-time-selection
    
  • other-score
    
  • system-modify-staff
    
  • input-textfield
    
  • upload-file-upload
    
  • commissioned-by-the-process
    
  • system-creation-time
    
  • view-view-form
    
  • system-department
    
  • choose-provinces
    
  • language-type-maintenance
    
  • menu-function-translation
    
  • process-design
    
  • excel-configuration
    
  • ubrta
    
  • data-dictionary
    
  • system-log
    
  • data-sheet-management
    
  • task-designing
    
  • process-tasks
    
  • multilingual-management
    
  • form-design
    
  • message-the-user
    
  • rights-management
    
  • mobile-desktop
    
  • message-strategy
    
  • task-scheduling
    
  • job-log
    
  • 
    system-management
    
  • company-management
    
  • administrative-areas
    
  • data-access
    
  • department-of-management
    
  • data-source
    
  • documents-coding
    
  • data-application
    
  • data-dictionary-translation
    
  • form-post
    
  • message-center
    
  • desktop-design
    
  • database-connection
    
  • online-development
    
  • functional-authority
    
  • menu-management
    
  • mobile-capabilities
    
  • node
    
  • safety
    
  • tick
    
  • ranking
    
  • up-arrow
    
  • shopping-bag
    
  • undo
    
  • support
    
  • upload
    
  • template
    
  • user
    
  • transfer
    
  • video
    
  • qq
    
  • wallet
    
  • store
    
  • close-eye
    
  • open-eye
    
  • pie
    
  • 
    repository
    
  • magnifying-glass
    
  • subtract
    
  • stars
    
  • sina
    
  • want
    
  • integrated
    
  • van
    
  • bluetooth
    
  • up
    
  • validating profile
    
  • address-m
    
  • ashcan
    
  • tag
    
  • projection
    
  • site
    
  • assess-m
    
  • append-m
    
  • briefcase-m
    
  • ashcan-m
    
  • call-m
    
  • camera-m
    
  • clock-m
    
  • card-m
    
  • alarm
    
  • book-m
    
  • close-m
    
  • cloud-m
    
  • circle-m
    
  • cloud-upload-m
    
  • collect-m
    
  • cloud-download-m
    
  • close-eye-m
    
  • alarm-clock-m
    
  • volume
    
  • calendar-m
    
  • component-m
    
  • address-book-m
    
  • wechat
    
  • cup-m
    
  • alarm-m
    
  • scanning
    
  • customize-m
    
  • copy-m
    
  • database-m
    
  • down-m
    
  • customize
    
  • down-arrow-m
    
  • computer-m
    
  • download-m
    
  • add-contacts-m
    
  • coupon-m
    
  • emoji-m
    
  • explore-m
    
  • certificate-m
    
  • qr
    
  • bluetooth-m
    
  • code-m
    
  • document-m
    
  • exit-m
    
  • confirm-m
    
  • cooperation-m
    
  • correct-m
    
  • file-m
    
  • 
    flag-m
    
  • forwarding-m
    
  • facility-m
    
  • error-m
    
  • folder-m
    
  • edit-m
    
  • goods-m
    
  • integrated-m
    
  • left-m
    
  • document-search-m
    
  • home-m
    
  • mail-m
    
  • counter-m
    
  • menology-m
    
  • mobile-m
    
  • data-bank-m
    
  • microphone-m
    
  • left-arrow-m
    
  • member-m
    
  • nav-m
    
  • more-m
    
  • histogram-m
    
  • list-m
    
  • open-eye-m
    
  • node-m
    
  • magnifying-glass-m
    
  • learn-m
    
  • paper airplane-m
    
  • pie-m
    
  • gather-m
    
  • gift-m
    
  • money-m
    
  • projection-m
    
  • product-m
    
  • read-m
    
  • navigation-m
    
  • pending-m
    
  • pic-m
    
  • safety-m
    
  • project-m
    
  • repository-m
    
  • laptop-m
    
  • qq-m
    
  • shopping-bag-m
    
  • house-m
    
  • position-m
    
  • lock-m
    
  • question-m
    
  • right-arrow-m
    
  • share-m
    
  • right-m
    
  • support-m
    
  • site-m
    
  • skin-m
    
  • stars-m
    
  • mute-m
    
  • paper-m
    
  • subtract-m
    
  • tick-m
    
  • plan-m
    
  • store-m
    
  • qr-m
    
  • template-m
    
  • internet-m
    
  • 
    refresh-m
    
  • scanning-m
    
  • module-m
    
  • up-arrow-m
    
  • printer-m
    
  • shopping-cart-m
    
  • user-m
    
  • undo-m
    
  • van-m
    
  • validating-profile-m
    
  • fingerprint-m
    
  • add
    
  • video-m
    
  • about
    
  • sina-m
    
  • add-contacts
    
  • volume-m
    
  • address
    
  • record-m
    
  • address-book
    
  • tag-m
    
  • append
    
  • wallet-m
    
  • alarm-clock
    
  • transfer-m
    
  • briefcase
    
  • want-m
    
  • book
    
  • upload-m
    
  • assess
    
  • like-m
    
  • calendar
    
  • ranking-m
    
  • camera
    
  • up-m
    
  • card
    
  • love-m
    
  • certificate
    
  • map-m
    
  • close
    
  • wechat-m
    
  • clock
    
  • message-m
    
  • cloud-upload
    
  • mine-m
    
  • circle
    
  • about-m
    
  • cloud-download
    
  • call
    
  • code
    
  • confirm
    
  • collect
    
  • computer
    
  • component
    
  • cooperation
    
  • correct
    
  • coupon
    
  • cloud
    
  • copy
    
  • database
    
  • cup
    
  • counter
    
  • down
    
  • download
    
  • down-arrow
    
  • document
    
  • document-search
    
  • exit
    
  • emoji
    
  • data-bank
    
  • file
    
  • explore
    
  • error
    
  • edit
    
  • facility
    
  • folder
    
  • gift
    
  • forwarding
    
  • flag
    
  • home
    
  • gather
    
  • fingerprint
    
  • left
    
  • histogram
    
  • laptop
    
  • left-arrow
    
  • mail
    
  • link
    
  • love
    
  • learn
    
  • list
    
  • like
    
  • mine
    
  • menology
    
  • lock
    
  • internet
    
  • microphone
    
  • member
    
  • money
    
  • map
    
  • message
    
  • nav
    
  • mobile
    
  • goods
    
  • paper-airplane
    
  • more
    
  • module
    
  • pic
    
  • plan
    
  • mute
    
  • position
    
  • project
    
  • navigation
    
  • pending
    
  • product
    
  • paper
    
  • question
    
  • right-arrow
    
  • house
    
  • read
    
  • record
    
  • share
    
  • refresh
    
  • printer
    
  • right
    
  • skin
    
  • shopping-cart
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1641539764903') format('woff2'),
       url('iconfont.woff?t=1641539764903') format('woff'),
       url('iconfont.ttf?t=1641539764903') 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"。

  • data-access
    .icon-data-access1
  • choose-drop-down-box
    .icon-choose-drop-down-box
  • choose-date-range
    .icon-choose-date-range
  • input-editor
    .icon-input-editor
  • input-multiline-text
    .icon-input-multiline-text
  • choose-nextmap-choose
    .icon-choose-nextmap-choose
  • layout-card-layout
    .icon-layout-card-layout
  • choose-popup-window
    .icon-choose-popup-window
  • input-counter
    .icon-input-counter
  • layout-design-child-table
    .icon-layout-design-child-table
  • choose-tree-selection
    .icon-choose-tree-selection
  • other-slider
    .icon-other-slider
  • choose-time-range
    .icon-choose-time-range
  • choose-date-selection
    .icon-choose-date-selection
  • choose-pull-down-box
    .icon-choose-pull-down-box
  • choose-single-selection-box
    .icon-choose-single-selection-box
  • handle-button
    .icon-handle-button
  • choose-multiple-selection-box
    .icon-choose-multiple-selection-box
  • layout-divider
    .icon-layout-divider
  • upload-image-upload
    .icon-upload-image-upload
  • system-Modify-time
    .icon-system-Modify-time
  • system-guid
    .icon-system-guid
  • input-password
    .icon-input-password
  • system-subordinate-companies
    .icon-system-subordinate-companies
  • system-companies-choose
    .icon-system-companies-choose
  • other-color-choices
    .icon-other-color-choices
  • other-icon
    .icon-other-icon
  • system-create-personnel
    .icon-system-create-personnel
  • other-on-off
    .icon-other-on-off
  • system-personnel-selection
    .icon-system-personnel-selection
  • choose-time-selection
    .icon-choose-time-selection
  • other-score
    .icon-other-score
  • system-modify-staff
    .icon-system-modify-staff
  • input-textfield
    .icon-input-textfield
  • upload-file-upload
    .icon-upload-file-upload
  • commissioned-by-the-process
    .icon-commissioned-by-the-process
  • system-creation-time
    .icon-system-creation-time
  • view-view-form
    .icon-view-view-form
  • system-department
    .icon-system-department
  • choose-provinces
    .icon-choose-provinces
  • language-type-maintenance
    .icon-language-type-maintenance
  • menu-function-translation
    .icon-menu-function-translation
  • process-design
    .icon-process-design
  • excel-configuration
    .icon-excel-configuration
  • ubrta
    .icon-ubrta
  • data-dictionary
    .icon-data-dictionary
  • system-log
    .icon-system-log
  • data-sheet-management
    .icon-data-sheet-management
  • task-designing
    .icon-task-designing
  • process-tasks
    .icon-process-tasks
  • multilingual-management
    .icon-multilingual-management
  • form-design
    .icon-form-design
  • message-the-user
    .icon-message-the-user
  • rights-management
    .icon-rights-management
  • mobile-desktop
    .icon-mobile-desktop
  • message-strategy
    .icon-message-strategy
  • task-scheduling
    .icon-task-scheduling
  • job-log
    .icon-job-log
  • system-management
    .icon-system-management
  • company-management
    .icon-company-management
  • administrative-areas
    .icon-administrative-areas
  • data-access
    .icon-data-access
  • department-of-management
    .icon-department-of-management
  • data-source
    .icon-data-source
  • documents-coding
    .icon-documents-coding
  • data-application
    .icon-data-application
  • data-dictionary-translation
    .icon-data-dictionary-translation
  • form-post
    .icon-form-post
  • message-center
    .icon-message-center
  • desktop-design
    .icon-desktop-design
  • database-connection
    .icon-database-connection
  • online-development
    .icon-online-development
  • functional-authority
    .icon-functional-authority
  • menu-management
    .icon-menu-management
  • mobile-capabilities
    .icon-mobile-capabilities
  • node
    .icon-node
  • safety
    .icon-safety
  • tick
    .icon-tick
  • ranking
    .icon-ranking
  • up-arrow
    .icon-up-arrow
  • shopping-bag
    .icon-shopping-bag
  • undo
    .icon-undo
  • support
    .icon-support
  • upload
    .icon-upload
  • template
    .icon-template
  • user
    .icon-user
  • transfer
    .icon-transfer
  • video
    .icon-video
  • qq
    .icon-qq
  • wallet
    .icon-wallet
  • store
    .icon-store
  • close-eye
    .icon-close-eye
  • open-eye
    .icon-open-eye
  • pie
    .icon-pie
  • repository
    .icon-repository
  • magnifying-glass
    .icon-magnifying-glass
  • subtract
    .icon-subtract
  • stars
    .icon-stars
  • sina
    .icon-sina
  • want
    .icon-want
  • integrated
    .icon-integrated
  • van
    .icon-van
  • bluetooth
    .icon-bluetooth
  • up
    .icon-up
  • validating profile
    .icon-validatingprofile
  • address-m
    .icon-address-m
  • ashcan
    .icon-ashcan
  • tag
    .icon-tag
  • projection
    .icon-projection
  • site
    .icon-site
  • assess-m
    .icon-assess-m
  • append-m
    .icon-append-m
  • briefcase-m
    .icon-briefcase-m
  • ashcan-m
    .icon-ashcan-m
  • call-m
    .icon-call-m
  • camera-m
    .icon-camera-m
  • clock-m
    .icon-clock-m
  • card-m
    .icon-card-m
  • alarm
    .icon-alarm
  • book-m
    .icon-book-m
  • close-m
    .icon-close-m
  • cloud-m
    .icon-cloud-m
  • circle-m
    .icon-circle-m
  • cloud-upload-m
    .icon-cloud-upload-m
  • collect-m
    .icon-collect-m
  • cloud-download-m
    .icon-cloud-download-m
  • close-eye-m
    .icon-close-eye-m
  • alarm-clock-m
    .icon-alarm-clock-m
  • volume
    .icon-volume
  • calendar-m
    .icon-calendar-m
  • component-m
    .icon-component-m
  • address-book-m
    .icon-address-book-m
  • wechat
    .icon-wechat
  • cup-m
    .icon-cup-m
  • alarm-m
    .icon-alarm-m
  • scanning
    .icon-scanning
  • customize-m
    .icon-customize-m
  • copy-m
    .icon-copy-m
  • database-m
    .icon-database-m
  • down-m
    .icon-down-m
  • customize
    .icon-customize
  • down-arrow-m
    .icon-down-arrow-m
  • computer-m
    .icon-computer-m
  • download-m
    .icon-download-m
  • add-contacts-m
    .icon-add-contacts-m
  • coupon-m
    .icon-coupon-m
  • emoji-m
    .icon-emoji-m
  • explore-m
    .icon-explore-m
  • certificate-m
    .icon-certificate-m
  • qr
    .icon-qr
  • bluetooth-m
    .icon-bluetooth-m
  • code-m
    .icon-code-m
  • document-m
    .icon-document-m
  • exit-m
    .icon-exit-m
  • confirm-m
    .icon-confirm-m
  • cooperation-m
    .icon-cooperation-m
  • correct-m
    .icon-correct-m
  • file-m
    .icon-file-m
  • flag-m
    .icon-flag-m
  • forwarding-m
    .icon-forwarding-m
  • facility-m
    .icon-facility-m
  • error-m
    .icon-error-m
  • folder-m
    .icon-folder-m
  • edit-m
    .icon-edit-m
  • goods-m
    .icon-goods-m
  • integrated-m
    .icon-integrated-m
  • left-m
    .icon-left-m
  • document-search-m
    .icon-document-search-m
  • home-m
    .icon-home-m
  • mail-m
    .icon-mail-m
  • counter-m
    .icon-counter-m
  • menology-m
    .icon-menology-m
  • mobile-m
    .icon-mobile-m
  • data-bank-m
    .icon-data-bank-m
  • microphone-m
    .icon-microphone-m
  • left-arrow-m
    .icon-left-arrow-m
  • member-m
    .icon-member-m
  • nav-m
    .icon-nav-m
  • more-m
    .icon-more-m
  • histogram-m
    .icon-histogram-m
  • list-m
    .icon-list-m
  • open-eye-m
    .icon-open-eye-m
  • node-m
    .icon-node-m
  • magnifying-glass-m
    .icon-magnifying-glass-m
  • learn-m
    .icon-learn-m
  • paper airplane-m
    .icon-paperairplane-m
  • pie-m
    .icon-pie-m
  • gather-m
    .icon-gather-m
  • gift-m
    .icon-gift-m
  • money-m
    .icon-money-m
  • projection-m
    .icon-projection-m
  • product-m
    .icon-product-m
  • read-m
    .icon-read-m
  • navigation-m
    .icon-navigation-m
  • pending-m
    .icon-pending-m
  • pic-m
    .icon-pic-m
  • safety-m
    .icon-safety-m
  • project-m
    .icon-project-m
  • repository-m
    .icon-repository-m
  • laptop-m
    .icon-laptop-m
  • qq-m
    .icon-qq-m
  • shopping-bag-m
    .icon-shopping-bag-m
  • house-m
    .icon-house-m
  • position-m
    .icon-position-m
  • lock-m
    .icon-lock-m
  • question-m
    .icon-question-m
  • right-arrow-m
    .icon-right-arrow-m
  • share-m
    .icon-share-m
  • right-m
    .icon-right-m
  • support-m
    .icon-support-m
  • site-m
    .icon-site-m
  • skin-m
    .icon-skin-m
  • stars-m
    .icon-stars-m
  • mute-m
    .icon-mute-m
  • paper-m
    .icon-paper-m
  • subtract-m
    .icon-subtract-m
  • tick-m
    .icon-tick-m
  • plan-m
    .icon-plan-m
  • store-m
    .icon-store-m
  • qr-m
    .icon-qr-m
  • template-m
    .icon-template-m
  • internet-m
    .icon-internet-m
  • refresh-m
    .icon-refresh-m
  • scanning-m
    .icon-scanning-m
  • module-m
    .icon-module-m
  • up-arrow-m
    .icon-up-arrow-m
  • printer-m
    .icon-printer-m
  • shopping-cart-m
    .icon-shopping-cart-m
  • user-m
    .icon-user-m
  • undo-m
    .icon-undo-m
  • van-m
    .icon-van-m
  • validating-profile-m
    .icon-validating-profile-m
  • fingerprint-m
    .icon-fingerprint-m
  • add
    .icon-add
  • video-m
    .icon-video-m
  • about
    .icon-about
  • sina-m
    .icon-sina-m
  • add-contacts
    .icon-add-contacts
  • volume-m
    .icon-volume-m
  • address
    .icon-address
  • record-m
    .icon-record-m
  • address-book
    .icon-address-book
  • tag-m
    .icon-tag-m
  • append
    .icon-append
  • wallet-m
    .icon-wallet-m
  • alarm-clock
    .icon-alarm-clock
  • transfer-m
    .icon-transfer-m
  • briefcase
    .icon-briefcase
  • want-m
    .icon-want-m
  • book
    .icon-book
  • upload-m
    .icon-upload-m
  • assess
    .icon-assess
  • like-m
    .icon-like-m
  • calendar
    .icon-calendar
  • ranking-m
    .icon-ranking-m
  • camera
    .icon-camera
  • up-m
    .icon-up-m
  • card
    .icon-card
  • love-m
    .icon-love-m
  • certificate
    .icon-certificate
  • map-m
    .icon-map-m
  • close
    .icon-close
  • wechat-m
    .icon-wechat-m
  • clock
    .icon-clock
  • message-m
    .icon-message-m
  • cloud-upload
    .icon-cloud-upload
  • mine-m
    .icon-mine-m
  • circle
    .icon-circle
  • about-m
    .icon-about-m
  • cloud-download
    .icon-cloud-download
  • call
    .icon-call
  • code
    .icon-code
  • confirm
    .icon-confirm
  • collect
    .icon-collect
  • computer
    .icon-computer
  • component
    .icon-component
  • cooperation
    .icon-cooperation
  • correct
    .icon-correct
  • coupon
    .icon-coupon
  • cloud
    .icon-cloud
  • copy
    .icon-copy
  • database
    .icon-database
  • cup
    .icon-cup
  • counter
    .icon-counter
  • down
    .icon-down
  • download
    .icon-download
  • down-arrow
    .icon-down-arrow
  • document
    .icon-document
  • document-search
    .icon-document-search
  • exit
    .icon-exit
  • emoji
    .icon-emoji
  • data-bank
    .icon-data-bank
  • file
    .icon-file
  • explore
    .icon-explore
  • error
    .icon-error
  • edit
    .icon-edit
  • facility
    .icon-facility
  • folder
    .icon-folder
  • gift
    .icon-gift
  • forwarding
    .icon-forwarding
  • flag
    .icon-flag
  • home
    .icon-home
  • gather
    .icon-gather
  • fingerprint
    .icon-fingerprint
  • left
    .icon-left
  • histogram
    .icon-histogram
  • laptop
    .icon-laptop
  • left-arrow
    .icon-left-arrow
  • mail
    .icon-mail
  • link
    .icon-link
  • love
    .icon-love
  • learn
    .icon-learn
  • list
    .icon-list
  • like
    .icon-like
  • mine
    .icon-mine
  • menology
    .icon-menology
  • lock
    .icon-lock
  • internet
    .icon-internet
  • microphone
    .icon-microphone
  • member
    .icon-member
  • money
    .icon-money
  • map
    .icon-map
  • message
    .icon-message
  • nav
    .icon-nav
  • mobile
    .icon-mobile
  • goods
    .icon-goods
  • paper-airplane
    .icon-paper-airplane
  • more
    .icon-more
  • module
    .icon-module
  • pic
    .icon-pic
  • plan
    .icon-plan
  • mute
    .icon-mute
  • position
    .icon-position
  • project
    .icon-project
  • navigation
    .icon-navigation
  • pending
    .icon-pending
  • product
    .icon-product
  • paper
    .icon-paper
  • question
    .icon-question
  • right-arrow
    .icon-right-arrow
  • house
    .icon-house
  • read
    .icon-read
  • record
    .icon-record
  • share
    .icon-share
  • refresh
    .icon-refresh
  • printer
    .icon-printer
  • right
    .icon-right
  • skin
    .icon-skin
  • shopping-cart
    .icon-shopping-cart

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"。

  • data-access
    #icon-data-access1
  • choose-drop-down-box
    #icon-choose-drop-down-box
  • choose-date-range
    #icon-choose-date-range
  • input-editor
    #icon-input-editor
  • input-multiline-text
    #icon-input-multiline-text
  • choose-nextmap-choose
    #icon-choose-nextmap-choose
  • layout-card-layout
    #icon-layout-card-layout
  • choose-popup-window
    #icon-choose-popup-window
  • input-counter
    #icon-input-counter
  • layout-design-child-table
    #icon-layout-design-child-table
  • choose-tree-selection
    #icon-choose-tree-selection
  • other-slider
    #icon-other-slider
  • choose-time-range
    #icon-choose-time-range
  • choose-date-selection
    #icon-choose-date-selection
  • choose-pull-down-box
    #icon-choose-pull-down-box
  • choose-single-selection-box
    #icon-choose-single-selection-box
  • handle-button
    #icon-handle-button
  • choose-multiple-selection-box
    #icon-choose-multiple-selection-box
  • layout-divider
    #icon-layout-divider
  • upload-image-upload
    #icon-upload-image-upload
  • system-Modify-time
    #icon-system-Modify-time
  • system-guid
    #icon-system-guid
  • input-password
    #icon-input-password
  • system-subordinate-companies
    #icon-system-subordinate-companies
  • system-companies-choose
    #icon-system-companies-choose
  • other-color-choices
    #icon-other-color-choices
  • other-icon
    #icon-other-icon
  • system-create-personnel
    #icon-system-create-personnel
  • other-on-off
    #icon-other-on-off
  • system-personnel-selection
    #icon-system-personnel-selection
  • choose-time-selection
    #icon-choose-time-selection
  • other-score
    #icon-other-score
  • system-modify-staff
    #icon-system-modify-staff
  • input-textfield
    #icon-input-textfield
  • upload-file-upload
    #icon-upload-file-upload
  • commissioned-by-the-process
    #icon-commissioned-by-the-process
  • system-creation-time
    #icon-system-creation-time
  • view-view-form
    #icon-view-view-form
  • system-department
    #icon-system-department
  • choose-provinces
    #icon-choose-provinces
  • language-type-maintenance
    #icon-language-type-maintenance
  • menu-function-translation
    #icon-menu-function-translation
  • process-design
    #icon-process-design
  • excel-configuration
    #icon-excel-configuration
  • ubrta
    #icon-ubrta
  • data-dictionary
    #icon-data-dictionary
  • system-log
    #icon-system-log
  • data-sheet-management
    #icon-data-sheet-management
  • task-designing
    #icon-task-designing
  • process-tasks
    #icon-process-tasks
  • multilingual-management
    #icon-multilingual-management
  • form-design
    #icon-form-design
  • message-the-user
    #icon-message-the-user
  • rights-management
    #icon-rights-management
  • mobile-desktop
    #icon-mobile-desktop
  • message-strategy
    #icon-message-strategy
  • task-scheduling
    #icon-task-scheduling
  • job-log
    #icon-job-log
  • system-management
    #icon-system-management
  • company-management
    #icon-company-management
  • administrative-areas
    #icon-administrative-areas
  • data-access
    #icon-data-access
  • department-of-management
    #icon-department-of-management
  • data-source
    #icon-data-source
  • documents-coding
    #icon-documents-coding
  • data-application
    #icon-data-application
  • data-dictionary-translation
    #icon-data-dictionary-translation
  • form-post
    #icon-form-post
  • message-center
    #icon-message-center
  • desktop-design
    #icon-desktop-design
  • database-connection
    #icon-database-connection
  • online-development
    #icon-online-development
  • functional-authority
    #icon-functional-authority
  • menu-management
    #icon-menu-management
  • mobile-capabilities
    #icon-mobile-capabilities
  • node
    #icon-node
  • safety
    #icon-safety
  • tick
    #icon-tick
  • ranking
    #icon-ranking
  • up-arrow
    #icon-up-arrow
  • shopping-bag
    #icon-shopping-bag
  • undo
    #icon-undo
  • support
    #icon-support
  • upload
    #icon-upload
  • template
    #icon-template
  • user
    #icon-user
  • transfer
    #icon-transfer
  • video
    #icon-video
  • qq
    #icon-qq
  • wallet
    #icon-wallet
  • store
    #icon-store
  • close-eye
    #icon-close-eye
  • open-eye
    #icon-open-eye
  • pie
    #icon-pie
  • repository
    #icon-repository
  • magnifying-glass
    #icon-magnifying-glass
  • subtract
    #icon-subtract
  • stars
    #icon-stars
  • sina
    #icon-sina
  • want
    #icon-want
  • integrated
    #icon-integrated
  • van
    #icon-van
  • bluetooth
    #icon-bluetooth
  • up
    #icon-up
  • validating profile
    #icon-validatingprofile
  • address-m
    #icon-address-m
  • ashcan
    #icon-ashcan
  • tag
    #icon-tag
  • projection
    #icon-projection
  • site
    #icon-site
  • assess-m
    #icon-assess-m
  • append-m
    #icon-append-m
  • briefcase-m
    #icon-briefcase-m
  • ashcan-m
    #icon-ashcan-m
  • call-m
    #icon-call-m
  • camera-m
    #icon-camera-m
  • clock-m
    #icon-clock-m
  • card-m
    #icon-card-m
  • alarm
    #icon-alarm
  • book-m
    #icon-book-m
  • close-m
    #icon-close-m
  • cloud-m
    #icon-cloud-m
  • circle-m
    #icon-circle-m
  • cloud-upload-m
    #icon-cloud-upload-m
  • collect-m
    #icon-collect-m
  • cloud-download-m
    #icon-cloud-download-m
  • close-eye-m
    #icon-close-eye-m
  • alarm-clock-m
    #icon-alarm-clock-m
  • volume
    #icon-volume
  • calendar-m
    #icon-calendar-m
  • component-m
    #icon-component-m
  • address-book-m
    #icon-address-book-m
  • wechat
    #icon-wechat
  • cup-m
    #icon-cup-m
  • alarm-m
    #icon-alarm-m
  • scanning
    #icon-scanning
  • customize-m
    #icon-customize-m
  • copy-m
    #icon-copy-m
  • database-m
    #icon-database-m
  • down-m
    #icon-down-m
  • customize
    #icon-customize
  • down-arrow-m
    #icon-down-arrow-m
  • computer-m
    #icon-computer-m
  • download-m
    #icon-download-m
  • add-contacts-m
    #icon-add-contacts-m
  • coupon-m
    #icon-coupon-m
  • emoji-m
    #icon-emoji-m
  • explore-m
    #icon-explore-m
  • certificate-m
    #icon-certificate-m
  • qr
    #icon-qr
  • bluetooth-m
    #icon-bluetooth-m
  • code-m
    #icon-code-m
  • document-m
    #icon-document-m
  • exit-m
    #icon-exit-m
  • confirm-m
    #icon-confirm-m
  • cooperation-m
    #icon-cooperation-m
  • correct-m
    #icon-correct-m
  • file-m
    #icon-file-m
  • flag-m
    #icon-flag-m
  • forwarding-m
    #icon-forwarding-m
  • facility-m
    #icon-facility-m
  • error-m
    #icon-error-m
  • folder-m
    #icon-folder-m
  • edit-m
    #icon-edit-m
  • goods-m
    #icon-goods-m
  • integrated-m
    #icon-integrated-m
  • left-m
    #icon-left-m
  • document-search-m
    #icon-document-search-m
  • home-m
    #icon-home-m
  • mail-m
    #icon-mail-m
  • counter-m
    #icon-counter-m
  • menology-m
    #icon-menology-m
  • mobile-m
    #icon-mobile-m
  • data-bank-m
    #icon-data-bank-m
  • microphone-m
    #icon-microphone-m
  • left-arrow-m
    #icon-left-arrow-m
  • member-m
    #icon-member-m
  • nav-m
    #icon-nav-m
  • more-m
    #icon-more-m
  • histogram-m
    #icon-histogram-m
  • list-m
    #icon-list-m
  • open-eye-m
    #icon-open-eye-m
  • node-m
    #icon-node-m
  • magnifying-glass-m
    #icon-magnifying-glass-m
  • learn-m
    #icon-learn-m
  • paper airplane-m
    #icon-paperairplane-m
  • pie-m
    #icon-pie-m
  • gather-m
    #icon-gather-m
  • gift-m
    #icon-gift-m
  • money-m
    #icon-money-m
  • projection-m
    #icon-projection-m
  • product-m
    #icon-product-m
  • read-m
    #icon-read-m
  • navigation-m
    #icon-navigation-m
  • pending-m
    #icon-pending-m
  • pic-m
    #icon-pic-m
  • safety-m
    #icon-safety-m
  • project-m
    #icon-project-m
  • repository-m
    #icon-repository-m
  • laptop-m
    #icon-laptop-m
  • qq-m
    #icon-qq-m
  • shopping-bag-m
    #icon-shopping-bag-m
  • house-m
    #icon-house-m
  • position-m
    #icon-position-m
  • lock-m
    #icon-lock-m
  • question-m
    #icon-question-m
  • right-arrow-m
    #icon-right-arrow-m
  • share-m
    #icon-share-m
  • right-m
    #icon-right-m
  • support-m
    #icon-support-m
  • site-m
    #icon-site-m
  • skin-m
    #icon-skin-m
  • stars-m
    #icon-stars-m
  • mute-m
    #icon-mute-m
  • paper-m
    #icon-paper-m
  • subtract-m
    #icon-subtract-m
  • tick-m
    #icon-tick-m
  • plan-m
    #icon-plan-m
  • store-m
    #icon-store-m
  • qr-m
    #icon-qr-m
  • template-m
    #icon-template-m
  • internet-m
    #icon-internet-m
  • refresh-m
    #icon-refresh-m
  • scanning-m
    #icon-scanning-m
  • module-m
    #icon-module-m
  • up-arrow-m
    #icon-up-arrow-m
  • printer-m
    #icon-printer-m
  • shopping-cart-m
    #icon-shopping-cart-m
  • user-m
    #icon-user-m
  • undo-m
    #icon-undo-m
  • van-m
    #icon-van-m
  • validating-profile-m
    #icon-validating-profile-m
  • fingerprint-m
    #icon-fingerprint-m
  • add
    #icon-add
  • video-m
    #icon-video-m
  • about
    #icon-about
  • sina-m
    #icon-sina-m
  • add-contacts
    #icon-add-contacts
  • volume-m
    #icon-volume-m
  • address
    #icon-address
  • record-m
    #icon-record-m
  • address-book
    #icon-address-book
  • tag-m
    #icon-tag-m
  • append
    #icon-append
  • wallet-m
    #icon-wallet-m
  • alarm-clock
    #icon-alarm-clock
  • transfer-m
    #icon-transfer-m
  • briefcase
    #icon-briefcase
  • want-m
    #icon-want-m
  • book
    #icon-book
  • upload-m
    #icon-upload-m
  • assess
    #icon-assess
  • like-m
    #icon-like-m
  • calendar
    #icon-calendar
  • ranking-m
    #icon-ranking-m
  • camera
    #icon-camera
  • up-m
    #icon-up-m
  • card
    #icon-card
  • love-m
    #icon-love-m
  • certificate
    #icon-certificate
  • map-m
    #icon-map-m
  • close
    #icon-close
  • wechat-m
    #icon-wechat-m
  • clock
    #icon-clock
  • message-m
    #icon-message-m
  • cloud-upload
    #icon-cloud-upload
  • mine-m
    #icon-mine-m
  • circle
    #icon-circle
  • about-m
    #icon-about-m
  • cloud-download
    #icon-cloud-download
  • call
    #icon-call
  • code
    #icon-code
  • confirm
    #icon-confirm
  • collect
    #icon-collect
  • computer
    #icon-computer
  • component
    #icon-component
  • cooperation
    #icon-cooperation
  • correct
    #icon-correct
  • coupon
    #icon-coupon
  • cloud
    #icon-cloud
  • copy
    #icon-copy
  • database
    #icon-database
  • cup
    #icon-cup
  • counter
    #icon-counter
  • down
    #icon-down
  • download
    #icon-download
  • down-arrow
    #icon-down-arrow
  • document
    #icon-document
  • document-search
    #icon-document-search
  • exit
    #icon-exit
  • emoji
    #icon-emoji
  • data-bank
    #icon-data-bank
  • file
    #icon-file
  • explore
    #icon-explore
  • error
    #icon-error
  • edit
    #icon-edit
  • facility
    #icon-facility
  • folder
    #icon-folder
  • gift
    #icon-gift
  • forwarding
    #icon-forwarding
  • flag
    #icon-flag
  • home
    #icon-home
  • gather
    #icon-gather
  • fingerprint
    #icon-fingerprint
  • left
    #icon-left
  • histogram
    #icon-histogram
  • laptop
    #icon-laptop
  • left-arrow
    #icon-left-arrow
  • mail
    #icon-mail
  • link
    #icon-link
  • love
    #icon-love
  • learn
    #icon-learn
  • list
    #icon-list
  • like
    #icon-like
  • mine
    #icon-mine
  • menology
    #icon-menology
  • lock
    #icon-lock
  • internet
    #icon-internet
  • microphone
    #icon-microphone
  • member
    #icon-member
  • money
    #icon-money
  • map
    #icon-map
  • message
    #icon-message
  • nav
    #icon-nav
  • mobile
    #icon-mobile
  • goods
    #icon-goods
  • paper-airplane
    #icon-paper-airplane
  • more
    #icon-more
  • module
    #icon-module
  • pic
    #icon-pic
  • plan
    #icon-plan
  • mute
    #icon-mute
  • position
    #icon-position
  • project
    #icon-project
  • navigation
    #icon-navigation
  • pending
    #icon-pending
  • product
    #icon-product
  • paper
    #icon-paper
  • question
    #icon-question
  • right-arrow
    #icon-right-arrow
  • house
    #icon-house
  • read
    #icon-read
  • record
    #icon-record
  • share
    #icon-share
  • refresh
    #icon-refresh
  • printer
    #icon-printer
  • right
    #icon-right
  • skin
    #icon-skin
  • shopping-cart
    #icon-shopping-cart

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>