• down-big
    
  • left-big
    
  • up-big
    
  • right-big
    
  • moon
    
  • sun
    
  • delete-key
    
  • miniprogram-fill
    
  • hide-key
    
  • miniprogram
    
  • funnel plot
    
  • home-fill
    
  • like
    
  • trophy-fill
    
  • unlike
    
  • location-fill
    
  • unlock
    
  • cloud-fill
    
  • lock
    
  • customerservice-fill
    
  • customerservice
    
  • experiment-fill
    
  • flag
    
  • eye-fill
    
  • money collect
    
  • like-fill
    
  • medicinebox
    
  • lock-fill
    
  • shop
    
  • unlike-fill
    
  • rocket
    
  • star-fill
    
  • shopping
    
  • unlock-fill
    
  • folder
    
  • alert-fill
    
  • folder-open
    
  • api-fill
    
  • folder-add
    
  • highlight-fill
    
  • deployment unit
    
  • phone-fill
    
  • account book
    
  • edit-fill
    
  • contacts
    
  • pushpin-fill
    
  • carry out
    
  • rocket-fill
    
  • calendar-check
    
  • thunderbolt-fill
    
  • calendar
    
  • tag-fill
    
  • scan
    
  • wrench-fill
    
  • select
    
  • tags-fill
    
  • box plot
    
  • bank-fill
    
  • build
    
  • camera-fill
    
  • sliders
    
  • error-fill
    
  • laptop
    
  • crown-fill
    
  • barcode
    
  • mail-fill
    
  • camera
    
  • car-fill
    
  • cluster
    
  • printer-fill
    
  • gateway
    
  • shop-fill
    
  • car
    
  • setting-fill
    
  • printer
    
  • USB-fill
    
  • read
    
  • golden-fill
    
  • cloud-server
    
  • build-fill
    
  • cloud-upload
    
  • box plot-fill
    
  • cloud
    
  • sliders-fill
    
  • cloud-download
    
  • alibaba
    
  • cloud-sync
    
  • ant design
    
  • video
    
  • ant-cloud
    
  • notification
    
  • behance
    
  • sound
    
  • google plus
    
  • radar chart
    
  • medium
    
  • qrcode
    
  • google
    
  • fund
    
  • IE
    
  • image
    
  • amazon
    
  • mail
    
  • slack
    
  • table
    
  • alipay
    
  • id card
    
  • taobao
    
  • credit card
    
  • zhihu
    
  • heart
    
  • HTML5
    
  • block
    
  • linkedin
    
  • error
    
  • yahoo
    
  • star
    
  • facebook
    
  • gold
    
  • skype
    
  • heat map
    
  • CodeSandbox
    
  • wifi
    
  • chrome
    
  • attachment
    
  • codepen
    
  • edit
    
  • aliwangwang
    
  • key
    
  • 
    apple
    
  • api
    
  • android
    
  • disconnect
    
  • sketch
    
  • highlight
    
  • Gitlab
    
  • monitor
    
  • dribbble
    
  • link
    
  • instagram
    
  • man
    
  • reddit
    
  • percentage
    
  • windows
    
  • pushpin
    
  • yuque
    
  • phone
    
  • Youtube
    
  • shake
    
  • Gitlab-fill
    
  • tag
    
  • dropbox
    
  • wrench
    
  • dingtalk
    
  • tags
    
  • android-fill
    
  • scissor
    
  • apple-fill
    
  • mr
    
  • HTML5-fill
    
  • share
    
  • windows-fill
    
  • branches
    
  • QQ
    
  • fork
    
  • twitter
    
  • shrink
    
  • skype-fill
    
  • arrawsalt
    
  • weibo
    
  • vertical right
    
  • yuque-fill
    
  • vertical left
    
  • Youtube-fill
    
  • right
    
  • yahoo-fill
    
  • left
    
  • wechat-fill
    
  • up
    
  • chrome-fill
    
  • down
    
  • alipay-circle-fill
    
  • fullscreen
    
  • aliwangwang-fill
    
  • fullscreen-exit
    
  • behance-circle-fill
    
  • doubleleft
    
  • amazon-circle-fill
    
  • double right
    
  • codepen-circle-fill
    
  • arrowright
    
  • CodeSandbox-circle-f
    
  • arrowup
    
  • dropbox-circle-fill
    
  • arrowleft
    
  • github-fill
    
  • arrowdown
    
  • dribbble-circle-fill
    
  • upload
    
  • google plus-circle-f
    
  • colum-height
    
  • medium-circle-fill
    
  • vertical-align-botto
    
  • QQ-circle-fill
    
  • vertical-align-middl
    
  • IE-circle-fill
    
  • totop
    
  • google-circle-fill
    
  • vertical-align-top
    
  • dingtalk-circle-fill
    
  • download
    
  • sketch-circle-fill
    
  • sort-descending
    
  • slack-circle-fill
    
  • sort-ascending
    
  • twitter-circle-fill
    
  • fall
    
  • taobao-circle-fill
    
  • swap
    
  • weibo-circle-fill
    
  • stock
    
  • zhihu-circle-fill
    
  • rise
    
  • reddit-circle-fill
    
  • indent
    
  • alipay-square-fill
    
  • outdent
    
  • dingtalk-square-fill
    
  • menu
    
  • CodeSandbox-square-f
    
  • unordered list
    
  • behance-square-fill
    
  • ordered list
    
  • amazon-square-fill
    
  • align-right
    
  • codepen-square-fill
    
  • align-center
    
  • dribbble-square-fill
    
  • align-left
    
  • dropbox-square-fill
    
  • pic-center
    
  • facebook-fill
    
  • pic-right
    
  • google plus-square-f
    
  • pic-left
    
  • google-square-fill
    
  • bold
    
  • instagram-fill
    
  • font-colors
    
  • IE-square-fill
    
  • exclaimination
    
  • medium-square-fill
    
  • check-circle
    
  • font-size
    
  • linkedin-fill
    
  • CI
    
  • infomation
    
  • QQ-square-fill
    
  • Dollar
    
  • line-height
    
  • 
    reddit-square-fill
    
  • compass
    
  • strikethrough
    
  • twitter-square-fill
    
  • close-circle
    
  • underline
    
  • sketch-square-fill
    
  • frown
    
  • number
    
  • slack-square-fill
    
  • info-circle
    
  • italic
    
  • taobao-square-fill
    
  • left-circle
    
  • code
    
  • weibo-square-fill
    
  • down-circle
    
  • column-width
    
  • zhihu-square-fill
    
  • EURO
    
  • check
    
  • zoom out
    
  • copyright
    
  • ellipsis
    
  • apartment
    
  • minus-circle
    
  • dash
    
  • audio
    
  • meh
    
  • close
    
  • audio-fill
    
  • plus-circle
    
  • enter
    
  • robot
    
  • play-circle
    
  • line
    
  • zoom in
    
  • question-circle
    
  • minus
    
  • robot-fill
    
  • Pound
    
  • question
    
  • bug-fill
    
  • right-circle
    
  • rollback
    
  • bug
    
  • smile
    
  • small-dash
    
  • audio static
    
  • trademark
    
  • pause
    
  • comment
    
  • time-circle
    
  • bg-colors
    
  • signal-fill
    
  • time out
    
  • crown
    
  • verified
    
  • earth
    
  • drag
    
  • shortcut-fill
    
  • YUAN
    
  • desktop
    
  • videocamera add
    
  • up-circle
    
  • gift
    
  • switch user
    
  • warning-circle
    
  • stop
    
  • whatsapp
    
  • sync
    
  • fire
    
  • appstore add
    
  • transaction
    
  • thunderbolt
    
  • caret-down
    
  • undo
    
  • check-circle-fill
    
  • backward
    
  • redo
    
  • left-circle-fill
    
  • caret-up
    
  • reload
    
  • down-circle-fill
    
  • caret-right
    
  • reload time
    
  • minus-circle-fill
    
  • caret-left
    
  • message
    
  • close-circle-fill
    
  • fast-backward
    
  • dashboard
    
  • info-circle-fill
    
  • forward
    
  • issues close
    
  • up-circle-fill
    
  • fast-forward
    
  • poweroff
    
  • right-circle-fill
    
  • search
    
  • logout
    
  • plus-circle-fill
    
  • retweet
    
  • pie chart
    
  • question-circle-fill
    
  • login
    
  • setting
    
  • EURO-circle-fill
    
  • step-backward
    
  • eye
    
  • frown-fill
    
  • step-forward
    
  • location
    
  • copyright-circle-fil
    
  • swap-right
    
  • edit-square
    
  • CI-circle-fill
    
  • swap-left
    
  • export
    
  • compass-fill
    
  • woman
    
  • save
    
  • Dollar-circle-fill
    
  • plus
    
  • Import
    
  • poweroff-circle-fill
    
  • eye close-fill
    
  • app store
    
  • meh-fill
    
  • eye-close
    
  • close-square
    
  • play-circle-fill
    
  • clear
    
  • down-square
    
  • Pound-circle-fill
    
  • collapse
    
  • layout
    
  • smile-fill
    
  • expand
    
  • left-square
    
  • stop-fill
    
  • delete column
    
  • play-square
    
  • warning-circle-fill
    
  • merge-cells
    
  • control
    
  • time-circle-fill
    
  • subnode
    
  • code library
    
  • trademark-circle-fil
    
  • rotate-left
    
  • detail
    
  • YUAN-circle-fill
    
  • rotate-right
    
  • minus-square
    
  • heart-fill
    
  • insert row below
    
  • plus-square
    
  • pie chart-circle-fil
    
  • insert row above
    
  • right-square
    
  • dashboard-fill
    
  • table
    
  • project
    
  • message-fill
    
  • solit-cells
    
  • wallet
    
  • check-square-fill
    
  • format painter
    
  • up-square
    
  • down-square-fill
    
  • insert row right
    
  • calculator
    
  • minus-square-fill
    
  • format painter-fill
    
  • interation
    
  • close-square-fill
    
  • insert row left
    
  • check-square
    
  • code library-fill
    
  • translate
    
  • border
    
  • left-square-fill
    
  • delete row
    
  • border-outer
    
  • play-square-fill
    
  • sisternode
    
  • border-top
    
  • up-square-fill
    
  • Field-number
    
  • border-bottom
    
  • right-square-fill
    
  • 
    Field-String
    
  • border-left
    
  • plus-square-fill
    
  • Function
    
  • border-right
    
  • account book-fill
    
  • Field-time
    
  • border-inner
    
  • carry out-fill
    
  • GIF
    
  • border-verticle
    
  • calendar-fill
    
  • Partition
    
  • border-horizontal
    
  • calculator-fill
    
  • index
    
  • radius-bottomleft
    
  • interation-fill
    
  • Stored procedure
    
  • radius-bottomright
    
  • project-fill
    
  • Field-Binary
    
  • radius-upleft
    
  • detail-fill
    
  • Console-SQL
    
  • radius-upright
    
  • save-fill
    
  • 1:1
    
  • radius-setting
    
  • wallet-fill
    
  • aim
    
  • add user
    
  • control-fill
    
  • compress
    
  • delete team
    
  • layout-fill
    
  • expend
    
  • delete user
    
  • app store-fill
    
  • folder-view
    
  • addteam
    
  • mobile-fill
    
  • file-GIF
    
  • user
    
  • tablet-fill
    
  • group
    
  • team
    
  • book-fill
    
  • send
    
  • area chart
    
  • red envelope-fill
    
  • Report
    
  • line chart
    
  • safety certificate-f
    
  • View
    
  • bar chart
    
  • property safety-fill
    
  • shortcut
    
  • point map
    
  • insurance-fill
    
  • ungroup
    
  • container
    
  • security scan-fill
    
  • database
    
  • file-exclamation-fil
    
  • sever
    
  • file-add-fill
    
  • mobile
    
  • file-fill
    
  • tablet
    
  • file-excel-fill
    
  • red envelope
    
  • file-markdown-fill
    
  • book
    
  • file-text-fill
    
  • file done
    
  • file-ppt-fill
    
  • reconciliation
    
  • file-unknown-fill
    
  • file -exception
    
  • file-word-fill
    
  • file sync
    
  • file-zip-fill
    
  • file search
    
  • file-pdf-fill
    
  • solution
    
  • file-image-fill
    
  • file protect
    
  • diff-fill
    
  • file-add
    
  • file-copy-fill
    
  • file-excel
    
  • snippets-fill
    
  • file-exclamation
    
  • batch folding-fill
    
  • file-pdf
    
  • reconciliation-fill
    
  • file-image
    
  • folder-add-fill
    
  • file-markdown
    
  • folder-fill
    
  • file-unknown
    
  • folder-open-fill
    
  • file-ppt
    
  • database-fill
    
  • file-word
    
  • container-fill
    
  • file
    
  • sever-fill
    
  • file-zip
    
  • calendar-check-fill
    
  • check-small
    
  • file-text
    
  • image-fill
    
  • file-copy
    
  • id card-fill
    
  • snippets
    
  • credit card-fill
    
  • audit
    
  • fund-fill
    
  • diff
    
  • read-fill
    
  • Batch folding
    
  • contacts-fill
    
  • security scan
    
  • delete-fill
    
  • property safety
    
  • notification-fill
    
  • safety certificate
    
  • flag-fill
    
  • insurance
    
  • money collect-fill
    
  • alert
    
  • medicine box-fill
    
  • delete
    
  • rest-fill
    
  • hourglass
    
  • shopping-fill
    
  • bulb
    
  • skin-fill
    
  • experiment
    
  • video-fill
    
  • bell
    
  • sound-fill
    
  • trophy
    
  • bulb-fill
    
  • rest
    
  • bell-fill
    
  • USB
    
  • filter-fill
    
  • skin
    
  • fire-fill
    
  • home
    
  • funnel plot-fill
    
  • bank
    
  • gift-fill
    
  • filter
    
  • hourglass-fill
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

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

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

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

<span class="z-icon">&#x33;</span>

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

  • down-big
    .z-icon-down-big
  • left-big
    .z-icon-left-big
  • up-big
    .z-icon-up-big
  • right-big
    .z-icon-right-big
  • moon
    .z-icon-moon
  • sun
    .z-icon-sun
  • delete-key
    .z-icon-delete-key
  • miniprogram-fill
    .z-icon-miniprogram-fill
  • hide-key
    .z-icon-hide-key
  • miniprogram
    .z-icon-miniprogram
  • funnel plot
    .z-icon-funnelplot
  • home-fill
    .z-icon-home-fill
  • like
    .z-icon-like
  • trophy-fill
    .z-icon-trophy-fill
  • unlike
    .z-icon-unlike
  • location-fill
    .z-icon-location-fill
  • unlock
    .z-icon-unlock
  • cloud-fill
    .z-icon-cloud-fill
  • lock
    .z-icon-lock
  • customerservice-fill
    .z-icon-customerservice-fill
  • customerservice
    .z-icon-customerservice
  • experiment-fill
    .z-icon-experiment-fill
  • flag
    .z-icon-flag
  • eye-fill
    .z-icon-eye-fill
  • money collect
    .z-icon-moneycollect
  • like-fill
    .z-icon-like-fill
  • medicinebox
    .z-icon-medicinebox
  • lock-fill
    .z-icon-lock-fill
  • shop
    .z-icon-shop
  • unlike-fill
    .z-icon-unlike-fill
  • rocket
    .z-icon-rocket
  • star-fill
    .z-icon-star-fill
  • shopping
    .z-icon-shopping
  • unlock-fill
    .z-icon-unlock-fill
  • folder
    .z-icon-folder
  • alert-fill
    .z-icon-alert-fill
  • folder-open
    .z-icon-folder-open
  • api-fill
    .z-icon-api-fill
  • folder-add
    .z-icon-folder-add
  • highlight-fill
    .z-icon-highlight-fill
  • deployment unit
    .z-icon-deploymentunit
  • phone-fill
    .z-icon-phone-fill
  • account book
    .z-icon-accountbook
  • edit-fill
    .z-icon-edit-fill
  • contacts
    .z-icon-contacts
  • pushpin-fill
    .z-icon-pushpin-fill
  • carry out
    .z-icon-carryout
  • rocket-fill
    .z-icon-rocket-fill
  • calendar-check
    .z-icon-calendar-check
  • thunderbolt-fill
    .z-icon-thunderbolt-fill
  • calendar
    .z-icon-calendar
  • tag-fill
    .z-icon-tag-fill
  • scan
    .z-icon-scan
  • wrench-fill
    .z-icon-wrench-fill
  • select
    .z-icon-select
  • tags-fill
    .z-icon-tags-fill
  • box plot
    .z-icon-boxplot
  • bank-fill
    .z-icon-bank-fill
  • build
    .z-icon-build
  • camera-fill
    .z-icon-camera-fill
  • sliders
    .z-icon-sliders
  • error-fill
    .z-icon-error-fill
  • laptop
    .z-icon-laptop
  • crown-fill
    .z-icon-crown-fill
  • barcode
    .z-icon-barcode
  • mail-fill
    .z-icon-mail-fill
  • camera
    .z-icon-camera
  • car-fill
    .z-icon-car-fill
  • cluster
    .z-icon-cluster
  • printer-fill
    .z-icon-printer-fill
  • gateway
    .z-icon-gateway
  • shop-fill
    .z-icon-shop-fill
  • car
    .z-icon-car
  • setting-fill
    .z-icon-setting-fill
  • printer
    .z-icon-printer
  • USB-fill
    .z-icon-USB-fill
  • read
    .z-icon-read
  • golden-fill
    .z-icon-golden-fill
  • cloud-server
    .z-icon-cloud-server
  • build-fill
    .z-icon-build-fill
  • cloud-upload
    .z-icon-cloud-upload
  • box plot-fill
    .z-icon-boxplot-fill
  • cloud
    .z-icon-cloud
  • sliders-fill
    .z-icon-sliders-fill
  • cloud-download
    .z-icon-cloud-download
  • alibaba
    .z-icon-alibaba
  • cloud-sync
    .z-icon-cloud-sync
  • ant design
    .z-icon-antdesign
  • video
    .z-icon-video
  • ant-cloud
    .z-icon-ant-cloud
  • notification
    .z-icon-notification
  • behance
    .z-icon-behance
  • sound
    .z-icon-sound
  • google plus
    .z-icon-googleplus
  • radar chart
    .z-icon-radarchart
  • medium
    .z-icon-medium
  • qrcode
    .z-icon-qrcode
  • google
    .z-icon-google
  • fund
    .z-icon-fund
  • IE
    .z-icon-IE
  • image
    .z-icon-image
  • amazon
    .z-icon-amazon
  • mail
    .z-icon-mail
  • slack
    .z-icon-slack
  • table
    .z-icon-table
  • alipay
    .z-icon-alipay
  • id card
    .z-icon-idcard
  • taobao
    .z-icon-taobao
  • credit card
    .z-icon-creditcard
  • zhihu
    .z-icon-zhihu
  • heart
    .z-icon-heart
  • HTML5
    .z-icon-HTML
  • block
    .z-icon-block
  • linkedin
    .z-icon-linkedin
  • error
    .z-icon-error
  • yahoo
    .z-icon-yahoo
  • star
    .z-icon-star
  • facebook
    .z-icon-facebook
  • gold
    .z-icon-gold
  • skype
    .z-icon-skype
  • heat map
    .z-icon-heatmap
  • CodeSandbox
    .z-icon-CodeSandbox
  • wifi
    .z-icon-wifi
  • chrome
    .z-icon-chrome
  • attachment
    .z-icon-attachment
  • codepen
    .z-icon-codepen
  • edit
    .z-icon-edit
  • aliwangwang
    .z-icon-aliwangwang
  • key
    .z-icon-key
  • apple
    .z-icon-apple
  • api
    .z-icon-api
  • android
    .z-icon-android
  • disconnect
    .z-icon-disconnect
  • sketch
    .z-icon-sketch
  • highlight
    .z-icon-highlight
  • Gitlab
    .z-icon-Gitlab
  • monitor
    .z-icon-monitor
  • dribbble
    .z-icon-dribbble
  • link
    .z-icon-link
  • instagram
    .z-icon-instagram
  • man
    .z-icon-man
  • reddit
    .z-icon-reddit
  • percentage
    .z-icon-percentage
  • windows
    .z-icon-windows
  • pushpin
    .z-icon-pushpin
  • yuque
    .z-icon-yuque
  • phone
    .z-icon-phone
  • Youtube
    .z-icon-Youtube
  • shake
    .z-icon-shake
  • Gitlab-fill
    .z-icon-Gitlab-fill
  • tag
    .z-icon-tag
  • dropbox
    .z-icon-dropbox
  • wrench
    .z-icon-wrench
  • dingtalk
    .z-icon-dingtalk
  • tags
    .z-icon-tags
  • android-fill
    .z-icon-android-fill
  • scissor
    .z-icon-scissor
  • apple-fill
    .z-icon-apple-fill
  • mr
    .z-icon-mr
  • HTML5-fill
    .z-icon-HTML-fill
  • share
    .z-icon-share
  • windows-fill
    .z-icon-windows-fill
  • branches
    .z-icon-branches
  • QQ
    .z-icon-QQ
  • fork
    .z-icon-fork
  • twitter
    .z-icon-twitter
  • shrink
    .z-icon-shrink
  • skype-fill
    .z-icon-skype-fill
  • arrawsalt
    .z-icon-arrawsalt
  • weibo
    .z-icon-weibo
  • vertical right
    .z-icon-verticalright
  • yuque-fill
    .z-icon-yuque-fill
  • vertical left
    .z-icon-verticalleft
  • Youtube-fill
    .z-icon-Youtube-fill
  • right
    .z-icon-right
  • yahoo-fill
    .z-icon-yahoo-fill
  • left
    .z-icon-left
  • wechat-fill
    .z-icon-wechat-fill
  • up
    .z-icon-up
  • chrome-fill
    .z-icon-chrome-fill
  • down
    .z-icon-down
  • alipay-circle-fill
    .z-icon-alipay-circle-fill
  • fullscreen
    .z-icon-fullscreen
  • aliwangwang-fill
    .z-icon-aliwangwang-fill
  • fullscreen-exit
    .z-icon-fullscreen-exit
  • behance-circle-fill
    .z-icon-behance-circle-fill
  • doubleleft
    .z-icon-doubleleft
  • amazon-circle-fill
    .z-icon-amazon-circle-fill
  • double right
    .z-icon-doubleright
  • codepen-circle-fill
    .z-icon-codepen-circle-fill
  • arrowright
    .z-icon-arrowright
  • CodeSandbox-circle-f
    .z-icon-CodeSandbox-circle-f
  • arrowup
    .z-icon-arrowup
  • dropbox-circle-fill
    .z-icon-dropbox-circle-fill
  • arrowleft
    .z-icon-arrowleft
  • github-fill
    .z-icon-github-fill
  • arrowdown
    .z-icon-arrowdown
  • dribbble-circle-fill
    .z-icon-dribbble-circle-fill
  • upload
    .z-icon-upload
  • google plus-circle-f
    .z-icon-googleplus-circle-f
  • colum-height
    .z-icon-colum-height
  • medium-circle-fill
    .z-icon-medium-circle-fill
  • vertical-align-botto
    .z-icon-vertical-align-botto
  • QQ-circle-fill
    .z-icon-QQ-circle-fill
  • vertical-align-middl
    .z-icon-vertical-align-middl
  • IE-circle-fill
    .z-icon-IE-circle-fill
  • totop
    .z-icon-totop
  • google-circle-fill
    .z-icon-google-circle-fill
  • vertical-align-top
    .z-icon-vertical-align-top
  • dingtalk-circle-fill
    .z-icon-dingtalk-circle-fill
  • download
    .z-icon-download
  • sketch-circle-fill
    .z-icon-sketch-circle-fill
  • sort-descending
    .z-icon-sort-descending
  • slack-circle-fill
    .z-icon-slack-circle-fill
  • sort-ascending
    .z-icon-sort-ascending
  • twitter-circle-fill
    .z-icon-twitter-circle-fill
  • fall
    .z-icon-fall
  • taobao-circle-fill
    .z-icon-taobao-circle-fill
  • swap
    .z-icon-swap
  • weibo-circle-fill
    .z-icon-weibo-circle-fill
  • stock
    .z-icon-stock
  • zhihu-circle-fill
    .z-icon-zhihu-circle-fill
  • rise
    .z-icon-rise
  • reddit-circle-fill
    .z-icon-reddit-circle-fill
  • indent
    .z-icon-indent
  • alipay-square-fill
    .z-icon-alipay-square-fill
  • outdent
    .z-icon-outdent
  • dingtalk-square-fill
    .z-icon-dingtalk-square-fill
  • menu
    .z-icon-menu
  • CodeSandbox-square-f
    .z-icon-CodeSandbox-square-f
  • unordered list
    .z-icon-unorderedlist
  • behance-square-fill
    .z-icon-behance-square-fill
  • ordered list
    .z-icon-orderedlist
  • amazon-square-fill
    .z-icon-amazon-square-fill
  • align-right
    .z-icon-align-right
  • codepen-square-fill
    .z-icon-codepen-square-fill
  • align-center
    .z-icon-align-center
  • dribbble-square-fill
    .z-icon-dribbble-square-fill
  • align-left
    .z-icon-align-left
  • dropbox-square-fill
    .z-icon-dropbox-square-fill
  • pic-center
    .z-icon-pic-center
  • facebook-fill
    .z-icon-facebook-fill
  • pic-right
    .z-icon-pic-right
  • google plus-square-f
    .z-icon-googleplus-square-f
  • pic-left
    .z-icon-pic-left
  • google-square-fill
    .z-icon-google-square-fill
  • bold
    .z-icon-bold
  • instagram-fill
    .z-icon-instagram-fill
  • font-colors
    .z-icon-font-colors
  • IE-square-fill
    .z-icon-IE-square-fill
  • exclaimination
    .z-icon-exclaimination
  • medium-square-fill
    .z-icon-medium-square-fill
  • check-circle
    .z-icon-check-circle
  • font-size
    .z-icon-font-size
  • linkedin-fill
    .z-icon-linkedin-fill
  • CI
    .z-icon-CI
  • infomation
    .z-icon-infomation
  • QQ-square-fill
    .z-icon-QQ-square-fill
  • Dollar
    .z-icon-Dollar
  • line-height
    .z-icon-line-height
  • reddit-square-fill
    .z-icon-reddit-square-fill
  • compass
    .z-icon-compass
  • strikethrough
    .z-icon-strikethrough
  • twitter-square-fill
    .z-icon-twitter-square-fill
  • close-circle
    .z-icon-close-circle
  • underline
    .z-icon-underline
  • sketch-square-fill
    .z-icon-sketch-square-fill
  • frown
    .z-icon-frown
  • number
    .z-icon-number
  • slack-square-fill
    .z-icon-slack-square-fill
  • info-circle
    .z-icon-info-circle
  • italic
    .z-icon-italic
  • taobao-square-fill
    .z-icon-taobao-square-fill
  • left-circle
    .z-icon-left-circle
  • code
    .z-icon-code
  • weibo-square-fill
    .z-icon-weibo-square-fill
  • down-circle
    .z-icon-down-circle
  • column-width
    .z-icon-column-width
  • zhihu-square-fill
    .z-icon-zhihu-square-fill
  • EURO
    .z-icon-EURO
  • check
    .z-icon-check
  • zoom out
    .z-icon-zoomout
  • copyright
    .z-icon-copyright
  • ellipsis
    .z-icon-ellipsis
  • apartment
    .z-icon-apartment
  • minus-circle
    .z-icon-minus-circle
  • dash
    .z-icon-dash
  • audio
    .z-icon-audio
  • meh
    .z-icon-meh
  • close
    .z-icon-close
  • audio-fill
    .z-icon-audio-fill
  • plus-circle
    .z-icon-plus-circle
  • enter
    .z-icon-enter
  • robot
    .z-icon-robot
  • play-circle
    .z-icon-play-circle
  • line
    .z-icon-line
  • zoom in
    .z-icon-zoomin
  • question-circle
    .z-icon-question-circle
  • minus
    .z-icon-minus
  • robot-fill
    .z-icon-robot-fill
  • Pound
    .z-icon-Pound
  • question
    .z-icon-question
  • bug-fill
    .z-icon-bug-fill
  • right-circle
    .z-icon-right-circle
  • rollback
    .z-icon-rollback
  • bug
    .z-icon-bug
  • smile
    .z-icon-smile
  • small-dash
    .z-icon-small-dash
  • audio static
    .z-icon-audiostatic
  • trademark
    .z-icon-trademark
  • pause
    .z-icon-pause
  • comment
    .z-icon-comment
  • time-circle
    .z-icon-time-circle
  • bg-colors
    .z-icon-bg-colors
  • signal-fill
    .z-icon-signal-fill
  • time out
    .z-icon-timeout
  • crown
    .z-icon-crown
  • verified
    .z-icon-verified
  • earth
    .z-icon-earth
  • drag
    .z-icon-drag
  • shortcut-fill
    .z-icon-shortcut-fill
  • YUAN
    .z-icon-YUAN
  • desktop
    .z-icon-desktop
  • videocamera add
    .z-icon-videocameraadd
  • up-circle
    .z-icon-up-circle
  • gift
    .z-icon-gift
  • switch user
    .z-icon-switchuser
  • warning-circle
    .z-icon-warning-circle
  • stop
    .z-icon-stop
  • whatsapp
    .z-icon-whatsapp
  • sync
    .z-icon-sync
  • fire
    .z-icon-fire
  • appstore add
    .z-icon-appstoreadd
  • transaction
    .z-icon-transaction
  • thunderbolt
    .z-icon-thunderbolt
  • caret-down
    .z-icon-caret-down
  • undo
    .z-icon-undo
  • check-circle-fill
    .z-icon-check-circle-fill
  • backward
    .z-icon-backward
  • redo
    .z-icon-redo
  • left-circle-fill
    .z-icon-left-circle-fill
  • caret-up
    .z-icon-caret-up
  • reload
    .z-icon-reload
  • down-circle-fill
    .z-icon-down-circle-fill
  • caret-right
    .z-icon-caret-right
  • reload time
    .z-icon-reloadtime
  • minus-circle-fill
    .z-icon-minus-circle-fill
  • caret-left
    .z-icon-caret-left
  • message
    .z-icon-message
  • close-circle-fill
    .z-icon-close-circle-fill
  • fast-backward
    .z-icon-fast-backward
  • dashboard
    .z-icon-dashboard
  • info-circle-fill
    .z-icon-info-circle-fill
  • forward
    .z-icon-forward
  • issues close
    .z-icon-issuesclose
  • up-circle-fill
    .z-icon-up-circle-fill
  • fast-forward
    .z-icon-fast-forward
  • poweroff
    .z-icon-poweroff
  • right-circle-fill
    .z-icon-right-circle-fill
  • search
    .z-icon-search
  • logout
    .z-icon-logout
  • plus-circle-fill
    .z-icon-plus-circle-fill
  • retweet
    .z-icon-retweet
  • pie chart
    .z-icon-piechart
  • question-circle-fill
    .z-icon-question-circle-fill
  • login
    .z-icon-login
  • setting
    .z-icon-setting
  • EURO-circle-fill
    .z-icon-EURO-circle-fill
  • step-backward
    .z-icon-step-backward
  • eye
    .z-icon-eye
  • frown-fill
    .z-icon-frown-fill
  • step-forward
    .z-icon-step-forward
  • location
    .z-icon-location
  • copyright-circle-fil
    .z-icon-copyright-circle-fil
  • swap-right
    .z-icon-swap-right
  • edit-square
    .z-icon-edit-square
  • CI-circle-fill
    .z-icon-CI-circle-fill
  • swap-left
    .z-icon-swap-left
  • export
    .z-icon-export
  • compass-fill
    .z-icon-compass-fill
  • woman
    .z-icon-woman
  • save
    .z-icon-save
  • Dollar-circle-fill
    .z-icon-Dollar-circle-fill
  • plus
    .z-icon-plus
  • Import
    .z-icon-Import
  • poweroff-circle-fill
    .z-icon-poweroff-circle-fill
  • eye close-fill
    .z-icon-eyeclose-fill
  • app store
    .z-icon-appstore
  • meh-fill
    .z-icon-meh-fill
  • eye-close
    .z-icon-eye-close
  • close-square
    .z-icon-close-square
  • play-circle-fill
    .z-icon-play-circle-fill
  • clear
    .z-icon-clear
  • down-square
    .z-icon-down-square
  • Pound-circle-fill
    .z-icon-Pound-circle-fill
  • collapse
    .z-icon-collapse
  • layout
    .z-icon-layout
  • smile-fill
    .z-icon-smile-fill
  • expand
    .z-icon-expand
  • left-square
    .z-icon-left-square
  • stop-fill
    .z-icon-stop-fill
  • delete column
    .z-icon-deletecolumn
  • play-square
    .z-icon-play-square
  • warning-circle-fill
    .z-icon-warning-circle-fill
  • merge-cells
    .z-icon-merge-cells
  • control
    .z-icon-control
  • time-circle-fill
    .z-icon-time-circle-fill
  • subnode
    .z-icon-subnode
  • code library
    .z-icon-codelibrary
  • trademark-circle-fil
    .z-icon-trademark-circle-fil
  • rotate-left
    .z-icon-rotate-left
  • detail
    .z-icon-detail
  • YUAN-circle-fill
    .z-icon-YUAN-circle-fill
  • rotate-right
    .z-icon-rotate-right
  • minus-square
    .z-icon-minus-square
  • heart-fill
    .z-icon-heart-fill
  • insert row below
    .z-icon-insertrowbelow
  • plus-square
    .z-icon-plus-square
  • pie chart-circle-fil
    .z-icon-piechart-circle-fil
  • insert row above
    .z-icon-insertrowabove
  • right-square
    .z-icon-right-square
  • dashboard-fill
    .z-icon-dashboard-fill
  • table
    .z-icon-table1
  • project
    .z-icon-project
  • message-fill
    .z-icon-message-fill
  • solit-cells
    .z-icon-solit-cells
  • wallet
    .z-icon-wallet
  • check-square-fill
    .z-icon-check-square-fill
  • format painter
    .z-icon-formatpainter
  • up-square
    .z-icon-up-square
  • down-square-fill
    .z-icon-down-square-fill
  • insert row right
    .z-icon-insertrowright
  • calculator
    .z-icon-calculator
  • minus-square-fill
    .z-icon-minus-square-fill
  • format painter-fill
    .z-icon-formatpainter-fill
  • interation
    .z-icon-interation
  • close-square-fill
    .z-icon-close-square-fill
  • insert row left
    .z-icon-insertrowleft
  • check-square
    .z-icon-check-square
  • code library-fill
    .z-icon-codelibrary-fill
  • translate
    .z-icon-translate
  • border
    .z-icon-border
  • left-square-fill
    .z-icon-left-square-fill
  • delete row
    .z-icon-deleterow
  • border-outer
    .z-icon-border-outer
  • play-square-fill
    .z-icon-play-square-fill
  • sisternode
    .z-icon-sisternode
  • border-top
    .z-icon-border-top
  • up-square-fill
    .z-icon-up-square-fill
  • Field-number
    .z-icon-Field-number
  • border-bottom
    .z-icon-border-bottom
  • right-square-fill
    .z-icon-right-square-fill
  • Field-String
    .z-icon-Field-String
  • border-left
    .z-icon-border-left
  • plus-square-fill
    .z-icon-plus-square-fill
  • Function
    .z-icon-Function
  • border-right
    .z-icon-border-right
  • account book-fill
    .z-icon-accountbook-fill
  • Field-time
    .z-icon-Field-time
  • border-inner
    .z-icon-border-inner
  • carry out-fill
    .z-icon-carryout-fill
  • GIF
    .z-icon-GIF
  • border-verticle
    .z-icon-border-verticle
  • calendar-fill
    .z-icon-calendar-fill
  • Partition
    .z-icon-Partition
  • border-horizontal
    .z-icon-border-horizontal
  • calculator-fill
    .z-icon-calculator-fill
  • index
    .z-icon-index
  • radius-bottomleft
    .z-icon-radius-bottomleft
  • interation-fill
    .z-icon-interation-fill
  • Stored procedure
    .z-icon-Storedprocedure
  • radius-bottomright
    .z-icon-radius-bottomright
  • project-fill
    .z-icon-project-fill
  • Field-Binary
    .z-icon-Field-Binary
  • radius-upleft
    .z-icon-radius-upleft
  • detail-fill
    .z-icon-detail-fill
  • Console-SQL
    .z-icon-Console-SQL
  • radius-upright
    .z-icon-radius-upright
  • save-fill
    .z-icon-save-fill
  • 1:1
    .z-icon-icon-test
  • radius-setting
    .z-icon-radius-setting
  • wallet-fill
    .z-icon-wallet-fill
  • aim
    .z-icon-aim
  • add user
    .z-icon-adduser
  • control-fill
    .z-icon-control-fill
  • compress
    .z-icon-compress
  • delete team
    .z-icon-deleteteam
  • layout-fill
    .z-icon-layout-fill
  • expend
    .z-icon-expend
  • delete user
    .z-icon-deleteuser
  • app store-fill
    .z-icon-appstore-fill
  • folder-view
    .z-icon-folder-view
  • addteam
    .z-icon-addteam
  • mobile-fill
    .z-icon-mobile-fill
  • file-GIF
    .z-icon-file-GIF
  • user
    .z-icon-user
  • tablet-fill
    .z-icon-tablet-fill
  • group
    .z-icon-group
  • team
    .z-icon-team
  • book-fill
    .z-icon-book-fill
  • send
    .z-icon-send
  • area chart
    .z-icon-areachart
  • red envelope-fill
    .z-icon-redenvelope-fill
  • Report
    .z-icon-Report
  • line chart
    .z-icon-linechart
  • safety certificate-f
    .z-icon-safetycertificate-f
  • View
    .z-icon-View
  • bar chart
    .z-icon-barchart
  • property safety-fill
    .z-icon-propertysafety-fill
  • shortcut
    .z-icon-shortcut
  • point map
    .z-icon-pointmap
  • insurance-fill
    .z-icon-insurance-fill
  • ungroup
    .z-icon-ungroup
  • container
    .z-icon-container
  • security scan-fill
    .z-icon-securityscan-fill
  • database
    .z-icon-database
  • file-exclamation-fil
    .z-icon-file-exclamation-fil
  • sever
    .z-icon-sever
  • file-add-fill
    .z-icon-file-add-fill
  • mobile
    .z-icon-mobile
  • file-fill
    .z-icon-file-fill
  • tablet
    .z-icon-tablet
  • file-excel-fill
    .z-icon-file-excel-fill
  • red envelope
    .z-icon-redenvelope
  • file-markdown-fill
    .z-icon-file-markdown-fill
  • book
    .z-icon-book
  • file-text-fill
    .z-icon-file-text-fill
  • file done
    .z-icon-filedone
  • file-ppt-fill
    .z-icon-file-ppt-fill
  • reconciliation
    .z-icon-reconciliation
  • file-unknown-fill
    .z-icon-file-unknown-fill
  • file -exception
    .z-icon-file-exception
  • file-word-fill
    .z-icon-file-word-fill
  • file sync
    .z-icon-filesync
  • file-zip-fill
    .z-icon-file-zip-fill
  • file search
    .z-icon-filesearch
  • file-pdf-fill
    .z-icon-file-pdf-fill
  • solution
    .z-icon-solution
  • file-image-fill
    .z-icon-file-image-fill
  • file protect
    .z-icon-fileprotect
  • diff-fill
    .z-icon-diff-fill
  • file-add
    .z-icon-file-add
  • file-copy-fill
    .z-icon-file-copy-fill
  • file-excel
    .z-icon-file-excel
  • snippets-fill
    .z-icon-snippets-fill
  • file-exclamation
    .z-icon-file-exclamation
  • batch folding-fill
    .z-icon-batchfolding-fill
  • file-pdf
    .z-icon-file-pdf
  • reconciliation-fill
    .z-icon-reconciliation-fill
  • file-image
    .z-icon-file-image
  • folder-add-fill
    .z-icon-folder-add-fill
  • file-markdown
    .z-icon-file-markdown
  • folder-fill
    .z-icon-folder-fill
  • file-unknown
    .z-icon-file-unknown
  • folder-open-fill
    .z-icon-folder-open-fill
  • file-ppt
    .z-icon-file-ppt
  • database-fill
    .z-icon-database-fill
  • file-word
    .z-icon-file-word
  • container-fill
    .z-icon-container-fill
  • file
    .z-icon-file
  • sever-fill
    .z-icon-sever-fill
  • file-zip
    .z-icon-file-zip
  • calendar-check-fill
    .z-icon-calendar-check-fill
  • check-small
    .z-icon-check-small
  • file-text
    .z-icon-file-text
  • image-fill
    .z-icon-image-fill
  • file-copy
    .z-icon-file-copy
  • id card-fill
    .z-icon-idcard-fill
  • snippets
    .z-icon-snippets
  • credit card-fill
    .z-icon-creditcard-fill
  • audit
    .z-icon-audit
  • fund-fill
    .z-icon-fund-fill
  • diff
    .z-icon-diff
  • read-fill
    .z-icon-read-fill
  • Batch folding
    .z-icon-Batchfolding
  • contacts-fill
    .z-icon-contacts-fill
  • security scan
    .z-icon-securityscan
  • delete-fill
    .z-icon-delete-fill
  • property safety
    .z-icon-propertysafety
  • notification-fill
    .z-icon-notification-fill
  • safety certificate
    .z-icon-safetycertificate
  • flag-fill
    .z-icon-flag-fill
  • insurance
    .z-icon-insurance
  • money collect-fill
    .z-icon-moneycollect-fill
  • alert
    .z-icon-alert
  • medicine box-fill
    .z-icon-medicinebox-fill
  • delete
    .z-icon-delete
  • rest-fill
    .z-icon-rest-fill
  • hourglass
    .z-icon-hourglass
  • shopping-fill
    .z-icon-shopping-fill
  • bulb
    .z-icon-bulb
  • skin-fill
    .z-icon-skin-fill
  • experiment
    .z-icon-experiment
  • video-fill
    .z-icon-video-fill
  • bell
    .z-icon-bell
  • sound-fill
    .z-icon-sound-fill
  • trophy
    .z-icon-trophy
  • bulb-fill
    .z-icon-bulb-fill
  • rest
    .z-icon-rest
  • bell-fill
    .z-icon-bell-fill
  • USB
    .z-icon-USB
  • filter-fill
    .z-icon-filter-fill
  • skin
    .z-icon-skin
  • fire-fill
    .z-icon-fire-fill
  • home
    .z-icon-home
  • funnel plot-fill
    .z-icon-funnelplot-fill
  • bank
    .z-icon-bank
  • gift-fill
    .z-icon-gift-fill
  • filter
    .z-icon-filter
  • hourglass-fill
    .z-icon-hourglass-fill

font-class 引用


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

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

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

使用步骤如下:

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

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

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

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

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

  • down-big
    #z-icon-down-big
  • left-big
    #z-icon-left-big
  • up-big
    #z-icon-up-big
  • right-big
    #z-icon-right-big
  • moon
    #z-icon-moon
  • sun
    #z-icon-sun
  • delete-key
    #z-icon-delete-key
  • miniprogram-fill
    #z-icon-miniprogram-fill
  • hide-key
    #z-icon-hide-key
  • miniprogram
    #z-icon-miniprogram
  • funnel plot
    #z-icon-funnelplot
  • home-fill
    #z-icon-home-fill
  • like
    #z-icon-like
  • trophy-fill
    #z-icon-trophy-fill
  • unlike
    #z-icon-unlike
  • location-fill
    #z-icon-location-fill
  • unlock
    #z-icon-unlock
  • cloud-fill
    #z-icon-cloud-fill
  • lock
    #z-icon-lock
  • customerservice-fill
    #z-icon-customerservice-fill
  • customerservice
    #z-icon-customerservice
  • experiment-fill
    #z-icon-experiment-fill
  • flag
    #z-icon-flag
  • eye-fill
    #z-icon-eye-fill
  • money collect
    #z-icon-moneycollect
  • like-fill
    #z-icon-like-fill
  • medicinebox
    #z-icon-medicinebox
  • lock-fill
    #z-icon-lock-fill
  • shop
    #z-icon-shop
  • unlike-fill
    #z-icon-unlike-fill
  • rocket
    #z-icon-rocket
  • star-fill
    #z-icon-star-fill
  • shopping
    #z-icon-shopping
  • unlock-fill
    #z-icon-unlock-fill
  • folder
    #z-icon-folder
  • alert-fill
    #z-icon-alert-fill
  • folder-open
    #z-icon-folder-open
  • api-fill
    #z-icon-api-fill
  • folder-add
    #z-icon-folder-add
  • highlight-fill
    #z-icon-highlight-fill
  • deployment unit
    #z-icon-deploymentunit
  • phone-fill
    #z-icon-phone-fill
  • account book
    #z-icon-accountbook
  • edit-fill
    #z-icon-edit-fill
  • contacts
    #z-icon-contacts
  • pushpin-fill
    #z-icon-pushpin-fill
  • carry out
    #z-icon-carryout
  • rocket-fill
    #z-icon-rocket-fill
  • calendar-check
    #z-icon-calendar-check
  • thunderbolt-fill
    #z-icon-thunderbolt-fill
  • calendar
    #z-icon-calendar
  • tag-fill
    #z-icon-tag-fill
  • scan
    #z-icon-scan
  • wrench-fill
    #z-icon-wrench-fill
  • select
    #z-icon-select
  • tags-fill
    #z-icon-tags-fill
  • box plot
    #z-icon-boxplot
  • bank-fill
    #z-icon-bank-fill
  • build
    #z-icon-build
  • camera-fill
    #z-icon-camera-fill
  • sliders
    #z-icon-sliders
  • error-fill
    #z-icon-error-fill
  • laptop
    #z-icon-laptop
  • crown-fill
    #z-icon-crown-fill
  • barcode
    #z-icon-barcode
  • mail-fill
    #z-icon-mail-fill
  • camera
    #z-icon-camera
  • car-fill
    #z-icon-car-fill
  • cluster
    #z-icon-cluster
  • printer-fill
    #z-icon-printer-fill
  • gateway
    #z-icon-gateway
  • shop-fill
    #z-icon-shop-fill
  • car
    #z-icon-car
  • setting-fill
    #z-icon-setting-fill
  • printer
    #z-icon-printer
  • USB-fill
    #z-icon-USB-fill
  • read
    #z-icon-read
  • golden-fill
    #z-icon-golden-fill
  • cloud-server
    #z-icon-cloud-server
  • build-fill
    #z-icon-build-fill
  • cloud-upload
    #z-icon-cloud-upload
  • box plot-fill
    #z-icon-boxplot-fill
  • cloud
    #z-icon-cloud
  • sliders-fill
    #z-icon-sliders-fill
  • cloud-download
    #z-icon-cloud-download
  • alibaba
    #z-icon-alibaba
  • cloud-sync
    #z-icon-cloud-sync
  • ant design
    #z-icon-antdesign
  • video
    #z-icon-video
  • ant-cloud
    #z-icon-ant-cloud
  • notification
    #z-icon-notification
  • behance
    #z-icon-behance
  • sound
    #z-icon-sound
  • google plus
    #z-icon-googleplus
  • radar chart
    #z-icon-radarchart
  • medium
    #z-icon-medium
  • qrcode
    #z-icon-qrcode
  • google
    #z-icon-google
  • fund
    #z-icon-fund
  • IE
    #z-icon-IE
  • image
    #z-icon-image
  • amazon
    #z-icon-amazon
  • mail
    #z-icon-mail
  • slack
    #z-icon-slack
  • table
    #z-icon-table
  • alipay
    #z-icon-alipay
  • id card
    #z-icon-idcard
  • taobao
    #z-icon-taobao
  • credit card
    #z-icon-creditcard
  • zhihu
    #z-icon-zhihu
  • heart
    #z-icon-heart
  • HTML5
    #z-icon-HTML
  • block
    #z-icon-block
  • linkedin
    #z-icon-linkedin
  • error
    #z-icon-error
  • yahoo
    #z-icon-yahoo
  • star
    #z-icon-star
  • facebook
    #z-icon-facebook
  • gold
    #z-icon-gold
  • skype
    #z-icon-skype
  • heat map
    #z-icon-heatmap
  • CodeSandbox
    #z-icon-CodeSandbox
  • wifi
    #z-icon-wifi
  • chrome
    #z-icon-chrome
  • attachment
    #z-icon-attachment
  • codepen
    #z-icon-codepen
  • edit
    #z-icon-edit
  • aliwangwang
    #z-icon-aliwangwang
  • key
    #z-icon-key
  • apple
    #z-icon-apple
  • api
    #z-icon-api
  • android
    #z-icon-android
  • disconnect
    #z-icon-disconnect
  • sketch
    #z-icon-sketch
  • highlight
    #z-icon-highlight
  • Gitlab
    #z-icon-Gitlab
  • monitor
    #z-icon-monitor
  • dribbble
    #z-icon-dribbble
  • link
    #z-icon-link
  • instagram
    #z-icon-instagram
  • man
    #z-icon-man
  • reddit
    #z-icon-reddit
  • percentage
    #z-icon-percentage
  • windows
    #z-icon-windows
  • pushpin
    #z-icon-pushpin
  • yuque
    #z-icon-yuque
  • phone
    #z-icon-phone
  • Youtube
    #z-icon-Youtube
  • shake
    #z-icon-shake
  • Gitlab-fill
    #z-icon-Gitlab-fill
  • tag
    #z-icon-tag
  • dropbox
    #z-icon-dropbox
  • wrench
    #z-icon-wrench
  • dingtalk
    #z-icon-dingtalk
  • tags
    #z-icon-tags
  • android-fill
    #z-icon-android-fill
  • scissor
    #z-icon-scissor
  • apple-fill
    #z-icon-apple-fill
  • mr
    #z-icon-mr
  • HTML5-fill
    #z-icon-HTML-fill
  • share
    #z-icon-share
  • windows-fill
    #z-icon-windows-fill
  • branches
    #z-icon-branches
  • QQ
    #z-icon-QQ
  • fork
    #z-icon-fork
  • twitter
    #z-icon-twitter
  • shrink
    #z-icon-shrink
  • skype-fill
    #z-icon-skype-fill
  • arrawsalt
    #z-icon-arrawsalt
  • weibo
    #z-icon-weibo
  • vertical right
    #z-icon-verticalright
  • yuque-fill
    #z-icon-yuque-fill
  • vertical left
    #z-icon-verticalleft
  • Youtube-fill
    #z-icon-Youtube-fill
  • right
    #z-icon-right
  • yahoo-fill
    #z-icon-yahoo-fill
  • left
    #z-icon-left
  • wechat-fill
    #z-icon-wechat-fill
  • up
    #z-icon-up
  • chrome-fill
    #z-icon-chrome-fill
  • down
    #z-icon-down
  • alipay-circle-fill
    #z-icon-alipay-circle-fill
  • fullscreen
    #z-icon-fullscreen
  • aliwangwang-fill
    #z-icon-aliwangwang-fill
  • fullscreen-exit
    #z-icon-fullscreen-exit
  • behance-circle-fill
    #z-icon-behance-circle-fill
  • doubleleft
    #z-icon-doubleleft
  • amazon-circle-fill
    #z-icon-amazon-circle-fill
  • double right
    #z-icon-doubleright
  • codepen-circle-fill
    #z-icon-codepen-circle-fill
  • arrowright
    #z-icon-arrowright
  • CodeSandbox-circle-f
    #z-icon-CodeSandbox-circle-f
  • arrowup
    #z-icon-arrowup
  • dropbox-circle-fill
    #z-icon-dropbox-circle-fill
  • arrowleft
    #z-icon-arrowleft
  • github-fill
    #z-icon-github-fill
  • arrowdown
    #z-icon-arrowdown
  • dribbble-circle-fill
    #z-icon-dribbble-circle-fill
  • upload
    #z-icon-upload
  • google plus-circle-f
    #z-icon-googleplus-circle-f
  • colum-height
    #z-icon-colum-height
  • medium-circle-fill
    #z-icon-medium-circle-fill
  • vertical-align-botto
    #z-icon-vertical-align-botto
  • QQ-circle-fill
    #z-icon-QQ-circle-fill
  • vertical-align-middl
    #z-icon-vertical-align-middl
  • IE-circle-fill
    #z-icon-IE-circle-fill
  • totop
    #z-icon-totop
  • google-circle-fill
    #z-icon-google-circle-fill
  • vertical-align-top
    #z-icon-vertical-align-top
  • dingtalk-circle-fill
    #z-icon-dingtalk-circle-fill
  • download
    #z-icon-download
  • sketch-circle-fill
    #z-icon-sketch-circle-fill
  • sort-descending
    #z-icon-sort-descending
  • slack-circle-fill
    #z-icon-slack-circle-fill
  • sort-ascending
    #z-icon-sort-ascending
  • twitter-circle-fill
    #z-icon-twitter-circle-fill
  • fall
    #z-icon-fall
  • taobao-circle-fill
    #z-icon-taobao-circle-fill
  • swap
    #z-icon-swap
  • weibo-circle-fill
    #z-icon-weibo-circle-fill
  • stock
    #z-icon-stock
  • zhihu-circle-fill
    #z-icon-zhihu-circle-fill
  • rise
    #z-icon-rise
  • reddit-circle-fill
    #z-icon-reddit-circle-fill
  • indent
    #z-icon-indent
  • alipay-square-fill
    #z-icon-alipay-square-fill
  • outdent
    #z-icon-outdent
  • dingtalk-square-fill
    #z-icon-dingtalk-square-fill
  • menu
    #z-icon-menu
  • CodeSandbox-square-f
    #z-icon-CodeSandbox-square-f
  • unordered list
    #z-icon-unorderedlist
  • behance-square-fill
    #z-icon-behance-square-fill
  • ordered list
    #z-icon-orderedlist
  • amazon-square-fill
    #z-icon-amazon-square-fill
  • align-right
    #z-icon-align-right
  • codepen-square-fill
    #z-icon-codepen-square-fill
  • align-center
    #z-icon-align-center
  • dribbble-square-fill
    #z-icon-dribbble-square-fill
  • align-left
    #z-icon-align-left
  • dropbox-square-fill
    #z-icon-dropbox-square-fill
  • pic-center
    #z-icon-pic-center
  • facebook-fill
    #z-icon-facebook-fill
  • pic-right
    #z-icon-pic-right
  • google plus-square-f
    #z-icon-googleplus-square-f
  • pic-left
    #z-icon-pic-left
  • google-square-fill
    #z-icon-google-square-fill
  • bold
    #z-icon-bold
  • instagram-fill
    #z-icon-instagram-fill
  • font-colors
    #z-icon-font-colors
  • IE-square-fill
    #z-icon-IE-square-fill
  • exclaimination
    #z-icon-exclaimination
  • medium-square-fill
    #z-icon-medium-square-fill
  • check-circle
    #z-icon-check-circle
  • font-size
    #z-icon-font-size
  • linkedin-fill
    #z-icon-linkedin-fill
  • CI
    #z-icon-CI
  • infomation
    #z-icon-infomation
  • QQ-square-fill
    #z-icon-QQ-square-fill
  • Dollar
    #z-icon-Dollar
  • line-height
    #z-icon-line-height
  • reddit-square-fill
    #z-icon-reddit-square-fill
  • compass
    #z-icon-compass
  • strikethrough
    #z-icon-strikethrough
  • twitter-square-fill
    #z-icon-twitter-square-fill
  • close-circle
    #z-icon-close-circle
  • underline
    #z-icon-underline
  • sketch-square-fill
    #z-icon-sketch-square-fill
  • frown
    #z-icon-frown
  • number
    #z-icon-number
  • slack-square-fill
    #z-icon-slack-square-fill
  • info-circle
    #z-icon-info-circle
  • italic
    #z-icon-italic
  • taobao-square-fill
    #z-icon-taobao-square-fill
  • left-circle
    #z-icon-left-circle
  • code
    #z-icon-code
  • weibo-square-fill
    #z-icon-weibo-square-fill
  • down-circle
    #z-icon-down-circle
  • column-width
    #z-icon-column-width
  • zhihu-square-fill
    #z-icon-zhihu-square-fill
  • EURO
    #z-icon-EURO
  • check
    #z-icon-check
  • zoom out
    #z-icon-zoomout
  • copyright
    #z-icon-copyright
  • ellipsis
    #z-icon-ellipsis
  • apartment
    #z-icon-apartment
  • minus-circle
    #z-icon-minus-circle
  • dash
    #z-icon-dash
  • audio
    #z-icon-audio
  • meh
    #z-icon-meh
  • close
    #z-icon-close
  • audio-fill
    #z-icon-audio-fill
  • plus-circle
    #z-icon-plus-circle
  • enter
    #z-icon-enter
  • robot
    #z-icon-robot
  • play-circle
    #z-icon-play-circle
  • line
    #z-icon-line
  • zoom in
    #z-icon-zoomin
  • question-circle
    #z-icon-question-circle
  • minus
    #z-icon-minus
  • robot-fill
    #z-icon-robot-fill
  • Pound
    #z-icon-Pound
  • question
    #z-icon-question
  • bug-fill
    #z-icon-bug-fill
  • right-circle
    #z-icon-right-circle
  • rollback
    #z-icon-rollback
  • bug
    #z-icon-bug
  • smile
    #z-icon-smile
  • small-dash
    #z-icon-small-dash
  • audio static
    #z-icon-audiostatic
  • trademark
    #z-icon-trademark
  • pause
    #z-icon-pause
  • comment
    #z-icon-comment
  • time-circle
    #z-icon-time-circle
  • bg-colors
    #z-icon-bg-colors
  • signal-fill
    #z-icon-signal-fill
  • time out
    #z-icon-timeout
  • crown
    #z-icon-crown
  • verified
    #z-icon-verified
  • earth
    #z-icon-earth
  • drag
    #z-icon-drag
  • shortcut-fill
    #z-icon-shortcut-fill
  • YUAN
    #z-icon-YUAN
  • desktop
    #z-icon-desktop
  • videocamera add
    #z-icon-videocameraadd
  • up-circle
    #z-icon-up-circle
  • gift
    #z-icon-gift
  • switch user
    #z-icon-switchuser
  • warning-circle
    #z-icon-warning-circle
  • stop
    #z-icon-stop
  • whatsapp
    #z-icon-whatsapp
  • sync
    #z-icon-sync
  • fire
    #z-icon-fire
  • appstore add
    #z-icon-appstoreadd
  • transaction
    #z-icon-transaction
  • thunderbolt
    #z-icon-thunderbolt
  • caret-down
    #z-icon-caret-down
  • undo
    #z-icon-undo
  • check-circle-fill
    #z-icon-check-circle-fill
  • backward
    #z-icon-backward
  • redo
    #z-icon-redo
  • left-circle-fill
    #z-icon-left-circle-fill
  • caret-up
    #z-icon-caret-up
  • reload
    #z-icon-reload
  • down-circle-fill
    #z-icon-down-circle-fill
  • caret-right
    #z-icon-caret-right
  • reload time
    #z-icon-reloadtime
  • minus-circle-fill
    #z-icon-minus-circle-fill
  • caret-left
    #z-icon-caret-left
  • message
    #z-icon-message
  • close-circle-fill
    #z-icon-close-circle-fill
  • fast-backward
    #z-icon-fast-backward
  • dashboard
    #z-icon-dashboard
  • info-circle-fill
    #z-icon-info-circle-fill
  • forward
    #z-icon-forward
  • issues close
    #z-icon-issuesclose
  • up-circle-fill
    #z-icon-up-circle-fill
  • fast-forward
    #z-icon-fast-forward
  • poweroff
    #z-icon-poweroff
  • right-circle-fill
    #z-icon-right-circle-fill
  • search
    #z-icon-search
  • logout
    #z-icon-logout
  • plus-circle-fill
    #z-icon-plus-circle-fill
  • retweet
    #z-icon-retweet
  • pie chart
    #z-icon-piechart
  • question-circle-fill
    #z-icon-question-circle-fill
  • login
    #z-icon-login
  • setting
    #z-icon-setting
  • EURO-circle-fill
    #z-icon-EURO-circle-fill
  • step-backward
    #z-icon-step-backward
  • eye
    #z-icon-eye
  • frown-fill
    #z-icon-frown-fill
  • step-forward
    #z-icon-step-forward
  • location
    #z-icon-location
  • copyright-circle-fil
    #z-icon-copyright-circle-fil
  • swap-right
    #z-icon-swap-right
  • edit-square
    #z-icon-edit-square
  • CI-circle-fill
    #z-icon-CI-circle-fill
  • swap-left
    #z-icon-swap-left
  • export
    #z-icon-export
  • compass-fill
    #z-icon-compass-fill
  • woman
    #z-icon-woman
  • save
    #z-icon-save
  • Dollar-circle-fill
    #z-icon-Dollar-circle-fill
  • plus
    #z-icon-plus
  • Import
    #z-icon-Import
  • poweroff-circle-fill
    #z-icon-poweroff-circle-fill
  • eye close-fill
    #z-icon-eyeclose-fill
  • app store
    #z-icon-appstore
  • meh-fill
    #z-icon-meh-fill
  • eye-close
    #z-icon-eye-close
  • close-square
    #z-icon-close-square
  • play-circle-fill
    #z-icon-play-circle-fill
  • clear
    #z-icon-clear
  • down-square
    #z-icon-down-square
  • Pound-circle-fill
    #z-icon-Pound-circle-fill
  • collapse
    #z-icon-collapse
  • layout
    #z-icon-layout
  • smile-fill
    #z-icon-smile-fill
  • expand
    #z-icon-expand
  • left-square
    #z-icon-left-square
  • stop-fill
    #z-icon-stop-fill
  • delete column
    #z-icon-deletecolumn
  • play-square
    #z-icon-play-square
  • warning-circle-fill
    #z-icon-warning-circle-fill
  • merge-cells
    #z-icon-merge-cells
  • control
    #z-icon-control
  • time-circle-fill
    #z-icon-time-circle-fill
  • subnode
    #z-icon-subnode
  • code library
    #z-icon-codelibrary
  • trademark-circle-fil
    #z-icon-trademark-circle-fil
  • rotate-left
    #z-icon-rotate-left
  • detail
    #z-icon-detail
  • YUAN-circle-fill
    #z-icon-YUAN-circle-fill
  • rotate-right
    #z-icon-rotate-right
  • minus-square
    #z-icon-minus-square
  • heart-fill
    #z-icon-heart-fill
  • insert row below
    #z-icon-insertrowbelow
  • plus-square
    #z-icon-plus-square
  • pie chart-circle-fil
    #z-icon-piechart-circle-fil
  • insert row above
    #z-icon-insertrowabove
  • right-square
    #z-icon-right-square
  • dashboard-fill
    #z-icon-dashboard-fill
  • table
    #z-icon-table1
  • project
    #z-icon-project
  • message-fill
    #z-icon-message-fill
  • solit-cells
    #z-icon-solit-cells
  • wallet
    #z-icon-wallet
  • check-square-fill
    #z-icon-check-square-fill
  • format painter
    #z-icon-formatpainter
  • up-square
    #z-icon-up-square
  • down-square-fill
    #z-icon-down-square-fill
  • insert row right
    #z-icon-insertrowright
  • calculator
    #z-icon-calculator
  • minus-square-fill
    #z-icon-minus-square-fill
  • format painter-fill
    #z-icon-formatpainter-fill
  • interation
    #z-icon-interation
  • close-square-fill
    #z-icon-close-square-fill
  • insert row left
    #z-icon-insertrowleft
  • check-square
    #z-icon-check-square
  • code library-fill
    #z-icon-codelibrary-fill
  • translate
    #z-icon-translate
  • border
    #z-icon-border
  • left-square-fill
    #z-icon-left-square-fill
  • delete row
    #z-icon-deleterow
  • border-outer
    #z-icon-border-outer
  • play-square-fill
    #z-icon-play-square-fill
  • sisternode
    #z-icon-sisternode
  • border-top
    #z-icon-border-top
  • up-square-fill
    #z-icon-up-square-fill
  • Field-number
    #z-icon-Field-number
  • border-bottom
    #z-icon-border-bottom
  • right-square-fill
    #z-icon-right-square-fill
  • Field-String
    #z-icon-Field-String
  • border-left
    #z-icon-border-left
  • plus-square-fill
    #z-icon-plus-square-fill
  • Function
    #z-icon-Function
  • border-right
    #z-icon-border-right
  • account book-fill
    #z-icon-accountbook-fill
  • Field-time
    #z-icon-Field-time
  • border-inner
    #z-icon-border-inner
  • carry out-fill
    #z-icon-carryout-fill
  • GIF
    #z-icon-GIF
  • border-verticle
    #z-icon-border-verticle
  • calendar-fill
    #z-icon-calendar-fill
  • Partition
    #z-icon-Partition
  • border-horizontal
    #z-icon-border-horizontal
  • calculator-fill
    #z-icon-calculator-fill
  • index
    #z-icon-index
  • radius-bottomleft
    #z-icon-radius-bottomleft
  • interation-fill
    #z-icon-interation-fill
  • Stored procedure
    #z-icon-Storedprocedure
  • radius-bottomright
    #z-icon-radius-bottomright
  • project-fill
    #z-icon-project-fill
  • Field-Binary
    #z-icon-Field-Binary
  • radius-upleft
    #z-icon-radius-upleft
  • detail-fill
    #z-icon-detail-fill
  • Console-SQL
    #z-icon-Console-SQL
  • radius-upright
    #z-icon-radius-upright
  • save-fill
    #z-icon-save-fill
  • 1:1
    #z-icon-icon-test
  • radius-setting
    #z-icon-radius-setting
  • wallet-fill
    #z-icon-wallet-fill
  • aim
    #z-icon-aim
  • add user
    #z-icon-adduser
  • control-fill
    #z-icon-control-fill
  • compress
    #z-icon-compress
  • delete team
    #z-icon-deleteteam
  • layout-fill
    #z-icon-layout-fill
  • expend
    #z-icon-expend
  • delete user
    #z-icon-deleteuser
  • app store-fill
    #z-icon-appstore-fill
  • folder-view
    #z-icon-folder-view
  • addteam
    #z-icon-addteam
  • mobile-fill
    #z-icon-mobile-fill
  • file-GIF
    #z-icon-file-GIF
  • user
    #z-icon-user
  • tablet-fill
    #z-icon-tablet-fill
  • group
    #z-icon-group
  • team
    #z-icon-team
  • book-fill
    #z-icon-book-fill
  • send
    #z-icon-send
  • area chart
    #z-icon-areachart
  • red envelope-fill
    #z-icon-redenvelope-fill
  • Report
    #z-icon-Report
  • line chart
    #z-icon-linechart
  • safety certificate-f
    #z-icon-safetycertificate-f
  • View
    #z-icon-View
  • bar chart
    #z-icon-barchart
  • property safety-fill
    #z-icon-propertysafety-fill
  • shortcut
    #z-icon-shortcut
  • point map
    #z-icon-pointmap
  • insurance-fill
    #z-icon-insurance-fill
  • ungroup
    #z-icon-ungroup
  • container
    #z-icon-container
  • security scan-fill
    #z-icon-securityscan-fill
  • database
    #z-icon-database
  • file-exclamation-fil
    #z-icon-file-exclamation-fil
  • sever
    #z-icon-sever
  • file-add-fill
    #z-icon-file-add-fill
  • mobile
    #z-icon-mobile
  • file-fill
    #z-icon-file-fill
  • tablet
    #z-icon-tablet
  • file-excel-fill
    #z-icon-file-excel-fill
  • red envelope
    #z-icon-redenvelope
  • file-markdown-fill
    #z-icon-file-markdown-fill
  • book
    #z-icon-book
  • file-text-fill
    #z-icon-file-text-fill
  • file done
    #z-icon-filedone
  • file-ppt-fill
    #z-icon-file-ppt-fill
  • reconciliation
    #z-icon-reconciliation
  • file-unknown-fill
    #z-icon-file-unknown-fill
  • file -exception
    #z-icon-file-exception
  • file-word-fill
    #z-icon-file-word-fill
  • file sync
    #z-icon-filesync
  • file-zip-fill
    #z-icon-file-zip-fill
  • file search
    #z-icon-filesearch
  • file-pdf-fill
    #z-icon-file-pdf-fill
  • solution
    #z-icon-solution
  • file-image-fill
    #z-icon-file-image-fill
  • file protect
    #z-icon-fileprotect
  • diff-fill
    #z-icon-diff-fill
  • file-add
    #z-icon-file-add
  • file-copy-fill
    #z-icon-file-copy-fill
  • file-excel
    #z-icon-file-excel
  • snippets-fill
    #z-icon-snippets-fill
  • file-exclamation
    #z-icon-file-exclamation
  • batch folding-fill
    #z-icon-batchfolding-fill
  • file-pdf
    #z-icon-file-pdf
  • reconciliation-fill
    #z-icon-reconciliation-fill
  • file-image
    #z-icon-file-image
  • folder-add-fill
    #z-icon-folder-add-fill
  • file-markdown
    #z-icon-file-markdown
  • folder-fill
    #z-icon-folder-fill
  • file-unknown
    #z-icon-file-unknown
  • folder-open-fill
    #z-icon-folder-open-fill
  • file-ppt
    #z-icon-file-ppt
  • database-fill
    #z-icon-database-fill
  • file-word
    #z-icon-file-word
  • container-fill
    #z-icon-container-fill
  • file
    #z-icon-file
  • sever-fill
    #z-icon-sever-fill
  • file-zip
    #z-icon-file-zip
  • calendar-check-fill
    #z-icon-calendar-check-fill
  • check-small
    #z-icon-check-small
  • file-text
    #z-icon-file-text
  • image-fill
    #z-icon-image-fill
  • file-copy
    #z-icon-file-copy
  • id card-fill
    #z-icon-idcard-fill
  • snippets
    #z-icon-snippets
  • credit card-fill
    #z-icon-creditcard-fill
  • audit
    #z-icon-audit
  • fund-fill
    #z-icon-fund-fill
  • diff
    #z-icon-diff
  • read-fill
    #z-icon-read-fill
  • Batch folding
    #z-icon-Batchfolding
  • contacts-fill
    #z-icon-contacts-fill
  • security scan
    #z-icon-securityscan
  • delete-fill
    #z-icon-delete-fill
  • property safety
    #z-icon-propertysafety
  • notification-fill
    #z-icon-notification-fill
  • safety certificate
    #z-icon-safetycertificate
  • flag-fill
    #z-icon-flag-fill
  • insurance
    #z-icon-insurance
  • money collect-fill
    #z-icon-moneycollect-fill
  • alert
    #z-icon-alert
  • medicine box-fill
    #z-icon-medicinebox-fill
  • delete
    #z-icon-delete
  • rest-fill
    #z-icon-rest-fill
  • hourglass
    #z-icon-hourglass
  • shopping-fill
    #z-icon-shopping-fill
  • bulb
    #z-icon-bulb
  • skin-fill
    #z-icon-skin-fill
  • experiment
    #z-icon-experiment
  • video-fill
    #z-icon-video-fill
  • bell
    #z-icon-bell
  • sound-fill
    #z-icon-sound-fill
  • trophy
    #z-icon-trophy
  • bulb-fill
    #z-icon-bulb-fill
  • rest
    #z-icon-rest
  • bell-fill
    #z-icon-bell-fill
  • USB
    #z-icon-USB
  • filter-fill
    #z-icon-filter-fill
  • skin
    #z-icon-skin
  • fire-fill
    #z-icon-fire-fill
  • home
    #z-icon-home
  • funnel plot-fill
    #z-icon-funnelplot-fill
  • bank
    #z-icon-bank
  • gift-fill
    #z-icon-gift-fill
  • filter
    #z-icon-filter
  • hourglass-fill
    #z-icon-hourglass-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>