• 
    group-expand
    
  • group-collapse
    
  • Zoom to 100%
    
  • 存款业务
    
  • 国际业务
    
  • 贷款业务-1
    
  • 首页-1
    
  • 客户注册-1
    
  • 会计核算
    
  • 投资业务
    
  • 会计核算-1
    
  • 结算业务-1
    
  • 票据业务-1
    
  • 集团业务-1
    
  • 存款业务-1
    
  • 国际业务-1
    
  • 核心服务-1
    
  • 资金池
    
  • 同业业务
    
  • 客户信息
    
  • 金融网关
    
  • 配置中心-1
    
  • 金融网关-1
    
  • 集团业务
    
  • 资金池-1
    
  • 同业授信-1
    
  • 首页
    
  • 集票宝-1
    
  • 金融资产-1
    
  • 同业授信
    
  • 票据业务
    
  • 结算业务
    
  • 客户注册
    
  • 集票宝
    
  • 配置中心
    
  • 核心服务
    
  • 客户信息-1
    
  • 金融资产
    
  • 贷款业务
    
  • 同业业务-1
    
  • 投资业务-1
    
  • application-fill
    
  • application1-fill
    
  • fail-fill
    
  • circle-fill
    
  • building-fill
    
  • dashboard-fill
    
  • arrow-down-fill
    
  • arrow-up-fill
    
  • audit-fill
    
  • bond-quota-fill
    
  • api-fill
    
  • add-fill
    
  • bank-card-fill
    
  • add1-fill
    
  • arrow-left-fill
    
  • alarm-fill
    
  • home1-fill
    
  • check-box1
    
  • delete-fill
    
  • calendar-weekly-fill
    
  • dollar-fill
    
  • layers-fill
    
  • 
    attention-fill
    
  • fund-fill
    
  • chart-pie-fill
    
  • earth-fill
    
  • bank-fill
    
  • components-fill
    
  • arrow-right-fill
    
  • document-fill
    
  • edit-fill
    
  • function-fill
    
  • more2-fill
    
  • next-fill
    
  • pointer-fill
    
  • lightning1-fill
    
  • preview-open-fill
    
  • folder-fill
    
  • maximize-fill
    
  • branch-fill
    
  • doc-search-fill
    
  • remind-fill
    
  • computer-fill
    
  • delete1-fill
    
  • back0-fill
    
  • success-fill
    
  • parameter-fill
    
  • time-fill
    
  • reduce-fill
    
  • item-fill
    
  • home-fill
    
  • risk2-fill
    
  • skin-fill
    
  • list3-fill
    
  • Cross-border funds-fill
    
  • forbid-fill
    
  • heart-fill
    
  • Illegal access-fill
    
  • to-do-list-fill
    
  • to-do-list1-fill
    
  • setting1-fill
    
  • mark-fill
    
  • view-list-fill
    
  • volume-fill-1
    
  • rmb-fill
    
  • help-fill
    
  • message2-fill
    
  • reduce1-fill
    
  • user-management-fill
    
  • info-fill
    
  • message-fill
    
  • tag-fill
    
  • picture-fill
    
  • trend1-fill
    
  • terminal-fill
    
  • star-fill
    
  • setting-fill
    
  • user1-fill
    
  • term-exposure-fill
    
  • monitor-fill
    
  • user-portrait-fill
    
  • volume-fill
    
  • workbench-fill
    
  • sort-fill
    
  • forbid
    
  • info
    
  • attention
    
  • help
    
  • alarm
    
  • caution
    
  • video1
    
  • play1
    
  • play
    
  • carousel
    
  • camera
    
  • carousel-single
    
  • music
    
  • pause
    
  • success
    
  • tips1
    
  • tips
    
  • fail
    
  • alarm1
    
  • chart-histogram2
    
  • chart-histogram
    
  • chart-area
    
  • average
    
  • phone
    
  • volume
    
  • voice
    
  • volume-up
    
  • picture
    
  • volume-mute
    
  • volume-down
    
  • video
    
  • chart-pie
    
  • chart-scatter
    
  • chart-line-multi
    
  • positive
    
  • histogram
    
  • ranking
    
  • heat-map
    
  • chart-stock
    
  • chart-ring
    
  • chart-combo
    
  • chart-stacked-bar
    
  • chart-radar
    
  • chart-line
    
  • chart-histogram1
    
  • chart-data
    
  • k-vertical3
    
  • k-diagonal4
    
  • k-horizontal1
    
  • fibonacci
    
  • k-horizontal
    
  • k-diagonal5
    
  • k-diagonal2
    
  • chart-stock1
    
  • minimum
    
  • maximum
    
  • negative
    
  • pivot-table
    
  • chart-line-area
    
  • index
    
  • dollar
    
  • information1
    
  • account
    
  • information
    
  • bank
    
  • k-diagonal
    
  • k-horizontal123
    
  • k-diagonal3
    
  • k-diagonal1
    
  • k-vertical1
    
  • fx
    
  • k-vertical2
    
  • k-horizontal2
    
  • k-vertical
    
  • fixed-assets
    
  • sales-approval
    
  • product
    
  • loans
    
  • bank-add
    
  • research
    
  • coin
    
  • information2
    
  • trend
    
  • trend1
    
  • money-collect
    
  • date
    
  • euro-1
    
  • money-pay
    
  • euro
    
  • swap
    
  • far
    
  • precious-metal-1
    
  • near
    
  • fund
    
  • futures
    
  • spot
    
  • exchange
    
  • forward
    
  • bond
    
  • precious-metal
    
  • foreign-currency
    
  • foreign-exchange
    
  • commodities
    
  • money
    
  • expire-exercise
    
  • fast-trade
    
  • extension
    
  • delivery
    
  • delivery-application
    
  • calculation
    
  • ccalculator
    
  • backtrack
    
  • abandon
    
  • closing-position1
    
  • business
    
  • advance
    
  • audit
    
  • option
    
  • commodities1
    
  • spot-goods
    
  • payment-review
    
  • trade
    
  • fixing
    
  • knock-in-out
    
  • listing1
    
  • early-delivery
    
  • forward-option
    
  • pay
    
  • early-exercise
    
  • exercise
    
  • closing-position
    
  • listing
    
  • Interest-collection
    
  • fixed-to-selection
    
  • inquiry
    
  • due
    
  • price-distribution
    
  • group-add
    
  • multiple-lock-prices
    
  • unlocking
    
  • withdraw
    
  • overdue
    
  • differential-delivery
    
  • strategy-comparison
    
  • quota release
    
  • position
    
  • strategy-optimization
    
  • shopping-cart
    
  • qrcode
    
  • fixed-investment
    
  • operation
    
  • shopping-bag
    
  • order-inquiry
    
  • channel-control
    
  • biding
    
  • future-managed
    
  • bond-quotaanagement
    
  • cost-control
    
  • stop-loss
    
  • lock-price
    
  • listing2
    
  • no-trade
    
  • stop-profit
    
  • reversal
    
  • option-exercise
    
  • selective-delivery
    
  • listing-succeed
    
  • trial
    
  • counter- open
    
  • l
    
  • client-open
    
  • tranding-setting
    
  • spot-exposure
    
  • financial-statements
    
  • position-managed
    
  • system-solution
    
  • term-exposure
    
  • information-query
    
  • cost-management
    
  • order-management
    
  • client-close
    
  • h
    
  • market-risk
    
  • monitor
    
  • dashboard
    
  • list
    
  • prefecture-amount
    
  • handle
    
  • hand
    
  • stop-selling
    
  • qt-price
    
  • sales-approval
    
  • other-open
    
  • other-close
    
  • off-the-shelf
    
  • counter-close
    
  • loan
    
  • m
    
  • risk
    
  • speed
    
  • credit-risk
    
  • risk2
    
  • risk-examine
    
  • monitor1
    
  • risk1
    
  • risk-monitoring
    
  • operational-risk
    
  • adaptive-stretching
    
  • align-bottom
    
  • adaptive-stretching-horizontal
    
  • align-left
    
  • align-horizontally
    
  • align-text-left
    
  • align-text-right
    
  • align-right
    
  • align-text-center
    
  • alin-verticlly
    
  • alphabetic-order
    
  • auto-height
    
  • border-bottom
    
  • border-horizontal
    
  • auto-width
    
  • border-outer
    
  • border-inner
    
  • border-verticle
    
  • border-radius
    
  • background-color
    
  • alphabetic-inverted-order
    
  • border-top
    
  • broken-line
    
  • distribute-vertically
    
  • border-right
    
  • border-left
    
  • circle
    
  • align-top
    
  • bring-to-front
    
  • flex-baseline
    
  • distribute-horizontally
    
  • flex-baseline-horizontal
    
  • dividing-line
    
  • h1
    
  • dot-line
    
  • layers
    
  • intersection
    
  • layout1
    
  • layout2
    
  • highlight
    
  • list1
    
  • layout4
    
  • layout
    
  • list2
    
  • layout5
    
  • layout6
    
  • formula
    
  • margin-verticlly
    
  • list3
    
  • pic-center
    
  • move-right
    
  • move-left
    
  • list
    
  • no-effect
    
  • move-around
    
  • radius-upleft
    
  • pic-left
    
  • rectangle1
    
  • strikethrough
    
  • radius-bottomleft
    
  • merge
    
  • table-editing
    
  • layout3
    
  • pic-right
    
  • square
    
  • radius-bottomright
    
  • table-search
    
  • sent-to-back
    
  • move
    
  • text-style
    
  • text-italic
    
  • text-bold
    
  • text-underline
    
  • view-list
    
  • table
    
  • text-size
    
  • text-italic1
    
  • quote
    
  • margin-horizontally
    
  • ordered-list
    
  • text
    
  • text-style1
    
  • radius-upright
    
  • table1
    
  • application3
    
  • branch1
    
  • batch-input
    
  • automatic-deployment
    
  • branch3
    
  • 3d
    
  • add-item
    
  • batch-failure
    
  • add-menu
    
  • branch
    
  • branch4
    
  • add-subset
    
  • api
    
  • 2d
    
  • batch-search
    
  • application
    
  • abnormal
    
  • cloud-cync
    
  • branch-check
    
  • component-initem
    
  • button
    
  • data-source
    
  • device-connected
    
  • branch2
    
  • branch5
    
  • component-progress
    
  • component-slider
    
  • cloud-upload
    
  • cloud-backtesting
    
  • application1
    
  • code
    
  • cloud-downlad
    
  • auto-complete
    
  • component-select
    
  • component-collapse
    
  • component-steps
    
  • components
    
  • demand-management
    
  • function
    
  • item-modify
    
  • cloud-server
    
  • database-import
    
  • data-dictionary
    
  • data-server
    
  • earth
    
  • edition
    
  • grid
    
  • component-dropdown
    
  • device-not-connected
    
  • CPU
    
  • contanier
    
  • cloud-server备份
    
  • component-switch
    
  • configuration-process
    
  • display-inline-block
    
  • component-board
    
  • process-list
    
  • subset
    
  • container
    
  • historical-edition
    
  • collect
    
  • iframe-container
    
  • process-management
    
  • server
    
  • display-inline
    
  • usb
    
  • warehousing
    
  • sync
    
  • data-grooming
    
  • display-block
    
  • input
    
  • versions-publish
    
  • resource
    
  • display-flex
    
  • router
    
  • tag
    
  • to-do-list
    
  • div-tag
    
  • process-list-1
    
  • module
    
  • drawing-board
    
  • international
    
  • ipc-push
    
  • test
    
  • versions-publish-1
    
  • item
    
  • tab-single
    
  • output-code
    
  • database
    
  • tree-node
    
  • records
    
  • tree-list
    
  • item-branch
    
  • system-data
    
  • workbench
    
  • tab
    
  • fault-management
    
  • partial-channel-opening
    
  • ws-push
    
  • research-process
    
  • transfer
    
  • terminal
    
  • doc-add
    
  • contract- fail
    
  • doc-search
    
  • doc-edit
    
  • file-excel
    
  • file-add
    
  • file-gif
    
  • file
    
  • document
    
  • contract- success
    
  • file-csv
    
  • export
    
  • file-pdf
    
  • image-files
    
  • file-ppt
    
  • Invoice
    
  • doc-sync
    
  • file-jpg
    
  • file1
    
  • list-add
    
  • folder-open
    
  • file-zip
    
  • file-png
    
  • file-txt
    
  • folder
    
  • preview
    
  • folder-add
    
  • transaction-order
    
  • additional-record
    
  • file-word
    
  • import
    
  • template
    
  • date-time
    
  • time
    
  • 24-hour
    
  • alam-clock
    
  • stopwatch
    
  • calendar
    
  • calendar-monthly
    
  • calendar-range
    
  • schedule
    
  • history
    
  • calendar-weekly
    
  • calendar-view
    
  • user-info
    
  • user1
    
  • user-portrait
    
  • bank-card
    
  • account-cancel
    
  • id-card
    
  • user
    
  • group
    
  • user-info1
    
  • request-object
    
  • address-book
    
  • add-user
    
  • acccount-add
    
  • user-management
    
  • user-error
    
  • fog
    
  • go-out
    
  • borrow
    
  • book1
    
  • happy
    
  • course
    
  • cloud
    
  • heart
    
  • gift
    
  • compass
    
  • bad
    
  • ai-interpret
    
  • building
    
  • aim
    
  • briefcase
    
  • cloudy
    
  • book
    
  • moon
    
  • school
    
  • business-trip
    
  • Review-completed
    
  • successful-approval
    
  • guide-board
    
  • notebook
    
  • light-rain
    
  • experiment
    
  • local
    
  • fire
    
  • financial-approval
    
  • fingerprint
    
  • degree-hat
    
  • smart-brain
    
  • trophy
    
  • rocket
    
  • performance-evaluation
    
  • heavy-rain
    
  • neural-network
    
  • wifi
    
  • lighting
    
  • good
    
  • umbrella
    
  • wallet
    
  • wind
    
  • approval-process
    
  • dimission-management
    
  • signal
    
  • sun
    
  • contract-flow
    
  • local1
    
  • unhappy
    
  • star
    
  • lighting1
    
  • personnel-approval
    
  • work-application
    
  • hourglass-empty
    
  • hourglass-full
    
  • shop
    
  • meeting-reservation
    
  • receive
    
  • contract-statement
    
  • drag
    
  • clear
    
  • delete1
    
  • email-open
    
  • edit1
    
  • link
    
  • add
    
  • cut
    
  • announcement
    
  • edit
    
  • announcement1
    
  • clear1
    
  • copy
    
  • @
    
  • add1
    
  • equal
    
  • pointer
    
  • email
    
  • cutting
    
  • link1
    
  • sort-amount-up
    
  • save
    
  • send
    
  • news
    
  • pushpin
    
  • must-fill-in
    
  • reduce
    
  • plus
    
  • delete
    
  • share
    
  • link2
    
  • find
    
  • scan
    
  • reduce1
    
  • inbox
    
  • minus
    
  • filter
    
  • afferent
    
  • arrow-up
    
  • arrow-right
    
  • arrow-down
    
  • unlink
    
  • search1
    
  • save1
    
  • printer
    
  • platte
    
  • mark
    
  • link-interrupt
    
  • sort-amount-down
    
  • search
    
  • down-circle
    
  • expand
    
  • export-all
    
  • go-on
    
  • double-up
    
  • back
    
  • down
    
  • collapse
    
  • movable
    
  • double_right
    
  • direction-arrow-fall
    
  • efferent
    
  • connection-arrow
    
  • direction-arrow-rise
    
  • double-left
    
  • enter
    
  • double-down
    
  • arrow-left
    
  • download
    
  • logout
    
  • login
    
  • sliding-vertical
    
  • trending-down
    
  • go-back
    
  • sliding-horizontal
    
  • to-bottom
    
  • down1
    
  • left-circle
    
  • full-screen
    
  • click-to-fold
    
  • left
    
  • switch1
    
  • line-height
    
  • switch-left
    
  • reject
    
  • shuffle
    
  • undo
    
  • to-left
    
  • sort1
    
  • upload
    
  • to-top
    
  • switch-right
    
  • off-screen
    
  • right1
    
  • left1
    
  • right-circle
    
  • to-right
    
  • sort
    
  • transfer-data
    
  • up
    
  • un-top
    
  • up-circle
    
  • right
    
  • trending-up
    
  • next
    
  • up1
    
  • switch
    
  • device
    
  • config
    
  • check-box
    
  • check
    
  • maximize
    
  • custmoer
    
  • permission
    
  • tag
    
  • refresh
    
  • preview-close
    
  • tag1
    
  • loading
    
  • logout1
    
  • refresh1
    
  • check-box-1
    
  • minimize
    
  • close1
    
  • key
    
  • laptop
    
  • close
    
  • config1
    
  • menu-fold
    
  • message
    
  • mobile
    
  • lock
    
  • all-close
    
  • home
    
  • tool
    
  • more1
    
  • home1
    
  • point-out
    
  • message2
    
  • skin
    
  • computer
    
  • preview-close1
    
  • zoom-in
    
  • setting1
    
  • more
    
  • menu
    
  • setting
    
  • tablet
    
  • power
    
  • reset-password
    
  • zoom-out
    
  • menu-unfold
    
  • loading1
    
  • multi-window
    
  • remind
    
  • tag2
    
  • more2
    
  • message1
    
  • unlock
    
  • preview-open
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • group-expand
    .icon-group-expand
  • group-collapse
    .icon-group-collapse
  • Zoom to 100%
    .icon-a-Zoomto100
  • 存款业务
    .icon-cunkuanyewu
  • 国际业务
    .icon-guojiyewu
  • 贷款业务-1
    .icon-daikuanyewu-1
  • 首页-1
    .icon-shouye-1
  • 客户注册-1
    .icon-kehuzhuce-1
  • 会计核算
    .icon-huijihesuan
  • 投资业务
    .icon-touziyewu
  • 会计核算-1
    .icon-huijihesuan-1
  • 结算业务-1
    .icon-jiesuanyewu-1
  • 票据业务-1
    .icon-piaojuyewu-1
  • 集团业务-1
    .icon-jituanyewu-1
  • 存款业务-1
    .icon-cunkuanyewu-1
  • 国际业务-1
    .icon-guojiyewu-1
  • 核心服务-1
    .icon-hexinfuwu-1
  • 资金池
    .icon-zijinchi
  • 同业业务
    .icon-tongyeyewu
  • 客户信息
    .icon-kehuxinxi
  • 金融网关
    .icon-jinrongwangguan
  • 配置中心-1
    .icon-peizhizhongxin-1
  • 金融网关-1
    .icon-jinrongwangguan-1
  • 集团业务
    .icon-jituanyewu
  • 资金池-1
    .icon-zijinchi-1
  • 同业授信-1
    .icon-tongyeshouxin-1
  • 首页
    .icon-shouye
  • 集票宝-1
    .icon-jipiaobao-1
  • 金融资产-1
    .icon-jinrongzichan-1
  • 同业授信
    .icon-tongyeshouxin
  • 票据业务
    .icon-piaojuyewu
  • 结算业务
    .icon-jiesuanyewu
  • 客户注册
    .icon-kehuzhuce
  • 集票宝
    .icon-jipiaobao
  • 配置中心
    .icon-peizhizhongxin
  • 核心服务
    .icon-hexinfuwu
  • 客户信息-1
    .icon-kehuxinxi-1
  • 金融资产
    .icon-jinrongzichan
  • 贷款业务
    .icon-daikuanyewu
  • 同业业务-1
    .icon-tongyeyewu-1
  • 投资业务-1
    .icon-touziyewu-1
  • application-fill
    .icon-application-fill
  • application1-fill
    .icon-application1-fill
  • fail-fill
    .icon-fail-fill
  • circle-fill
    .icon-circle-fill
  • building-fill
    .icon-building-fill
  • dashboard-fill
    .icon-dashboard-fill
  • arrow-down-fill
    .icon-arrow-down-fill
  • arrow-up-fill
    .icon-arrow-up-fill
  • audit-fill
    .icon-audit-fill
  • bond-quota-fill
    .icon-bond-quota-fill
  • api-fill
    .icon-api-fill
  • add-fill
    .icon-add-fill
  • bank-card-fill
    .icon-bank-card-fill
  • add1-fill
    .icon-add1-fill
  • arrow-left-fill
    .icon-arrow-left-fill
  • alarm-fill
    .icon-alarm-fill
  • home1-fill
    .icon-home1-fill
  • check-box1
    .icon-check-box1
  • delete-fill
    .icon-delete-fill
  • calendar-weekly-fill
    .icon-calendar-weekly-fill
  • dollar-fill
    .icon-dollar-fill
  • layers-fill
    .icon-layers-fill
  • attention-fill
    .icon-attention-fill
  • fund-fill
    .icon-fund-fill
  • chart-pie-fill
    .icon-chart-pie-fill
  • earth-fill
    .icon-earth-fill
  • bank-fill
    .icon-bank-fill
  • components-fill
    .icon-components-fill
  • arrow-right-fill
    .icon-arrow-right-fill
  • document-fill
    .icon-document-fill
  • edit-fill
    .icon-edit-fill
  • function-fill
    .icon-function-fill
  • more2-fill
    .icon-more2-fill
  • next-fill
    .icon-next-fill
  • pointer-fill
    .icon-pointer-fill
  • lightning1-fill
    .icon-lightning1-fill
  • preview-open-fill
    .icon-preview-open-fill
  • folder-fill
    .icon-folder-fill
  • maximize-fill
    .icon-maximize-fill
  • branch-fill
    .icon-branch-fill
  • doc-search-fill
    .icon-doc-search-fill
  • remind-fill
    .icon-remind-fill
  • computer-fill
    .icon-computer-fill
  • delete1-fill
    .icon-delete1-fill
  • back0-fill
    .icon-back0-fill
  • success-fill
    .icon-success-fill
  • parameter-fill
    .icon-parameter-fill
  • time-fill
    .icon-time-fill
  • reduce-fill
    .icon-reduce-fill
  • item-fill
    .icon-item-fill
  • home-fill
    .icon-home-fill
  • risk2-fill
    .icon-risk2-fill
  • skin-fill
    .icon-skin-fill
  • list3-fill
    .icon-list3-fill
  • Cross-border funds-fill
    .icon-a-Cross-borderfunds-fill
  • forbid-fill
    .icon-forbid-fill
  • heart-fill
    .icon-heart-fill
  • Illegal access-fill
    .icon-a-Illegalaccess-fill
  • to-do-list-fill
    .icon-to-do-list-fill
  • to-do-list1-fill
    .icon-to-do-list1-fill
  • setting1-fill
    .icon-setting1-fill
  • mark-fill
    .icon-mark-fill
  • view-list-fill
    .icon-view-list-fill
  • volume-fill-1
    .icon-volume-fill-1
  • rmb-fill
    .icon-rmb-fill
  • help-fill
    .icon-help-fill
  • message2-fill
    .icon-message2-fill
  • reduce1-fill
    .icon-reduce1-fill
  • user-management-fill
    .icon-user-management-fill
  • info-fill
    .icon-info-fill
  • message-fill
    .icon-message-fill
  • tag-fill
    .icon-tag-fill
  • picture-fill
    .icon-picture-fill
  • trend1-fill
    .icon-trend1-fill
  • terminal-fill
    .icon-terminal-fill
  • star-fill
    .icon-star-fill
  • setting-fill
    .icon-setting-fill
  • user1-fill
    .icon-user1-fill
  • term-exposure-fill
    .icon-term-exposure-fill
  • monitor-fill
    .icon-monitor-fill
  • user-portrait-fill
    .icon-user-portrait-fill
  • volume-fill
    .icon-volume-fill
  • workbench-fill
    .icon-workbench-fill
  • sort-fill
    .icon-sort-fill
  • forbid
    .icon-forbid
  • info
    .icon-info
  • attention
    .icon-attention
  • help
    .icon-help
  • alarm
    .icon-alarm
  • caution
    .icon-caution
  • video1
    .icon-video1
  • play1
    .icon-play1
  • play
    .icon-play
  • carousel
    .icon-carousel
  • camera
    .icon-camera
  • carousel-single
    .icon-carousel-single
  • music
    .icon-music
  • pause
    .icon-pause
  • success
    .icon-success
  • tips1
    .icon-tips1
  • tips
    .icon-tips
  • fail
    .icon-fail
  • alarm1
    .icon-alarm1
  • chart-histogram2
    .icon-chart-histogram2
  • chart-histogram
    .icon-chart-histogram
  • chart-area
    .icon-chart-area
  • average
    .icon-average
  • phone
    .icon-phone
  • volume
    .icon-volume
  • voice
    .icon-voice
  • volume-up
    .icon-volume-up
  • picture
    .icon-picture
  • volume-mute
    .icon-volume-mute
  • volume-down
    .icon-volume-down
  • video
    .icon-video
  • chart-pie
    .icon-chart-pie
  • chart-scatter
    .icon-chart-scatter
  • chart-line-multi
    .icon-chart-line-multi
  • positive
    .icon-positive
  • histogram
    .icon-histogram
  • ranking
    .icon-ranking
  • heat-map
    .icon-heat-map
  • chart-stock
    .icon-chart-stock
  • chart-ring
    .icon-chart-ring
  • chart-combo
    .icon-chart-combo
  • chart-stacked-bar
    .icon-chart-stacked-bar
  • chart-radar
    .icon-chart-radar
  • chart-line
    .icon-chart-line
  • chart-histogram1
    .icon-chart-histogram1
  • chart-data
    .icon-chart-data
  • k-vertical3
    .icon-k-vertical3
  • k-diagonal4
    .icon-k-diagonal4
  • k-horizontal1
    .icon-k-horizontal1
  • fibonacci
    .icon-fibonacci
  • k-horizontal
    .icon-k-horizontal
  • k-diagonal5
    .icon-k-diagonal5
  • k-diagonal2
    .icon-k-diagonal2
  • chart-stock1
    .icon-chart-stock1
  • minimum
    .icon-minimum
  • maximum
    .icon-maximum
  • negative
    .icon-negative
  • pivot-table
    .icon-pivot-table
  • chart-line-area
    .icon-chart-line-area
  • index
    .icon-index
  • dollar
    .icon-dollar
  • information1
    .icon-information1
  • account
    .icon-account
  • information
    .icon-information
  • bank
    .icon-bank
  • k-diagonal
    .icon-k-diagonal
  • k-horizontal123
    .icon-k-horizontal123
  • k-diagonal3
    .icon-k-diagonal3
  • k-diagonal1
    .icon-k-diagonal1
  • k-vertical1
    .icon-k-vertical1
  • fx
    .icon-fx
  • k-vertical2
    .icon-k-vertical2
  • k-horizontal2
    .icon-k-horizontal2
  • k-vertical
    .icon-k-vertical
  • fixed-assets
    .icon-fixed-assets
  • sales-approval
    .icon-sales-approval1
  • product
    .icon-product
  • loans
    .icon-loans
  • bank-add
    .icon-bank-add
  • research
    .icon-research
  • coin
    .icon-coin
  • information2
    .icon-information2
  • trend
    .icon-trend
  • trend1
    .icon-trend1
  • money-collect
    .icon-money-collect
  • date
    .icon-date
  • euro-1
    .icon-euro-1
  • money-pay
    .icon-money-pay
  • euro
    .icon-euro
  • swap
    .icon-swap
  • far
    .icon-far
  • precious-metal-1
    .icon-precious-metal-1
  • near
    .icon-near
  • fund
    .icon-fund
  • futures
    .icon-futures
  • spot
    .icon-spot
  • exchange
    .icon-exchange
  • forward
    .icon-forward
  • bond
    .icon-bond
  • precious-metal
    .icon-precious-metal
  • foreign-currency
    .icon-foreign-currency
  • foreign-exchange
    .icon-foreign-exchange
  • commodities
    .icon-commodities
  • money
    .icon-money
  • expire-exercise
    .icon-expire-exercise
  • fast-trade
    .icon-fast-trade
  • extension
    .icon-extension
  • delivery
    .icon-delivery
  • delivery-application
    .icon-delivery-application
  • calculation
    .icon-calculation
  • ccalculator
    .icon-ccalculator
  • backtrack
    .icon-backtrack
  • abandon
    .icon-abandon
  • closing-position1
    .icon-closing-position1
  • business
    .icon-business
  • advance
    .icon-advance
  • audit
    .icon-audit
  • option
    .icon-option
  • commodities1
    .icon-commodities1
  • spot-goods
    .icon-spot-goods
  • payment-review
    .icon-payment-review
  • trade
    .icon-trade
  • fixing
    .icon-fixing
  • knock-in-out
    .icon-knock-in-out
  • listing1
    .icon-listing1
  • early-delivery
    .icon-early-delivery
  • forward-option
    .icon-forward-option
  • pay
    .icon-pay
  • early-exercise
    .icon-early-exercise
  • exercise
    .icon-exercise
  • closing-position
    .icon-closing-position
  • listing
    .icon-listing
  • Interest-collection
    .icon-Interest-collection
  • fixed-to-selection
    .icon-fixed-to-selection
  • inquiry
    .icon-inquiry
  • due
    .icon-due
  • price-distribution
    .icon-price-distribution
  • group-add
    .icon-group-add
  • multiple-lock-prices
    .icon-multiple-lock-prices
  • unlocking
    .icon-unlocking
  • withdraw
    .icon-withdraw
  • overdue
    .icon-overdue
  • differential-delivery
    .icon-differential-delivery
  • strategy-comparison
    .icon-strategy-comparison
  • quota release
    .icon-a-quotarelease
  • position
    .icon-position
  • strategy-optimization
    .icon-strategy-optimization
  • shopping-cart
    .icon-shopping-cart
  • qrcode
    .icon-qrcode
  • fixed-investment
    .icon-fixed-investment
  • operation
    .icon-operation
  • shopping-bag
    .icon-shopping-bag
  • order-inquiry
    .icon-order-inquiry
  • channel-control
    .icon-channel-control
  • biding
    .icon-biding
  • future-managed
    .icon-future-managed
  • bond-quotaanagement
    .icon-bond-quotaanagement
  • cost-control
    .icon-cost-control
  • stop-loss
    .icon-stop-loss
  • lock-price
    .icon-lock-price
  • listing2
    .icon-listing2
  • no-trade
    .icon-no-trade
  • stop-profit
    .icon-stop-profit
  • reversal
    .icon-reversal
  • option-exercise
    .icon-option-exercise
  • selective-delivery
    .icon-selective-delivery
  • listing-succeed
    .icon-listing-succeed
  • trial
    .icon-trial
  • counter- open
    .icon-a-counter-open
  • l
    .icon-l
  • client-open
    .icon-client-open
  • tranding-setting
    .icon-tranding-setting
  • spot-exposure
    .icon-spot-exposure
  • financial-statements
    .icon-financial-statements
  • position-managed
    .icon-position-managed
  • system-solution
    .icon-system-solution
  • term-exposure
    .icon-term-exposure
  • information-query
    .icon-information-query
  • cost-management
    .icon-cost-management
  • order-management
    .icon-order-management
  • client-close
    .icon-client-close
  • h
    .icon-h
  • market-risk
    .icon-market-risk
  • monitor
    .icon-monitor
  • dashboard
    .icon-dashboard
  • list
    .icon-list4
  • prefecture-amount
    .icon-prefecture-amount
  • handle
    .icon-handle
  • hand
    .icon-hand
  • stop-selling
    .icon-stop-selling
  • qt-price
    .icon-qt-price
  • sales-approval
    .icon-sales-approval
  • other-open
    .icon-other-open
  • other-close
    .icon-other-close
  • off-the-shelf
    .icon-off-the-shelf
  • counter-close
    .icon-counter-close
  • loan
    .icon-loan
  • m
    .icon-m
  • risk
    .icon-risk
  • speed
    .icon-speed
  • credit-risk
    .icon-credit-risk
  • risk2
    .icon-risk2
  • risk-examine
    .icon-risk-examine
  • monitor1
    .icon-monitor1
  • risk1
    .icon-risk1
  • risk-monitoring
    .icon-risk-monitoring
  • operational-risk
    .icon-operational-risk
  • adaptive-stretching
    .icon-adaptive-stretching
  • align-bottom
    .icon-align-bottom
  • adaptive-stretching-horizontal
    .icon-adaptive-stretching-horizontal
  • align-left
    .icon-align-left
  • align-horizontally
    .icon-align-horizontally
  • align-text-left
    .icon-align-text-left
  • align-text-right
    .icon-align-text-right
  • align-right
    .icon-align-right
  • align-text-center
    .icon-align-text-center
  • alin-verticlly
    .icon-alin-verticlly
  • alphabetic-order
    .icon-alphabetic-order
  • auto-height
    .icon-auto-height
  • border-bottom
    .icon-border-bottom
  • border-horizontal
    .icon-border-horizontal
  • auto-width
    .icon-auto-width
  • border-outer
    .icon-border-outer
  • border-inner
    .icon-border-inner
  • border-verticle
    .icon-border-verticle
  • border-radius
    .icon-border-radius
  • background-color
    .icon-background-color
  • alphabetic-inverted-order
    .icon-alphabetic-inverted-order
  • border-top
    .icon-border-top
  • broken-line
    .icon-broken-line
  • distribute-vertically
    .icon-distribute-vertically
  • border-right
    .icon-border-right
  • border-left
    .icon-border-left
  • circle
    .icon-circle
  • align-top
    .icon-align-top
  • bring-to-front
    .icon-bring-to-front
  • flex-baseline
    .icon-flex-baseline
  • distribute-horizontally
    .icon-distribute-horizontally
  • flex-baseline-horizontal
    .icon-flex-baseline-horizontal
  • dividing-line
    .icon-dividing-line
  • h1
    .icon-h1
  • dot-line
    .icon-dot-line
  • layers
    .icon-layers
  • intersection
    .icon-intersection
  • layout1
    .icon-layout1
  • layout2
    .icon-layout2
  • highlight
    .icon-highlight
  • list1
    .icon-list1
  • layout4
    .icon-layout4
  • layout
    .icon-layout
  • list2
    .icon-list2
  • layout5
    .icon-layout5
  • layout6
    .icon-layout6
  • formula
    .icon-formula
  • margin-verticlly
    .icon-margin-verticlly
  • list3
    .icon-list3
  • pic-center
    .icon-pic-center
  • move-right
    .icon-move-right
  • move-left
    .icon-move-left
  • list
    .icon-list
  • no-effect
    .icon-no-effect
  • move-around
    .icon-move-around
  • radius-upleft
    .icon-radius-upleft
  • pic-left
    .icon-pic-left
  • rectangle1
    .icon-rectangle1
  • strikethrough
    .icon-strikethrough
  • radius-bottomleft
    .icon-radius-bottomleft
  • merge
    .icon-merge
  • table-editing
    .icon-table-editing
  • layout3
    .icon-layout3
  • pic-right
    .icon-pic-right
  • square
    .icon-square
  • radius-bottomright
    .icon-radius-bottomright
  • table-search
    .icon-table-search
  • sent-to-back
    .icon-sent-to-back
  • move
    .icon-move
  • text-style
    .icon-text-style
  • text-italic
    .icon-text-italic
  • text-bold
    .icon-text-bold
  • text-underline
    .icon-text-underline
  • view-list
    .icon-view-list
  • table
    .icon-table
  • text-size
    .icon-text-size
  • text-italic1
    .icon-text-italic1
  • quote
    .icon-quote
  • margin-horizontally
    .icon-margin-horizontally
  • ordered-list
    .icon-ordered-list
  • text
    .icon-text
  • text-style1
    .icon-text-style1
  • radius-upright
    .icon-radius-upright
  • table1
    .icon-table1
  • application3
    .icon-application3
  • branch1
    .icon-branch1
  • batch-input
    .icon-batch-input
  • automatic-deployment
    .icon-automatic-deployment
  • branch3
    .icon-branch3
  • 3d
    .icon-a-3d
  • add-item
    .icon-add-item
  • batch-failure
    .icon-batch-failure
  • add-menu
    .icon-add-menu
  • branch
    .icon-branch
  • branch4
    .icon-branch4
  • add-subset
    .icon-add-subset
  • api
    .icon-api
  • 2d
    .icon-a-2d
  • batch-search
    .icon-batch-search
  • application
    .icon-application
  • abnormal
    .icon-abnormal
  • cloud-cync
    .icon-cloud-cync
  • branch-check
    .icon-branch-check
  • component-initem
    .icon-component-initem
  • button
    .icon-button
  • data-source
    .icon-data-source
  • device-connected
    .icon-device-connected
  • branch2
    .icon-branch2
  • branch5
    .icon-branch5
  • component-progress
    .icon-component-progress
  • component-slider
    .icon-component-slider
  • cloud-upload
    .icon-cloud-upload
  • cloud-backtesting
    .icon-cloud-backtesting
  • application1
    .icon-application1
  • code
    .icon-code
  • cloud-downlad
    .icon-cloud-downlad
  • auto-complete
    .icon-auto-complete
  • component-select
    .icon-component-select
  • component-collapse
    .icon-component-collapse
  • component-steps
    .icon-component-steps
  • components
    .icon-components
  • demand-management
    .icon-demand-management
  • function
    .icon-function
  • item-modify
    .icon-item-modify
  • cloud-server
    .icon-cloud-server
  • database-import
    .icon-database-import
  • data-dictionary
    .icon-data-dictionary
  • data-server
    .icon-data-server
  • earth
    .icon-earth
  • edition
    .icon-edition
  • grid
    .icon-grid
  • component-dropdown
    .icon-component-dropdown
  • device-not-connected
    .icon-device-not-connected
  • CPU
    .icon-CPU
  • contanier
    .icon-contanier
  • cloud-server备份
    .icon-cloud-serverbeifen
  • component-switch
    .icon-component-switch
  • configuration-process
    .icon-configuration-process
  • display-inline-block
    .icon-display-inline-block
  • component-board
    .icon-component-board
  • process-list
    .icon-process-list
  • subset
    .icon-subset
  • container
    .icon-container
  • historical-edition
    .icon-historical-edition
  • collect
    .icon-collect
  • iframe-container
    .icon-iframe-container
  • process-management
    .icon-process-management
  • server
    .icon-server
  • display-inline
    .icon-display-inline
  • usb
    .icon-usb
  • warehousing
    .icon-warehousing
  • sync
    .icon-sync
  • data-grooming
    .icon-data-grooming
  • display-block
    .icon-display-block
  • input
    .icon-input
  • versions-publish
    .icon-versions-publish
  • resource
    .icon-resource
  • display-flex
    .icon-display-flex
  • router
    .icon-router
  • tag
    .icon-tag3
  • to-do-list
    .icon-to-do-list
  • div-tag
    .icon-div-tag
  • process-list-1
    .icon-process-list-1
  • module
    .icon-module
  • drawing-board
    .icon-drawing-board
  • international
    .icon-international
  • ipc-push
    .icon-ipc-push
  • test
    .icon-test
  • versions-publish-1
    .icon-versions-publish-1
  • item
    .icon-item
  • tab-single
    .icon-tab-single
  • output-code
    .icon-output-code
  • database
    .icon-database
  • tree-node
    .icon-tree-node
  • records
    .icon-records
  • tree-list
    .icon-tree-list
  • item-branch
    .icon-item-branch
  • system-data
    .icon-system-data
  • workbench
    .icon-workbench
  • tab
    .icon-tab
  • fault-management
    .icon-fault-management
  • partial-channel-opening
    .icon-partial-channel-opening
  • ws-push
    .icon-ws-push
  • research-process
    .icon-research-process
  • transfer
    .icon-transfer
  • terminal
    .icon-terminal
  • doc-add
    .icon-doc-add
  • contract- fail
    .icon-a-contract-fail
  • doc-search
    .icon-doc-search
  • doc-edit
    .icon-doc-edit
  • file-excel
    .icon-file-excel
  • file-add
    .icon-file-add
  • file-gif
    .icon-file-gif
  • file
    .icon-file
  • document
    .icon-document
  • contract- success
    .icon-a-contract-success
  • file-csv
    .icon-file-csv
  • export
    .icon-export
  • file-pdf
    .icon-file-pdf
  • image-files
    .icon-image-files
  • file-ppt
    .icon-file-ppt
  • Invoice
    .icon-Invoice
  • doc-sync
    .icon-doc-sync
  • file-jpg
    .icon-file-jpg
  • file1
    .icon-file1
  • list-add
    .icon-list-add
  • folder-open
    .icon-folder-open
  • file-zip
    .icon-file-zip
  • file-png
    .icon-file-png
  • file-txt
    .icon-file-txt
  • folder
    .icon-folder
  • preview
    .icon-preview
  • folder-add
    .icon-folder-add
  • transaction-order
    .icon-transaction-order
  • additional-record
    .icon-additional-record
  • file-word
    .icon-file-word
  • import
    .icon-import
  • template
    .icon-template
  • date-time
    .icon-date-time
  • time
    .icon-time
  • 24-hour
    .icon-a-24-hour
  • alam-clock
    .icon-alam-clock
  • stopwatch
    .icon-stopwatch
  • calendar
    .icon-calendar
  • calendar-monthly
    .icon-calendar-monthly
  • calendar-range
    .icon-calendar-range
  • schedule
    .icon-schedule
  • history
    .icon-history
  • calendar-weekly
    .icon-calendar-weekly
  • calendar-view
    .icon-calendar-view
  • user-info
    .icon-user-info
  • user1
    .icon-user1
  • user-portrait
    .icon-user-portrait
  • bank-card
    .icon-bank-card
  • account-cancel
    .icon-account-cancel
  • id-card
    .icon-id-card
  • user
    .icon-user
  • group
    .icon-group
  • user-info1
    .icon-user-info1
  • request-object
    .icon-request-object
  • address-book
    .icon-address-book
  • add-user
    .icon-add-user
  • acccount-add
    .icon-acccount-add
  • user-management
    .icon-user-management
  • user-error
    .icon-user-error
  • fog
    .icon-fog
  • go-out
    .icon-go-out
  • borrow
    .icon-borrow
  • book1
    .icon-book1
  • happy
    .icon-happy
  • course
    .icon-course
  • cloud
    .icon-cloud
  • heart
    .icon-heart
  • gift
    .icon-gift
  • compass
    .icon-compass
  • bad
    .icon-bad
  • ai-interpret
    .icon-ai-interpret
  • building
    .icon-building
  • aim
    .icon-aim
  • briefcase
    .icon-briefcase
  • cloudy
    .icon-cloudy
  • book
    .icon-book
  • moon
    .icon-moon
  • school
    .icon-school
  • business-trip
    .icon-business-trip
  • Review-completed
    .icon-Review-completed
  • successful-approval
    .icon-successful-approval
  • guide-board
    .icon-guide-board
  • notebook
    .icon-notebook
  • light-rain
    .icon-light-rain
  • experiment
    .icon-experiment
  • local
    .icon-local
  • fire
    .icon-fire
  • financial-approval
    .icon-financial-approval
  • fingerprint
    .icon-fingerprint
  • degree-hat
    .icon-degree-hat
  • smart-brain
    .icon-smart-brain
  • trophy
    .icon-trophy
  • rocket
    .icon-rocket
  • performance-evaluation
    .icon-performance-evaluation
  • heavy-rain
    .icon-heavy-rain
  • neural-network
    .icon-neural-network
  • wifi
    .icon-wifi
  • lighting
    .icon-lighting
  • good
    .icon-good
  • umbrella
    .icon-umbrella
  • wallet
    .icon-wallet
  • wind
    .icon-wind
  • approval-process
    .icon-approval-process
  • dimission-management
    .icon-dimission-management
  • signal
    .icon-signal
  • sun
    .icon-sun
  • contract-flow
    .icon-contract-flow
  • local1
    .icon-local1
  • unhappy
    .icon-unhappy
  • star
    .icon-star
  • lighting1
    .icon-lighting1
  • personnel-approval
    .icon-personnel-approval
  • work-application
    .icon-work-application
  • hourglass-empty
    .icon-hourglass-empty
  • hourglass-full
    .icon-hourglass-full
  • shop
    .icon-shop
  • meeting-reservation
    .icon-meeting-reservation
  • receive
    .icon-receive
  • contract-statement
    .icon-contract-statement
  • drag
    .icon-drag
  • clear
    .icon-clear
  • delete1
    .icon-delete1
  • email-open
    .icon-email-open
  • edit1
    .icon-edit1
  • link
    .icon-link
  • add
    .icon-add
  • cut
    .icon-cut
  • announcement
    .icon-announcement
  • edit
    .icon-edit
  • announcement1
    .icon-announcement1
  • clear1
    .icon-clear1
  • copy
    .icon-copy
  • @
    .icon-a-
  • add1
    .icon-add1
  • equal
    .icon-equal
  • pointer
    .icon-pointer
  • email
    .icon-email
  • cutting
    .icon-cutting
  • link1
    .icon-link1
  • sort-amount-up
    .icon-sort-amount-up
  • save
    .icon-save
  • send
    .icon-send
  • news
    .icon-news
  • pushpin
    .icon-pushpin
  • must-fill-in
    .icon-must-fill-in
  • reduce
    .icon-reduce
  • plus
    .icon-plus
  • delete
    .icon-delete
  • share
    .icon-share
  • link2
    .icon-link2
  • find
    .icon-find
  • scan
    .icon-scan
  • reduce1
    .icon-reduce1
  • inbox
    .icon-inbox
  • minus
    .icon-minus
  • filter
    .icon-filter
  • afferent
    .icon-afferent
  • arrow-up
    .icon-arrow-up
  • arrow-right
    .icon-arrow-right
  • arrow-down
    .icon-arrow-down
  • unlink
    .icon-unlink
  • search1
    .icon-search1
  • save1
    .icon-save1
  • printer
    .icon-printer
  • platte
    .icon-platte
  • mark
    .icon-mark
  • link-interrupt
    .icon-link-interrupt
  • sort-amount-down
    .icon-sort-amount-down
  • search
    .icon-search
  • down-circle
    .icon-down-circle
  • expand
    .icon-expand
  • export-all
    .icon-export-all
  • go-on
    .icon-go-on
  • double-up
    .icon-double-up
  • back
    .icon-back
  • down
    .icon-down
  • collapse
    .icon-collapse
  • movable
    .icon-movable
  • double_right
    .icon-double_right
  • direction-arrow-fall
    .icon-direction-arrow-fall
  • efferent
    .icon-efferent
  • connection-arrow
    .icon-connection-arrow
  • direction-arrow-rise
    .icon-direction-arrow-rise
  • double-left
    .icon-double-left
  • enter
    .icon-enter
  • double-down
    .icon-double-down
  • arrow-left
    .icon-arrow-left
  • download
    .icon-download
  • logout
    .icon-logout
  • login
    .icon-login
  • sliding-vertical
    .icon-sliding-vertical
  • trending-down
    .icon-trending-down
  • go-back
    .icon-go-back
  • sliding-horizontal
    .icon-sliding-horizontal
  • to-bottom
    .icon-to-bottom
  • down1
    .icon-down1
  • left-circle
    .icon-left-circle
  • full-screen
    .icon-full-screen
  • click-to-fold
    .icon-click-to-fold
  • left
    .icon-left
  • switch1
    .icon-switch1
  • line-height
    .icon-line-height
  • switch-left
    .icon-switch-left
  • reject
    .icon-reject
  • shuffle
    .icon-shuffle
  • undo
    .icon-undo
  • to-left
    .icon-to-left
  • sort1
    .icon-sort1
  • upload
    .icon-upload
  • to-top
    .icon-to-top
  • switch-right
    .icon-switch-right
  • off-screen
    .icon-off-screen
  • right1
    .icon-right1
  • left1
    .icon-left1
  • right-circle
    .icon-right-circle
  • to-right
    .icon-to-right
  • sort
    .icon-sort
  • transfer-data
    .icon-transfer-data
  • up
    .icon-up
  • un-top
    .icon-un-top
  • up-circle
    .icon-up-circle
  • right
    .icon-right
  • trending-up
    .icon-trending-up
  • next
    .icon-next
  • up1
    .icon-up1
  • switch
    .icon-switch
  • device
    .icon-device
  • config
    .icon-config
  • check-box
    .icon-check-box
  • check
    .icon-check
  • maximize
    .icon-maximize
  • custmoer
    .icon-custmoer
  • permission
    .icon-permission
  • tag
    .icon-tag
  • refresh
    .icon-refresh
  • preview-close
    .icon-preview-close
  • tag1
    .icon-tag1
  • loading
    .icon-loading
  • logout1
    .icon-logout1
  • refresh1
    .icon-refresh1
  • check-box-1
    .icon-check-box-1
  • minimize
    .icon-minimize
  • close1
    .icon-close1
  • key
    .icon-key
  • laptop
    .icon-laptop
  • close
    .icon-close
  • config1
    .icon-config1
  • menu-fold
    .icon-menu-fold
  • message
    .icon-message
  • mobile
    .icon-mobile
  • lock
    .icon-lock
  • all-close
    .icon-all-close
  • home
    .icon-home
  • tool
    .icon-tool
  • more1
    .icon-more1
  • home1
    .icon-home1
  • point-out
    .icon-point-out
  • message2
    .icon-message2
  • skin
    .icon-skin
  • computer
    .icon-computer
  • preview-close1
    .icon-preview-close1
  • zoom-in
    .icon-zoom-in
  • setting1
    .icon-setting1
  • more
    .icon-more
  • menu
    .icon-menu
  • setting
    .icon-setting
  • tablet
    .icon-tablet
  • power
    .icon-power
  • reset-password
    .icon-reset-password
  • zoom-out
    .icon-zoom-out
  • menu-unfold
    .icon-menu-unfold
  • loading1
    .icon-loading1
  • multi-window
    .icon-multi-window
  • remind
    .icon-remind
  • tag2
    .icon-tag2
  • more2
    .icon-more2
  • message1
    .icon-message1
  • unlock
    .icon-unlock
  • preview-open
    .icon-preview-open

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

  • group-expand
    #icon-group-expand
  • group-collapse
    #icon-group-collapse
  • Zoom to 100%
    #icon-a-Zoomto100
  • 存款业务
    #icon-cunkuanyewu
  • 国际业务
    #icon-guojiyewu
  • 贷款业务-1
    #icon-daikuanyewu-1
  • 首页-1
    #icon-shouye-1
  • 客户注册-1
    #icon-kehuzhuce-1
  • 会计核算
    #icon-huijihesuan
  • 投资业务
    #icon-touziyewu
  • 会计核算-1
    #icon-huijihesuan-1
  • 结算业务-1
    #icon-jiesuanyewu-1
  • 票据业务-1
    #icon-piaojuyewu-1
  • 集团业务-1
    #icon-jituanyewu-1
  • 存款业务-1
    #icon-cunkuanyewu-1
  • 国际业务-1
    #icon-guojiyewu-1
  • 核心服务-1
    #icon-hexinfuwu-1
  • 资金池
    #icon-zijinchi
  • 同业业务
    #icon-tongyeyewu
  • 客户信息
    #icon-kehuxinxi
  • 金融网关
    #icon-jinrongwangguan
  • 配置中心-1
    #icon-peizhizhongxin-1
  • 金融网关-1
    #icon-jinrongwangguan-1
  • 集团业务
    #icon-jituanyewu
  • 资金池-1
    #icon-zijinchi-1
  • 同业授信-1
    #icon-tongyeshouxin-1
  • 首页
    #icon-shouye
  • 集票宝-1
    #icon-jipiaobao-1
  • 金融资产-1
    #icon-jinrongzichan-1
  • 同业授信
    #icon-tongyeshouxin
  • 票据业务
    #icon-piaojuyewu
  • 结算业务
    #icon-jiesuanyewu
  • 客户注册
    #icon-kehuzhuce
  • 集票宝
    #icon-jipiaobao
  • 配置中心
    #icon-peizhizhongxin
  • 核心服务
    #icon-hexinfuwu
  • 客户信息-1
    #icon-kehuxinxi-1
  • 金融资产
    #icon-jinrongzichan
  • 贷款业务
    #icon-daikuanyewu
  • 同业业务-1
    #icon-tongyeyewu-1
  • 投资业务-1
    #icon-touziyewu-1
  • application-fill
    #icon-application-fill
  • application1-fill
    #icon-application1-fill
  • fail-fill
    #icon-fail-fill
  • circle-fill
    #icon-circle-fill
  • building-fill
    #icon-building-fill
  • dashboard-fill
    #icon-dashboard-fill
  • arrow-down-fill
    #icon-arrow-down-fill
  • arrow-up-fill
    #icon-arrow-up-fill
  • audit-fill
    #icon-audit-fill
  • bond-quota-fill
    #icon-bond-quota-fill
  • api-fill
    #icon-api-fill
  • add-fill
    #icon-add-fill
  • bank-card-fill
    #icon-bank-card-fill
  • add1-fill
    #icon-add1-fill
  • arrow-left-fill
    #icon-arrow-left-fill
  • alarm-fill
    #icon-alarm-fill
  • home1-fill
    #icon-home1-fill
  • check-box1
    #icon-check-box1
  • delete-fill
    #icon-delete-fill
  • calendar-weekly-fill
    #icon-calendar-weekly-fill
  • dollar-fill
    #icon-dollar-fill
  • layers-fill
    #icon-layers-fill
  • attention-fill
    #icon-attention-fill
  • fund-fill
    #icon-fund-fill
  • chart-pie-fill
    #icon-chart-pie-fill
  • earth-fill
    #icon-earth-fill
  • bank-fill
    #icon-bank-fill
  • components-fill
    #icon-components-fill
  • arrow-right-fill
    #icon-arrow-right-fill
  • document-fill
    #icon-document-fill
  • edit-fill
    #icon-edit-fill
  • function-fill
    #icon-function-fill
  • more2-fill
    #icon-more2-fill
  • next-fill
    #icon-next-fill
  • pointer-fill
    #icon-pointer-fill
  • lightning1-fill
    #icon-lightning1-fill
  • preview-open-fill
    #icon-preview-open-fill
  • folder-fill
    #icon-folder-fill
  • maximize-fill
    #icon-maximize-fill
  • branch-fill
    #icon-branch-fill
  • doc-search-fill
    #icon-doc-search-fill
  • remind-fill
    #icon-remind-fill
  • computer-fill
    #icon-computer-fill
  • delete1-fill
    #icon-delete1-fill
  • back0-fill
    #icon-back0-fill
  • success-fill
    #icon-success-fill
  • parameter-fill
    #icon-parameter-fill
  • time-fill
    #icon-time-fill
  • reduce-fill
    #icon-reduce-fill
  • item-fill
    #icon-item-fill
  • home-fill
    #icon-home-fill
  • risk2-fill
    #icon-risk2-fill
  • skin-fill
    #icon-skin-fill
  • list3-fill
    #icon-list3-fill
  • Cross-border funds-fill
    #icon-a-Cross-borderfunds-fill
  • forbid-fill
    #icon-forbid-fill
  • heart-fill
    #icon-heart-fill
  • Illegal access-fill
    #icon-a-Illegalaccess-fill
  • to-do-list-fill
    #icon-to-do-list-fill
  • to-do-list1-fill
    #icon-to-do-list1-fill
  • setting1-fill
    #icon-setting1-fill
  • mark-fill
    #icon-mark-fill
  • view-list-fill
    #icon-view-list-fill
  • volume-fill-1
    #icon-volume-fill-1
  • rmb-fill
    #icon-rmb-fill
  • help-fill
    #icon-help-fill
  • message2-fill
    #icon-message2-fill
  • reduce1-fill
    #icon-reduce1-fill
  • user-management-fill
    #icon-user-management-fill
  • info-fill
    #icon-info-fill
  • message-fill
    #icon-message-fill
  • tag-fill
    #icon-tag-fill
  • picture-fill
    #icon-picture-fill
  • trend1-fill
    #icon-trend1-fill
  • terminal-fill
    #icon-terminal-fill
  • star-fill
    #icon-star-fill
  • setting-fill
    #icon-setting-fill
  • user1-fill
    #icon-user1-fill
  • term-exposure-fill
    #icon-term-exposure-fill
  • monitor-fill
    #icon-monitor-fill
  • user-portrait-fill
    #icon-user-portrait-fill
  • volume-fill
    #icon-volume-fill
  • workbench-fill
    #icon-workbench-fill
  • sort-fill
    #icon-sort-fill
  • forbid
    #icon-forbid
  • info
    #icon-info
  • attention
    #icon-attention
  • help
    #icon-help
  • alarm
    #icon-alarm
  • caution
    #icon-caution
  • video1
    #icon-video1
  • play1
    #icon-play1
  • play
    #icon-play
  • carousel
    #icon-carousel
  • camera
    #icon-camera
  • carousel-single
    #icon-carousel-single
  • music
    #icon-music
  • pause
    #icon-pause
  • success
    #icon-success
  • tips1
    #icon-tips1
  • tips
    #icon-tips
  • fail
    #icon-fail
  • alarm1
    #icon-alarm1
  • chart-histogram2
    #icon-chart-histogram2
  • chart-histogram
    #icon-chart-histogram
  • chart-area
    #icon-chart-area
  • average
    #icon-average
  • phone
    #icon-phone
  • volume
    #icon-volume
  • voice
    #icon-voice
  • volume-up
    #icon-volume-up
  • picture
    #icon-picture
  • volume-mute
    #icon-volume-mute
  • volume-down
    #icon-volume-down
  • video
    #icon-video
  • chart-pie
    #icon-chart-pie
  • chart-scatter
    #icon-chart-scatter
  • chart-line-multi
    #icon-chart-line-multi
  • positive
    #icon-positive
  • histogram
    #icon-histogram
  • ranking
    #icon-ranking
  • heat-map
    #icon-heat-map
  • chart-stock
    #icon-chart-stock
  • chart-ring
    #icon-chart-ring
  • chart-combo
    #icon-chart-combo
  • chart-stacked-bar
    #icon-chart-stacked-bar
  • chart-radar
    #icon-chart-radar
  • chart-line
    #icon-chart-line
  • chart-histogram1
    #icon-chart-histogram1
  • chart-data
    #icon-chart-data
  • k-vertical3
    #icon-k-vertical3
  • k-diagonal4
    #icon-k-diagonal4
  • k-horizontal1
    #icon-k-horizontal1
  • fibonacci
    #icon-fibonacci
  • k-horizontal
    #icon-k-horizontal
  • k-diagonal5
    #icon-k-diagonal5
  • k-diagonal2
    #icon-k-diagonal2
  • chart-stock1
    #icon-chart-stock1
  • minimum
    #icon-minimum
  • maximum
    #icon-maximum
  • negative
    #icon-negative
  • pivot-table
    #icon-pivot-table
  • chart-line-area
    #icon-chart-line-area
  • index
    #icon-index
  • dollar
    #icon-dollar
  • information1
    #icon-information1
  • account
    #icon-account
  • information
    #icon-information
  • bank
    #icon-bank
  • k-diagonal
    #icon-k-diagonal
  • k-horizontal123
    #icon-k-horizontal123
  • k-diagonal3
    #icon-k-diagonal3
  • k-diagonal1
    #icon-k-diagonal1
  • k-vertical1
    #icon-k-vertical1
  • fx
    #icon-fx
  • k-vertical2
    #icon-k-vertical2
  • k-horizontal2
    #icon-k-horizontal2
  • k-vertical
    #icon-k-vertical
  • fixed-assets
    #icon-fixed-assets
  • sales-approval
    #icon-sales-approval1
  • product
    #icon-product
  • loans
    #icon-loans
  • bank-add
    #icon-bank-add
  • research
    #icon-research
  • coin
    #icon-coin
  • information2
    #icon-information2
  • trend
    #icon-trend
  • trend1
    #icon-trend1
  • money-collect
    #icon-money-collect
  • date
    #icon-date
  • euro-1
    #icon-euro-1
  • money-pay
    #icon-money-pay
  • euro
    #icon-euro
  • swap
    #icon-swap
  • far
    #icon-far
  • precious-metal-1
    #icon-precious-metal-1
  • near
    #icon-near
  • fund
    #icon-fund
  • futures
    #icon-futures
  • spot
    #icon-spot
  • exchange
    #icon-exchange
  • forward
    #icon-forward
  • bond
    #icon-bond
  • precious-metal
    #icon-precious-metal
  • foreign-currency
    #icon-foreign-currency
  • foreign-exchange
    #icon-foreign-exchange
  • commodities
    #icon-commodities
  • money
    #icon-money
  • expire-exercise
    #icon-expire-exercise
  • fast-trade
    #icon-fast-trade
  • extension
    #icon-extension
  • delivery
    #icon-delivery
  • delivery-application
    #icon-delivery-application
  • calculation
    #icon-calculation
  • ccalculator
    #icon-ccalculator
  • backtrack
    #icon-backtrack
  • abandon
    #icon-abandon
  • closing-position1
    #icon-closing-position1
  • business
    #icon-business
  • advance
    #icon-advance
  • audit
    #icon-audit
  • option
    #icon-option
  • commodities1
    #icon-commodities1
  • spot-goods
    #icon-spot-goods
  • payment-review
    #icon-payment-review
  • trade
    #icon-trade
  • fixing
    #icon-fixing
  • knock-in-out
    #icon-knock-in-out
  • listing1
    #icon-listing1
  • early-delivery
    #icon-early-delivery
  • forward-option
    #icon-forward-option
  • pay
    #icon-pay
  • early-exercise
    #icon-early-exercise
  • exercise
    #icon-exercise
  • closing-position
    #icon-closing-position
  • listing
    #icon-listing
  • Interest-collection
    #icon-Interest-collection
  • fixed-to-selection
    #icon-fixed-to-selection
  • inquiry
    #icon-inquiry
  • due
    #icon-due
  • price-distribution
    #icon-price-distribution
  • group-add
    #icon-group-add
  • multiple-lock-prices
    #icon-multiple-lock-prices
  • unlocking
    #icon-unlocking
  • withdraw
    #icon-withdraw
  • overdue
    #icon-overdue
  • differential-delivery
    #icon-differential-delivery
  • strategy-comparison
    #icon-strategy-comparison
  • quota release
    #icon-a-quotarelease
  • position
    #icon-position
  • strategy-optimization
    #icon-strategy-optimization
  • shopping-cart
    #icon-shopping-cart
  • qrcode
    #icon-qrcode
  • fixed-investment
    #icon-fixed-investment
  • operation
    #icon-operation
  • shopping-bag
    #icon-shopping-bag
  • order-inquiry
    #icon-order-inquiry
  • channel-control
    #icon-channel-control
  • biding
    #icon-biding
  • future-managed
    #icon-future-managed
  • bond-quotaanagement
    #icon-bond-quotaanagement
  • cost-control
    #icon-cost-control
  • stop-loss
    #icon-stop-loss
  • lock-price
    #icon-lock-price
  • listing2
    #icon-listing2
  • no-trade
    #icon-no-trade
  • stop-profit
    #icon-stop-profit
  • reversal
    #icon-reversal
  • option-exercise
    #icon-option-exercise
  • selective-delivery
    #icon-selective-delivery
  • listing-succeed
    #icon-listing-succeed
  • trial
    #icon-trial
  • counter- open
    #icon-a-counter-open
  • l
    #icon-l
  • client-open
    #icon-client-open
  • tranding-setting
    #icon-tranding-setting
  • spot-exposure
    #icon-spot-exposure
  • financial-statements
    #icon-financial-statements
  • position-managed
    #icon-position-managed
  • system-solution
    #icon-system-solution
  • term-exposure
    #icon-term-exposure
  • information-query
    #icon-information-query
  • cost-management
    #icon-cost-management
  • order-management
    #icon-order-management
  • client-close
    #icon-client-close
  • h
    #icon-h
  • market-risk
    #icon-market-risk
  • monitor
    #icon-monitor
  • dashboard
    #icon-dashboard
  • list
    #icon-list4
  • prefecture-amount
    #icon-prefecture-amount
  • handle
    #icon-handle
  • hand
    #icon-hand
  • stop-selling
    #icon-stop-selling
  • qt-price
    #icon-qt-price
  • sales-approval
    #icon-sales-approval
  • other-open
    #icon-other-open
  • other-close
    #icon-other-close
  • off-the-shelf
    #icon-off-the-shelf
  • counter-close
    #icon-counter-close
  • loan
    #icon-loan
  • m
    #icon-m
  • risk
    #icon-risk
  • speed
    #icon-speed
  • credit-risk
    #icon-credit-risk
  • risk2
    #icon-risk2
  • risk-examine
    #icon-risk-examine
  • monitor1
    #icon-monitor1
  • risk1
    #icon-risk1
  • risk-monitoring
    #icon-risk-monitoring
  • operational-risk
    #icon-operational-risk
  • adaptive-stretching
    #icon-adaptive-stretching
  • align-bottom
    #icon-align-bottom
  • adaptive-stretching-horizontal
    #icon-adaptive-stretching-horizontal
  • align-left
    #icon-align-left
  • align-horizontally
    #icon-align-horizontally
  • align-text-left
    #icon-align-text-left
  • align-text-right
    #icon-align-text-right
  • align-right
    #icon-align-right
  • align-text-center
    #icon-align-text-center
  • alin-verticlly
    #icon-alin-verticlly
  • alphabetic-order
    #icon-alphabetic-order
  • auto-height
    #icon-auto-height
  • border-bottom
    #icon-border-bottom
  • border-horizontal
    #icon-border-horizontal
  • auto-width
    #icon-auto-width
  • border-outer
    #icon-border-outer
  • border-inner
    #icon-border-inner
  • border-verticle
    #icon-border-verticle
  • border-radius
    #icon-border-radius
  • background-color
    #icon-background-color
  • alphabetic-inverted-order
    #icon-alphabetic-inverted-order
  • border-top
    #icon-border-top
  • broken-line
    #icon-broken-line
  • distribute-vertically
    #icon-distribute-vertically
  • border-right
    #icon-border-right
  • border-left
    #icon-border-left
  • circle
    #icon-circle
  • align-top
    #icon-align-top
  • bring-to-front
    #icon-bring-to-front
  • flex-baseline
    #icon-flex-baseline
  • distribute-horizontally
    #icon-distribute-horizontally
  • flex-baseline-horizontal
    #icon-flex-baseline-horizontal
  • dividing-line
    #icon-dividing-line
  • h1
    #icon-h1
  • dot-line
    #icon-dot-line
  • layers
    #icon-layers
  • intersection
    #icon-intersection
  • layout1
    #icon-layout1
  • layout2
    #icon-layout2
  • highlight
    #icon-highlight
  • list1
    #icon-list1
  • layout4
    #icon-layout4
  • layout
    #icon-layout
  • list2
    #icon-list2
  • layout5
    #icon-layout5
  • layout6
    #icon-layout6
  • formula
    #icon-formula
  • margin-verticlly
    #icon-margin-verticlly
  • list3
    #icon-list3
  • pic-center
    #icon-pic-center
  • move-right
    #icon-move-right
  • move-left
    #icon-move-left
  • list
    #icon-list
  • no-effect
    #icon-no-effect
  • move-around
    #icon-move-around
  • radius-upleft
    #icon-radius-upleft
  • pic-left
    #icon-pic-left
  • rectangle1
    #icon-rectangle1
  • strikethrough
    #icon-strikethrough
  • radius-bottomleft
    #icon-radius-bottomleft
  • merge
    #icon-merge
  • table-editing
    #icon-table-editing
  • layout3
    #icon-layout3
  • pic-right
    #icon-pic-right
  • square
    #icon-square
  • radius-bottomright
    #icon-radius-bottomright
  • table-search
    #icon-table-search
  • sent-to-back
    #icon-sent-to-back
  • move
    #icon-move
  • text-style
    #icon-text-style
  • text-italic
    #icon-text-italic
  • text-bold
    #icon-text-bold
  • text-underline
    #icon-text-underline
  • view-list
    #icon-view-list
  • table
    #icon-table
  • text-size
    #icon-text-size
  • text-italic1
    #icon-text-italic1
  • quote
    #icon-quote
  • margin-horizontally
    #icon-margin-horizontally
  • ordered-list
    #icon-ordered-list
  • text
    #icon-text
  • text-style1
    #icon-text-style1
  • radius-upright
    #icon-radius-upright
  • table1
    #icon-table1
  • application3
    #icon-application3
  • branch1
    #icon-branch1
  • batch-input
    #icon-batch-input
  • automatic-deployment
    #icon-automatic-deployment
  • branch3
    #icon-branch3
  • 3d
    #icon-a-3d
  • add-item
    #icon-add-item
  • batch-failure
    #icon-batch-failure
  • add-menu
    #icon-add-menu
  • branch
    #icon-branch
  • branch4
    #icon-branch4
  • add-subset
    #icon-add-subset
  • api
    #icon-api
  • 2d
    #icon-a-2d
  • batch-search
    #icon-batch-search
  • application
    #icon-application
  • abnormal
    #icon-abnormal
  • cloud-cync
    #icon-cloud-cync
  • branch-check
    #icon-branch-check
  • component-initem
    #icon-component-initem
  • button
    #icon-button
  • data-source
    #icon-data-source
  • device-connected
    #icon-device-connected
  • branch2
    #icon-branch2
  • branch5
    #icon-branch5
  • component-progress
    #icon-component-progress
  • component-slider
    #icon-component-slider
  • cloud-upload
    #icon-cloud-upload
  • cloud-backtesting
    #icon-cloud-backtesting
  • application1
    #icon-application1
  • code
    #icon-code
  • cloud-downlad
    #icon-cloud-downlad
  • auto-complete
    #icon-auto-complete
  • component-select
    #icon-component-select
  • component-collapse
    #icon-component-collapse
  • component-steps
    #icon-component-steps
  • components
    #icon-components
  • demand-management
    #icon-demand-management
  • function
    #icon-function
  • item-modify
    #icon-item-modify
  • cloud-server
    #icon-cloud-server
  • database-import
    #icon-database-import
  • data-dictionary
    #icon-data-dictionary
  • data-server
    #icon-data-server
  • earth
    #icon-earth
  • edition
    #icon-edition
  • grid
    #icon-grid
  • component-dropdown
    #icon-component-dropdown
  • device-not-connected
    #icon-device-not-connected
  • CPU
    #icon-CPU
  • contanier
    #icon-contanier
  • cloud-server备份
    #icon-cloud-serverbeifen
  • component-switch
    #icon-component-switch
  • configuration-process
    #icon-configuration-process
  • display-inline-block
    #icon-display-inline-block
  • component-board
    #icon-component-board
  • process-list
    #icon-process-list
  • subset
    #icon-subset
  • container
    #icon-container
  • historical-edition
    #icon-historical-edition
  • collect
    #icon-collect
  • iframe-container
    #icon-iframe-container
  • process-management
    #icon-process-management
  • server
    #icon-server
  • display-inline
    #icon-display-inline
  • usb
    #icon-usb
  • warehousing
    #icon-warehousing
  • sync
    #icon-sync
  • data-grooming
    #icon-data-grooming
  • display-block
    #icon-display-block
  • input
    #icon-input
  • versions-publish
    #icon-versions-publish
  • resource
    #icon-resource
  • display-flex
    #icon-display-flex
  • router
    #icon-router
  • tag
    #icon-tag3
  • to-do-list
    #icon-to-do-list
  • div-tag
    #icon-div-tag
  • process-list-1
    #icon-process-list-1
  • module
    #icon-module
  • drawing-board
    #icon-drawing-board
  • international
    #icon-international
  • ipc-push
    #icon-ipc-push
  • test
    #icon-test
  • versions-publish-1
    #icon-versions-publish-1
  • item
    #icon-item
  • tab-single
    #icon-tab-single
  • output-code
    #icon-output-code
  • database
    #icon-database
  • tree-node
    #icon-tree-node
  • records
    #icon-records
  • tree-list
    #icon-tree-list
  • item-branch
    #icon-item-branch
  • system-data
    #icon-system-data
  • workbench
    #icon-workbench
  • tab
    #icon-tab
  • fault-management
    #icon-fault-management
  • partial-channel-opening
    #icon-partial-channel-opening
  • ws-push
    #icon-ws-push
  • research-process
    #icon-research-process
  • transfer
    #icon-transfer
  • terminal
    #icon-terminal
  • doc-add
    #icon-doc-add
  • contract- fail
    #icon-a-contract-fail
  • doc-search
    #icon-doc-search
  • doc-edit
    #icon-doc-edit
  • file-excel
    #icon-file-excel
  • file-add
    #icon-file-add
  • file-gif
    #icon-file-gif
  • file
    #icon-file
  • document
    #icon-document
  • contract- success
    #icon-a-contract-success
  • file-csv
    #icon-file-csv
  • export
    #icon-export
  • file-pdf
    #icon-file-pdf
  • image-files
    #icon-image-files
  • file-ppt
    #icon-file-ppt
  • Invoice
    #icon-Invoice
  • doc-sync
    #icon-doc-sync
  • file-jpg
    #icon-file-jpg
  • file1
    #icon-file1
  • list-add
    #icon-list-add
  • folder-open
    #icon-folder-open
  • file-zip
    #icon-file-zip
  • file-png
    #icon-file-png
  • file-txt
    #icon-file-txt
  • folder
    #icon-folder
  • preview
    #icon-preview
  • folder-add
    #icon-folder-add
  • transaction-order
    #icon-transaction-order
  • additional-record
    #icon-additional-record
  • file-word
    #icon-file-word
  • import
    #icon-import
  • template
    #icon-template
  • date-time
    #icon-date-time
  • time
    #icon-time
  • 24-hour
    #icon-a-24-hour
  • alam-clock
    #icon-alam-clock
  • stopwatch
    #icon-stopwatch
  • calendar
    #icon-calendar
  • calendar-monthly
    #icon-calendar-monthly
  • calendar-range
    #icon-calendar-range
  • schedule
    #icon-schedule
  • history
    #icon-history
  • calendar-weekly
    #icon-calendar-weekly
  • calendar-view
    #icon-calendar-view
  • user-info
    #icon-user-info
  • user1
    #icon-user1
  • user-portrait
    #icon-user-portrait
  • bank-card
    #icon-bank-card
  • account-cancel
    #icon-account-cancel
  • id-card
    #icon-id-card
  • user
    #icon-user
  • group
    #icon-group
  • user-info1
    #icon-user-info1
  • request-object
    #icon-request-object
  • address-book
    #icon-address-book
  • add-user
    #icon-add-user
  • acccount-add
    #icon-acccount-add
  • user-management
    #icon-user-management
  • user-error
    #icon-user-error
  • fog
    #icon-fog
  • go-out
    #icon-go-out
  • borrow
    #icon-borrow
  • book1
    #icon-book1
  • happy
    #icon-happy
  • course
    #icon-course
  • cloud
    #icon-cloud
  • heart
    #icon-heart
  • gift
    #icon-gift
  • compass
    #icon-compass
  • bad
    #icon-bad
  • ai-interpret
    #icon-ai-interpret
  • building
    #icon-building
  • aim
    #icon-aim
  • briefcase
    #icon-briefcase
  • cloudy
    #icon-cloudy
  • book
    #icon-book
  • moon
    #icon-moon
  • school
    #icon-school
  • business-trip
    #icon-business-trip
  • Review-completed
    #icon-Review-completed
  • successful-approval
    #icon-successful-approval
  • guide-board
    #icon-guide-board
  • notebook
    #icon-notebook
  • light-rain
    #icon-light-rain
  • experiment
    #icon-experiment
  • local
    #icon-local
  • fire
    #icon-fire
  • financial-approval
    #icon-financial-approval
  • fingerprint
    #icon-fingerprint
  • degree-hat
    #icon-degree-hat
  • smart-brain
    #icon-smart-brain
  • trophy
    #icon-trophy
  • rocket
    #icon-rocket
  • performance-evaluation
    #icon-performance-evaluation
  • heavy-rain
    #icon-heavy-rain
  • neural-network
    #icon-neural-network
  • wifi
    #icon-wifi
  • lighting
    #icon-lighting
  • good
    #icon-good
  • umbrella
    #icon-umbrella
  • wallet
    #icon-wallet
  • wind
    #icon-wind
  • approval-process
    #icon-approval-process
  • dimission-management
    #icon-dimission-management
  • signal
    #icon-signal
  • sun
    #icon-sun
  • contract-flow
    #icon-contract-flow
  • local1
    #icon-local1
  • unhappy
    #icon-unhappy
  • star
    #icon-star
  • lighting1
    #icon-lighting1
  • personnel-approval
    #icon-personnel-approval
  • work-application
    #icon-work-application
  • hourglass-empty
    #icon-hourglass-empty
  • hourglass-full
    #icon-hourglass-full
  • shop
    #icon-shop
  • meeting-reservation
    #icon-meeting-reservation
  • receive
    #icon-receive
  • contract-statement
    #icon-contract-statement
  • drag
    #icon-drag
  • clear
    #icon-clear
  • delete1
    #icon-delete1
  • email-open
    #icon-email-open
  • edit1
    #icon-edit1
  • link
    #icon-link
  • add
    #icon-add
  • cut
    #icon-cut
  • announcement
    #icon-announcement
  • edit
    #icon-edit
  • announcement1
    #icon-announcement1
  • clear1
    #icon-clear1
  • copy
    #icon-copy
  • @
    #icon-a-
  • add1
    #icon-add1
  • equal
    #icon-equal
  • pointer
    #icon-pointer
  • email
    #icon-email
  • cutting
    #icon-cutting
  • link1
    #icon-link1
  • sort-amount-up
    #icon-sort-amount-up
  • save
    #icon-save
  • send
    #icon-send
  • news
    #icon-news
  • pushpin
    #icon-pushpin
  • must-fill-in
    #icon-must-fill-in
  • reduce
    #icon-reduce
  • plus
    #icon-plus
  • delete
    #icon-delete
  • share
    #icon-share
  • link2
    #icon-link2
  • find
    #icon-find
  • scan
    #icon-scan
  • reduce1
    #icon-reduce1
  • inbox
    #icon-inbox
  • minus
    #icon-minus
  • filter
    #icon-filter
  • afferent
    #icon-afferent
  • arrow-up
    #icon-arrow-up
  • arrow-right
    #icon-arrow-right
  • arrow-down
    #icon-arrow-down
  • unlink
    #icon-unlink
  • search1
    #icon-search1
  • save1
    #icon-save1
  • printer
    #icon-printer
  • platte
    #icon-platte
  • mark
    #icon-mark
  • link-interrupt
    #icon-link-interrupt
  • sort-amount-down
    #icon-sort-amount-down
  • search
    #icon-search
  • down-circle
    #icon-down-circle
  • expand
    #icon-expand
  • export-all
    #icon-export-all
  • go-on
    #icon-go-on
  • double-up
    #icon-double-up
  • back
    #icon-back
  • down
    #icon-down
  • collapse
    #icon-collapse
  • movable
    #icon-movable
  • double_right
    #icon-double_right
  • direction-arrow-fall
    #icon-direction-arrow-fall
  • efferent
    #icon-efferent
  • connection-arrow
    #icon-connection-arrow
  • direction-arrow-rise
    #icon-direction-arrow-rise
  • double-left
    #icon-double-left
  • enter
    #icon-enter
  • double-down
    #icon-double-down
  • arrow-left
    #icon-arrow-left
  • download
    #icon-download
  • logout
    #icon-logout
  • login
    #icon-login
  • sliding-vertical
    #icon-sliding-vertical
  • trending-down
    #icon-trending-down
  • go-back
    #icon-go-back
  • sliding-horizontal
    #icon-sliding-horizontal
  • to-bottom
    #icon-to-bottom
  • down1
    #icon-down1
  • left-circle
    #icon-left-circle
  • full-screen
    #icon-full-screen
  • click-to-fold
    #icon-click-to-fold
  • left
    #icon-left
  • switch1
    #icon-switch1
  • line-height
    #icon-line-height
  • switch-left
    #icon-switch-left
  • reject
    #icon-reject
  • shuffle
    #icon-shuffle
  • undo
    #icon-undo
  • to-left
    #icon-to-left
  • sort1
    #icon-sort1
  • upload
    #icon-upload
  • to-top
    #icon-to-top
  • switch-right
    #icon-switch-right
  • off-screen
    #icon-off-screen
  • right1
    #icon-right1
  • left1
    #icon-left1
  • right-circle
    #icon-right-circle
  • to-right
    #icon-to-right
  • sort
    #icon-sort
  • transfer-data
    #icon-transfer-data
  • up
    #icon-up
  • un-top
    #icon-un-top
  • up-circle
    #icon-up-circle
  • right
    #icon-right
  • trending-up
    #icon-trending-up
  • next
    #icon-next
  • up1
    #icon-up1
  • switch
    #icon-switch
  • device
    #icon-device
  • config
    #icon-config
  • check-box
    #icon-check-box
  • check
    #icon-check
  • maximize
    #icon-maximize
  • custmoer
    #icon-custmoer
  • permission
    #icon-permission
  • tag
    #icon-tag
  • refresh
    #icon-refresh
  • preview-close
    #icon-preview-close
  • tag1
    #icon-tag1
  • loading
    #icon-loading
  • logout1
    #icon-logout1
  • refresh1
    #icon-refresh1
  • check-box-1
    #icon-check-box-1
  • minimize
    #icon-minimize
  • close1
    #icon-close1
  • key
    #icon-key
  • laptop
    #icon-laptop
  • close
    #icon-close
  • config1
    #icon-config1
  • menu-fold
    #icon-menu-fold
  • message
    #icon-message
  • mobile
    #icon-mobile
  • lock
    #icon-lock
  • all-close
    #icon-all-close
  • home
    #icon-home
  • tool
    #icon-tool
  • more1
    #icon-more1
  • home1
    #icon-home1
  • point-out
    #icon-point-out
  • message2
    #icon-message2
  • skin
    #icon-skin
  • computer
    #icon-computer
  • preview-close1
    #icon-preview-close1
  • zoom-in
    #icon-zoom-in
  • setting1
    #icon-setting1
  • more
    #icon-more
  • menu
    #icon-menu
  • setting
    #icon-setting
  • tablet
    #icon-tablet
  • power
    #icon-power
  • reset-password
    #icon-reset-password
  • zoom-out
    #icon-zoom-out
  • menu-unfold
    #icon-menu-unfold
  • loading1
    #icon-loading1
  • multi-window
    #icon-multi-window
  • remind
    #icon-remind
  • tag2
    #icon-tag2
  • more2
    #icon-more2
  • message1
    #icon-message1
  • unlock
    #icon-unlock
  • preview-open
    #icon-preview-open

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>