IconFont 图标

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

font-class引用

---

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

与unicode使用方式相比，具有如下特点：

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

使用步骤如下：

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

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

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

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

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