• unfold
    
  • retraction
    
  • Strategy comparison
    
  • Combination chart
    
  • portrait
    
  • Stacked bar chart
    
  • tag
    
  • Risk monitoring
    
  • Number of jurisdictions
    
  • list2
    
  • Child addition
    
  • info-fill
    
  • Markers
    
  • email
    
  • news
    
  • remark
    
  • Demand process
    
  • Personnel examination and approval
    
  • System information
    
  • Research and development process
    
  • Research and development task
    
  • Allocation of budget accounts
    
  • Application for commencement
    
  • Administrative statement
    
  • Attendance management
    
  • Administrative examination and approval
    
  • Branch information
    
  • Collection and payment management
    
  • Bid management
    
  • Bank of China order management
    
  • Branch dependency package
    
  • Branch build record
    
  • Business trip management
    
  • Business related statement
    
  • Configuration process
    
  • Automatic deployment
    
  • Business trip loan
    
  • Check branch
    
  • Man-hour management
    
  • External task list
    
  • Demand related report
    
  • Cost size class
    
  • Demand cost management
    
  • Data dictionary
    
  • Contract statement
    
  • District management
    
  • Contract acceptance
    
  • Financial statement
    
  • Fault management
    
  • Financial reimbursement
    
  • Follow-up of various matters
    
  • Outward application
    
  • Cost control
    
  • Customer management
    
  • Implementation batch
    
  • Financial approval
    
  • Details of annual cost estimates
    
  • Employee management
    
  • Contract process
    
  • Leave management
    
  • Resource application
    
  • Special task management
    
  • The production version is stored
    
  • Red and black list
    
  • System workload
    
  • Virtual resource application
    
  • Production release
    
  • Performance appraisal
    
  • Test management
    
  • Production version extraction
    
  • Production source code out
    
  • Order inquiry
    
  • Sales approval
    
  • Data management
    
  • panel-tool-restore
    
  • warn-fill
    
  • proximal
    
  • move
    
  • Page additions
    
  • To do List
    
  • customer information
    
  • Download
    
  • system scheme
    
  • 保存
    
  • managed futures
    
  • spot exposure
    
  • term exposure
    
  • spot management
    
  • abnormal event
    
  • abort
    
  • Account-set-up
    
  • buy
    
  • assessment
    
  • business
    
  • batch failure
    
  • classes
    
  • counter-channel-open
    
  • channel-check
    
  • deal
    
  • cash audit
    
  • composition
    
  • bond quota management
    
  • delivery
    
  • execution of contract
    
  • export-all
    
  • counter-channel-closed
    
  • early-return
    
  • fund account
    
  • due-to-return
    
  • fixed input
    
  • fixing
    
  • exercising the option
    
  • device-attachment
    
  • intersection
    
  • client-channel-open
    
  • foreign exchange settlement and sale
    
  • invoices
    
  • entrust1
    
  • late return
    
  • liquidate
    
  • exhibition-period
    
  • entrust
    
  • frustration of contract
    
  • payment
    
  • reversal
    
  • markup
    
  • Positions
    
  • operate
    
  • foreign exchange swap
    
  • statistics-statements
    
  • shouxi
    
  • product-halt-sales
    
  • product
    
  • forward exchange rate
    
  • client-channel-close
    
  • to audit
    
  • preview
    
  • inquiry
    
  • unsubscribe
    
  • set
    
  • stop loss
    
  • reset-password
    
  • stop-profit
    
  • lift ring deposit
    
  • supervision
    
  • precious-metal
    
  • knowledge
    
  • Touch panels
    
  • the-funds-transfer
    
  • processing measurement
    
  • risk of check
    
  • some-channels-open
    
  • product-sold-out
    
  • withdrawal
    
  • device-not-attachment
    
  • third-party-open
    
  • user- error
    
  • positions in management
    
  • trade-setting
    
  • foreign exchange at sight
    
  • quotations-issued-by
    
  • third-party-prohibition
    
  • track
    
  • user-add
    
  • flex-between-column
    
  • flex-between-column-h
    
  • compo_icon_form-edit
    
  • flex-row-h
    
  • folder
    
  • check 2
    
  • flex-start-row 2
    
  • down-pair
    
  • flex-start-row
    
  • date-time
    
  • email
    
  • financial information
    
  • data-source
    
  • chart-pie
    
  • flex
    
  • flex-end-row
    
  • foreign-exchange-forwards
    
  • delete
    
  • edit-fill
    
  • form-export
    
  • function
    
  • group
    
  • foreign-exchange-swap
    
  • flex-baseline-h
    
  • group-fill
    
  • hide
    
  • image
    
  • home
    
  • icon
    
  • formula
    
  • help
    
  • input-box
    
  • grid
    
  • foreign-currency
    
  • layout1
    
  • inline
    
  • layer-fill
    
  • form-import
    
  • h1
    
  • layout2
    
  • left
    
  • input-item
    
  • label
    
  • form-search
    
  • line-dot
    
  • history
    
  • layer
    
  • layout-up-down
    
  • list-fill
    
  • fund
    
  • left-pair
    
  • left-fill
    
  • max-fill
    
  • lightning-fill
    
  • home-fill
    
  • image 2
    
  • info
    
  • mini
    
  • item
    
  • list
    
  • hot
    
  • introduce
    
  • link
    
  • line-dash
    
  • lock
    
  • metal
    
  • help-fill
    
  • Modify
    
  • iframe
    
  • monitor
    
  • multiple choice-fill
    
  • multiple choice
    
  • more1
    
  • negative
    
  • money
    
  • more
    
  • market risk
    
  • fold-1
    
  • more1-fill
    
  • foreign-exchange-sight
    
  • monitor-fill
    
  • page
    
  • list1
    
  • access
    
  • option
    
  • inline-block
    
  • institution-newly
    
  • left-side
    
  • more2
    
  • ircle-fill
    
  • pie chart-fill
    
  • Mute
    
  • prohibit
    
  • process
    
  • password
    
  • modules
    
  • preserve
    
  • quotation
    
  • news
    
  • prohibit-fill
    
  • pdf
    
  • positive
    
  • radius-right
    
  • quotation-fill
    
  • query
    
  • news-fill
    
  • max
    
  • push-ws
    
  • query-list
    
  • rectangle
    
  • radius-bottom-left
    
  • reduce1-fill
    
  • radius-left
    
  • move
    
  • reduce
    
  • radius
    
  • quit
    
  • reduce2
    
  • narrow
    
  • layout-left-right
    
  • right-side
    
  • right-arrow
    
  • print
    
  • right-pair
    
  • restore
    
  • right-fill
    
  • risk2
    
  • reduce2-fill
    
  • reduce1
    
  • return
    
  • rise
    
  • left-arrow
    
  • resize-small
    
  • refresh
    
  • screen
    
  • radius-bottom-right
    
  • single choice
    
  • service
    
  • set up-fill
    
  • share
    
  • 3D
    
  • push-ipc
    
  • 2D
    
  • link 2
    
  • @
    
  • set up1-fill
    
  • bank
    
  • secede
    
  • border
    
  • RMB
    
  • bank card-fill
    
  • shear
    
  • audio
    
  • smile
    
  • collapse-single
    
  • space-around-row
    
  • 24h
    
  • stflex-end-row
    
  • add
    
  • skin
    
  • begin
    
  • risk-fill
    
  • border-right
    
  • strikethrough
    
  • add1-fill
    
  • sort 2
    
  • bottom
    
  • success
    
  • advanced query
    
  • set
    
  • calendar-range
    
  • select
    
  • block 2
    
  • set up
    
  • add1
    
  • Switch 1
    
  • calendar-week
    
  • space-between-row
    
  • compo_icon_auto-completion
    
  • single choice2
    
  • border-bottom
    
  • resize-full
    
  • center-vertical
    
  • speed
    
  • equipment-fill
    
  • switch
    
  • bank-card
    
  • System-domain
    
  • delete-fill
    
  • right
    
  • bar-gtaph
    
  • text size
    
  • compo_icon_layout-up-crnter-down
    
  • tab-single
    
  • add2-fill
    
  • time-fill
    
  • detailed list-fill
    
  • tab le
    
  • counter
    
  • transaction-fill
    
  • chat-fill
    
  • text lef
    
  • flex-baseline
    
  • transaction
    
  • closecircle
    
  • text size 2
    
  • block-fill
    
  • text-italic
    
  • close
    
  • suspend
    
  • check-fill
    
  • risk3
    
  • bar chart1
    
  • sort
    
  • add2
    
  • trans
    
  • detailed list
    
  • textediting
    
  • candlestick chart-fill
    
  • trial
    
  • compo_icon_slider
    
  • tips
    
  • code
    
  • risk
    
  • collapse
    
  • sort-fill
    
  • compo_icon_progress
    
  • set up1
    
  • border-top
    
  • up-pair
    
  • dangerous
    
  • text-italic1
    
  • application-fill
    
  • unlock
    
  • commodity
    
  • tab-div
    
  • com_icon_add-folder
    
  • trend
    
  • divider
    
  • text middle
    
  • chart-stock
    
  • unfold-1
    
  • copy
    
  • tab
    
  • credit risks
    
  • tag
    
  • application
    
  • underline
    
  • chat
    
  • text-bold
    
  • excel
    
  • up
    
  • file-fill
    
  • time
    
  • down
    
  • user
    
  • equipment
    
  • USD
    
  • delete1
    
  • up-fill
    
  • chat1-fill
    
  • operational risk
    
  • examine-fill
    
  • upload
    
  • debenture
    
  • treeselect
    
  • configuration
    
  • tab-pre
    
  • clear
    
  • up-arrow
    
  • block
    
  • versions
    
  • clock
    
  • transfer
    
  • board
    
  • workbench
    
  • check
    
  • user-management
    
  • edit1
    
  • skin-fill
    
  • code-fill
    
  • web
    
  • btn
    
  • send
    
  • edit
    
  • layout-left-center-right
    
  • circle
    
  • treenode
    
  • border-left
    
  • voice
    
  • chart-line
    
  • wrapper
    
  • data-structure
    
  • workbench-fill
    
  • download
    
  • user-add
    
  • container
    
  • update
    
  • chat1
    
  • receive
    
  • examine
    
  • warning
    
  • collect-fill
    
  • steps
    
  • csv
    
  • revisions
    
  • carousel-single
    
  • row-h
    
  • back
    
  • voice-fill
    
  • collect1-fill
    
  • user-fill
    
  • conference
    
  • withdraw
    
  • apex
    
  • tables-add-subtract
    
  • desktop
    
  • theme
    
  • data-type
    
  • signal
    
  • calendar-fill
    
  • style
    
  • delete1-fill
    
  • video
    
  • chat-unread
    
  • warn
    
  • center-horizontal
    
  • Switch 2
    
  • clear2
    
  • text right
    
  • break
    
  • txt
    
  • branch
    
  • word
    
  • calendar-month
    
  • tips 2
    
  • carousel
    
  • warning 2
    
  • collect
    
  • chart-scatter
    
  • fail-fill
    
  • enter
    
  • appoint
    
  • calendar-all
    
  • Binding-data-sources
    
  • calendar
    
  • clear1
    
  • decline
    
  • data-input
    
  • com_icon_add-page
    
  • dropdown
    
  • down 2
    
  • collect1
    
  • customer
    
  • down-arrow
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • unfold
    .glyphicon-retraction
  • retraction
    .glyphicon-unfold
  • Strategy comparison
    .glyphicon-a-Strategycomparison
  • Combination chart
    .glyphicon-a-Combinationchart
  • portrait
    .glyphicon-portrait
  • Stacked bar chart
    .glyphicon-a-Stackedbarchart
  • tag
    .glyphicon-tag1
  • Risk monitoring
    .glyphicon-a-Riskmonitoring
  • Number of jurisdictions
    .glyphicon-a-Numberofjurisdictions
  • list2
    .glyphicon-list2
  • Child addition
    .glyphicon-a-Childaddition
  • info-fill
    .glyphicon-info-fill
  • Markers
    .glyphicon-Markers
  • email
    .glyphicon-email1
  • news
    .glyphicon-news1
  • remark
    .glyphicon-remark
  • Demand process
    .glyphicon-a-Demandprocess
  • Personnel examination and approval
    .glyphicon-a-Personnelexaminationandapproval
  • System information
    .glyphicon-a-Systeminformation
  • Research and development process
    .glyphicon-a-Researchanddevelopmentprocess
  • Research and development task
    .glyphicon-a-Researchanddevelopmenttask
  • Allocation of budget accounts
    .glyphicon-a-Allocationofbudgetaccounts
  • Application for commencement
    .glyphicon-a-Applicationforcommencement
  • Administrative statement
    .glyphicon-a-Administrativestatement
  • Attendance management
    .glyphicon-a-Attendancemanagement
  • Administrative examination and approval
    .glyphicon-a-Administrativeexaminationandapproval
  • Branch information
    .glyphicon-a-Branchinformation
  • Collection and payment management
    .glyphicon-a-Collectionandpaymentmanagement
  • Bid management
    .glyphicon-a-Bidmanagement
  • Bank of China order management
    .glyphicon-a-BankofChinaordermanagement
  • Branch dependency package
    .glyphicon-a-Branchdependencypackage
  • Branch build record
    .glyphicon-a-Branchbuildrecord
  • Business trip management
    .glyphicon-a-Businesstripmanagement
  • Business related statement
    .glyphicon-a-Businessrelatedstatement
  • Configuration process
    .glyphicon-a-Configurationprocess
  • Automatic deployment
    .glyphicon-a-Automaticdeployment
  • Business trip loan
    .glyphicon-a-Businesstriploan
  • Check branch
    .glyphicon-a-Checkbranch
  • Man-hour management
    .glyphicon-a-Man-hourmanagement
  • External task list
    .glyphicon-a-Externaltasklist
  • Demand related report
    .glyphicon-a-Demandrelatedreport
  • Cost size class
    .glyphicon-a-Costsizeclass
  • Demand cost management
    .glyphicon-a-Demandcostmanagement
  • Data dictionary
    .glyphicon-a-Datadictionary
  • Contract statement
    .glyphicon-a-Contractstatement
  • District management
    .glyphicon-a-Districtmanagement
  • Contract acceptance
    .glyphicon-a-Contractacceptance
  • Financial statement
    .glyphicon-a-Financialstatement
  • Fault management
    .glyphicon-a-Faultmanagement
  • Financial reimbursement
    .glyphicon-a-Financialreimbursement
  • Follow-up of various matters
    .glyphicon-a-Follow-upofvariousmatters
  • Outward application
    .glyphicon-a-Outwardapplication
  • Cost control
    .glyphicon-a-Costcontrol
  • Customer management
    .glyphicon-a-Customermanagement
  • Implementation batch
    .glyphicon-a-Implementationbatch
  • Financial approval
    .glyphicon-a-Financialapproval
  • Details of annual cost estimates
    .glyphicon-a-Detailsofannualcostestimates
  • Employee management
    .glyphicon-a-Employeemanagement
  • Contract process
    .glyphicon-a-Contractprocess
  • Leave management
    .glyphicon-a-Leavemanagement
  • Resource application
    .glyphicon-a-Resourceapplication
  • Special task management
    .glyphicon-a-Specialtaskmanagement
  • The production version is stored
    .glyphicon-a-Theproductionversionisstored
  • Red and black list
    .glyphicon-a-Redandblacklist
  • System workload
    .glyphicon-a-Systemworkload
  • Virtual resource application
    .glyphicon-a-Virtualresourceapplication
  • Production release
    .glyphicon-a-Productionrelease
  • Performance appraisal
    .glyphicon-a-Performanceappraisal
  • Test management
    .glyphicon-a-Testmanagement
  • Production version extraction
    .glyphicon-a-Productionversionextraction
  • Production source code out
    .glyphicon-a-Productionsourcecodeout
  • Order inquiry
    .glyphicon-a-Orderinquiry
  • Sales approval
    .glyphicon-a-Salesapproval
  • Data management
    .glyphicon-a-Datamanagement
  • panel-tool-restore
    .glyphicon-panel-tool-restore
  • warn-fill
    .glyphicon-warn-fill1
  • proximal
    .glyphicon-proximal
  • move
    .glyphicon-move1
  • Page additions
    .glyphicon-a-Pageadditions
  • To do List
    .glyphicon-a-TodoList
  • customer information
    .glyphicon-a-customerinformation
  • Download
    .glyphicon-Download
  • system scheme
    .glyphicon-a-systemscheme
  • 保存
    .glyphicon-baocun
  • managed futures
    .glyphicon-a-managedfutures
  • spot exposure
    .glyphicon-a-spotexposure
  • term exposure
    .glyphicon-a-termexposure
  • spot management
    .glyphicon-a-spotmanagement
  • abnormal event
    .glyphicon-a-abnormalevent
  • abort
    .glyphicon-abort
  • Account-set-up
    .glyphicon-Account-set-up
  • buy
    .glyphicon-buy
  • assessment
    .glyphicon-assessment
  • business
    .glyphicon-business
  • batch failure
    .glyphicon-a-batchfailure
  • classes
    .glyphicon-classes
  • counter-channel-open
    .glyphicon-counter-channel-open
  • channel-check
    .glyphicon-channel-check
  • deal
    .glyphicon-deal
  • cash audit
    .glyphicon-a-cashaudit
  • composition
    .glyphicon-composition
  • bond quota management
    .glyphicon-a-bondquotamanagement
  • delivery
    .glyphicon-delivery
  • execution of contract
    .glyphicon-a-executionofcontract
  • export-all
    .glyphicon-export-all
  • counter-channel-closed
    .glyphicon-counter-channel-closed
  • early-return
    .glyphicon-early-return
  • fund account
    .glyphicon-a-fundaccount
  • due-to-return
    .glyphicon-due-to-return
  • fixed input
    .glyphicon-a-fixedinput
  • fixing
    .glyphicon-fixing
  • exercising the option
    .glyphicon-a-exercisingtheoption
  • device-attachment
    .glyphicon-device-attachment
  • intersection
    .glyphicon-intersection
  • client-channel-open
    .glyphicon-client-channel-open
  • foreign exchange settlement and sale
    .glyphicon-a-foreignexchangesettlementandsale
  • invoices
    .glyphicon-invoices
  • entrust1
    .glyphicon-entrust1
  • late return
    .glyphicon-a-latereturn
  • liquidate
    .glyphicon-liquidate
  • exhibition-period
    .glyphicon-exhibition-period
  • entrust
    .glyphicon-entrust
  • frustration of contract
    .glyphicon-a-frustrationofcontract
  • payment
    .glyphicon-payment
  • reversal
    .glyphicon-reversal
  • markup
    .glyphicon-markup
  • Positions
    .glyphicon-Positions
  • operate
    .glyphicon-operate
  • foreign exchange swap
    .glyphicon-a-foreignexchangeswap
  • statistics-statements
    .glyphicon-statistics-statements
  • shouxi
    .glyphicon-shouxi
  • product-halt-sales
    .glyphicon-product-halt-sales
  • product
    .glyphicon-product
  • forward exchange rate
    .glyphicon-a-forwardexchangerate
  • client-channel-close
    .glyphicon-client-channel-close
  • to audit
    .glyphicon-a-toaudit
  • preview
    .glyphicon-preview
  • inquiry
    .glyphicon-inquiry
  • unsubscribe
    .glyphicon-unsubscribe
  • set
    .glyphicon-set1
  • stop loss
    .glyphicon-a-stoploss
  • reset-password
    .glyphicon-reset-password
  • stop-profit
    .glyphicon-stop-profit
  • lift ring deposit
    .glyphicon-a-liftringdeposit
  • supervision
    .glyphicon-supervision
  • precious-metal
    .glyphicon-precious-metal
  • knowledge
    .glyphicon-knowledge
  • Touch panels
    .glyphicon-a-Touchpanels
  • the-funds-transfer
    .glyphicon-the-funds-transfer
  • processing measurement
    .glyphicon-a-processingmeasurement
  • risk of check
    .glyphicon-a-riskofcheck
  • some-channels-open
    .glyphicon-some-channels-open
  • product-sold-out
    .glyphicon-product-sold-out
  • withdrawal
    .glyphicon-withdrawal
  • device-not-attachment
    .glyphicon-device-not-attachment
  • third-party-open
    .glyphicon-third-party-open
  • user- error
    .glyphicon-a-user-error
  • positions in management
    .glyphicon-a-positionsinmanagement
  • trade-setting
    .glyphicon-trade-setting
  • foreign exchange at sight
    .glyphicon-a-foreignexchangeatsight
  • quotations-issued-by
    .glyphicon-quotations-issued-by
  • third-party-prohibition
    .glyphicon-third-party-prohibition
  • track
    .glyphicon-track
  • user-add
    .glyphicon-user-add1
  • flex-between-column
    .glyphicon-flex-between-column
  • flex-between-column-h
    .glyphicon-flex-between-column-h
  • compo_icon_form-edit
    .glyphicon-compo_icon_form-edit
  • flex-row-h
    .glyphicon-flex-row-h
  • folder
    .glyphicon-folder
  • check 2
    .glyphicon-a-check2
  • flex-start-row 2
    .glyphicon-a-flex-start-row2
  • down-pair
    .glyphicon-down-pair
  • flex-start-row
    .glyphicon-flex-start-row
  • date-time
    .glyphicon-date-time
  • email
    .glyphicon-email
  • financial information
    .glyphicon-a-financialinformation
  • data-source
    .glyphicon-data-source
  • chart-pie
    .glyphicon-chart-pie
  • flex
    .glyphicon-flex
  • flex-end-row
    .glyphicon-flex-end-row
  • foreign-exchange-forwards
    .glyphicon-foreign-exchange-forwards
  • delete
    .glyphicon-delete
  • edit-fill
    .glyphicon-edit-fill
  • form-export
    .glyphicon-form-export
  • function
    .glyphicon-function
  • group
    .glyphicon-group
  • foreign-exchange-swap
    .glyphicon-foreign-exchange-swap
  • flex-baseline-h
    .glyphicon-flex-baseline-h
  • group-fill
    .glyphicon-group-fill
  • hide
    .glyphicon-hide
  • image
    .glyphicon-image
  • home
    .glyphicon-home
  • icon
    .glyphicon-icon
  • formula
    .glyphicon-formula
  • help
    .glyphicon-help
  • input-box
    .glyphicon-input-box
  • grid
    .glyphicon-grid
  • foreign-currency
    .glyphicon-foreign-currency
  • layout1
    .glyphicon-layout1
  • inline
    .glyphicon-inline
  • layer-fill
    .glyphicon-layer-fill
  • form-import
    .glyphicon-form-import
  • h1
    .glyphicon-h1
  • layout2
    .glyphicon-layout2
  • left
    .glyphicon-left
  • input-item
    .glyphicon-input-item
  • label
    .glyphicon-label
  • form-search
    .glyphicon-form-search
  • line-dot
    .glyphicon-line-dot
  • history
    .glyphicon-history
  • layer
    .glyphicon-layer
  • layout-up-down
    .glyphicon-layout-up-down
  • list-fill
    .glyphicon-list-fill
  • fund
    .glyphicon-fund
  • left-pair
    .glyphicon-left-pair
  • left-fill
    .glyphicon-left-fill
  • max-fill
    .glyphicon-max-fill
  • lightning-fill
    .glyphicon-lightning-fill
  • home-fill
    .glyphicon-home-fill
  • image 2
    .glyphicon-a-image2
  • info
    .glyphicon-info
  • mini
    .glyphicon-mini
  • item
    .glyphicon-item
  • list
    .glyphicon-list
  • hot
    .glyphicon-hot
  • introduce
    .glyphicon-introduce
  • link
    .glyphicon-link
  • line-dash
    .glyphicon-line-dash
  • lock
    .glyphicon-lock
  • metal
    .glyphicon-metal
  • help-fill
    .glyphicon-help-fill
  • Modify
    .glyphicon-Modify
  • iframe
    .glyphicon-iframe
  • monitor
    .glyphicon-monitor
  • multiple choice-fill
    .glyphicon-a-multiplechoice-fill
  • multiple choice
    .glyphicon-a-multiplechoice
  • more1
    .glyphicon-more1
  • negative
    .glyphicon-negative
  • money
    .glyphicon-money
  • more
    .glyphicon-more
  • market risk
    .glyphicon-a-marketrisk
  • fold-1
    .glyphicon-fold-1
  • more1-fill
    .glyphicon-more1-fill
  • foreign-exchange-sight
    .glyphicon-foreign-exchange-sight
  • monitor-fill
    .glyphicon-monitor-fill
  • page
    .glyphicon-page
  • list1
    .glyphicon-list1
  • access
    .glyphicon-access
  • option
    .glyphicon-option
  • inline-block
    .glyphicon-inline-block
  • institution-newly
    .glyphicon-institution-newly
  • left-side
    .glyphicon-left-side
  • more2
    .glyphicon-more2
  • ircle-fill
    .glyphicon-ircle-fill
  • pie chart-fill
    .glyphicon-a-piechart-fill
  • Mute
    .glyphicon-Mute
  • prohibit
    .glyphicon-prohibit
  • process
    .glyphicon-process
  • password
    .glyphicon-password
  • modules
    .glyphicon-modules
  • preserve
    .glyphicon-preserve
  • quotation
    .glyphicon-quotation
  • news
    .glyphicon-news
  • prohibit-fill
    .glyphicon-prohibit-fill
  • pdf
    .glyphicon-pdf
  • positive
    .glyphicon-positive
  • radius-right
    .glyphicon-radius-right
  • quotation-fill
    .glyphicon-quotation-fill
  • query
    .glyphicon-query
  • news-fill
    .glyphicon-news-fill
  • max
    .glyphicon-max
  • push-ws
    .glyphicon-push-ws
  • query-list
    .glyphicon-query-list
  • rectangle
    .glyphicon-rectangle
  • radius-bottom-left
    .glyphicon-radius-bottom-left
  • reduce1-fill
    .glyphicon-reduce1-fill
  • radius-left
    .glyphicon-radius-left
  • move
    .glyphicon-move
  • reduce
    .glyphicon-reduce
  • radius
    .glyphicon-radius
  • quit
    .glyphicon-quit
  • reduce2
    .glyphicon-reduce2
  • narrow
    .glyphicon-narrow
  • layout-left-right
    .glyphicon-layout-left-right
  • right-side
    .glyphicon-right-side
  • right-arrow
    .glyphicon-right-arrow
  • print
    .glyphicon-print
  • right-pair
    .glyphicon-right-pair
  • restore
    .glyphicon-restore
  • right-fill
    .glyphicon-right-fill
  • risk2
    .glyphicon-risk2
  • reduce2-fill
    .glyphicon-reduce2-fill
  • reduce1
    .glyphicon-reduce1
  • return
    .glyphicon-return
  • rise
    .glyphicon-rise
  • left-arrow
    .glyphicon-left-arrow
  • resize-small
    .glyphicon-resize-small
  • refresh
    .glyphicon-refresh
  • screen
    .glyphicon-screen
  • radius-bottom-right
    .glyphicon-radius-bottom-right
  • single choice
    .glyphicon-a-singlechoice
  • service
    .glyphicon-service
  • set up-fill
    .glyphicon-a-setup-fill
  • share
    .glyphicon-share
  • 3D
    .glyphicon-a-3D
  • push-ipc
    .glyphicon-push-ipc
  • 2D
    .glyphicon-a-2D
  • link 2
    .glyphicon-a-link2
  • @
    .glyphicon-a-
  • set up1-fill
    .glyphicon-a-setup1-fill
  • bank
    .glyphicon-bank
  • secede
    .glyphicon-secede
  • border
    .glyphicon-border
  • RMB
    .glyphicon-RMB
  • bank card-fill
    .glyphicon-a-bankcard-fill
  • shear
    .glyphicon-shear
  • audio
    .glyphicon-audio
  • smile
    .glyphicon-smile
  • collapse-single
    .glyphicon-collapse-single
  • space-around-row
    .glyphicon-space-around-row
  • 24h
    .glyphicon-a-24h
  • stflex-end-row
    .glyphicon-stflex-end-row
  • add
    .glyphicon-add
  • skin
    .glyphicon-skin
  • begin
    .glyphicon-begin
  • risk-fill
    .glyphicon-risk-fill
  • border-right
    .glyphicon-border-right
  • strikethrough
    .glyphicon-strikethrough
  • add1-fill
    .glyphicon-add1-fill
  • sort 2
    .glyphicon-a-sort2
  • bottom
    .glyphicon-bottom
  • success
    .glyphicon-success
  • advanced query
    .glyphicon-a-advancedquery
  • set
    .glyphicon-set
  • calendar-range
    .glyphicon-calendar-range
  • select
    .glyphicon-select
  • block 2
    .glyphicon-a-block2
  • set up
    .glyphicon-a-setup
  • add1
    .glyphicon-add1
  • Switch 1
    .glyphicon-a-Switch1
  • calendar-week
    .glyphicon-calendar-week
  • space-between-row
    .glyphicon-space-between-row
  • compo_icon_auto-completion
    .glyphicon-compo_icon_auto-completion
  • single choice2
    .glyphicon-a-singlechoice2
  • border-bottom
    .glyphicon-border-bottom
  • resize-full
    .glyphicon-resize-full
  • center-vertical
    .glyphicon-center-vertical
  • speed
    .glyphicon-speed
  • equipment-fill
    .glyphicon-equipment-fill
  • switch
    .glyphicon-switch
  • bank-card
    .glyphicon-bank-card
  • System-domain
    .glyphicon-System-domain
  • delete-fill
    .glyphicon-delete-fill
  • right
    .glyphicon-right
  • bar-gtaph
    .glyphicon-bar-gtaph
  • text size
    .glyphicon-a-textsize
  • compo_icon_layout-up-crnter-down
    .glyphicon-compo_icon_layout-up-crnter-down
  • tab-single
    .glyphicon-tab-single
  • add2-fill
    .glyphicon-add2-fill
  • time-fill
    .glyphicon-time-fill
  • detailed list-fill
    .glyphicon-a-detailedlist-fill
  • tab le
    .glyphicon-a-table
  • counter
    .glyphicon-counter
  • transaction-fill
    .glyphicon-transaction-fill
  • chat-fill
    .glyphicon-chat-fill
  • text lef
    .glyphicon-a-textlef
  • flex-baseline
    .glyphicon-flex-baseline
  • transaction
    .glyphicon-transaction
  • closecircle
    .glyphicon-closecircle
  • text size 2
    .glyphicon-a-textsize2
  • block-fill
    .glyphicon-block-fill
  • text-italic
    .glyphicon-text-italic
  • close
    .glyphicon-close
  • suspend
    .glyphicon-suspend
  • check-fill
    .glyphicon-check-fill
  • risk3
    .glyphicon-risk3
  • bar chart1
    .glyphicon-a-barchart1
  • sort
    .glyphicon-sort
  • add2
    .glyphicon-add2
  • trans
    .glyphicon-trans
  • detailed list
    .glyphicon-a-detailedlist
  • textediting
    .glyphicon-textediting
  • candlestick chart-fill
    .glyphicon-a-candlestickchart-fill
  • trial
    .glyphicon-trial
  • compo_icon_slider
    .glyphicon-compo_icon_slider
  • tips
    .glyphicon-tips
  • code
    .glyphicon-code
  • risk
    .glyphicon-risk
  • collapse
    .glyphicon-collapse
  • sort-fill
    .glyphicon-sort-fill
  • compo_icon_progress
    .glyphicon-compo_icon_progress
  • set up1
    .glyphicon-a-setup1
  • border-top
    .glyphicon-border-top
  • up-pair
    .glyphicon-up-pair
  • dangerous
    .glyphicon-dangerous
  • text-italic1
    .glyphicon-text-italic1
  • application-fill
    .glyphicon-application-fill
  • unlock
    .glyphicon-unlock
  • commodity
    .glyphicon-commodity
  • tab-div
    .glyphicon-tab-div
  • com_icon_add-folder
    .glyphicon-com_icon_add-folder
  • trend
    .glyphicon-trend
  • divider
    .glyphicon-divider
  • text middle
    .glyphicon-a-textmiddle
  • chart-stock
    .glyphicon-chart-stock
  • unfold-1
    .glyphicon-unfold-1
  • copy
    .glyphicon-copy
  • tab
    .glyphicon-tab
  • credit risks
    .glyphicon-a-creditrisks
  • tag
    .glyphicon-tag
  • application
    .glyphicon-application
  • underline
    .glyphicon-underline
  • chat
    .glyphicon-chat
  • text-bold
    .glyphicon-text-bold
  • excel
    .glyphicon-excel
  • up
    .glyphicon-up
  • file-fill
    .glyphicon-file-fill
  • time
    .glyphicon-time
  • down
    .glyphicon-down
  • user
    .glyphicon-user
  • equipment
    .glyphicon-equipment
  • USD
    .glyphicon-USD
  • delete1
    .glyphicon-delete1
  • up-fill
    .glyphicon-up-fill
  • chat1-fill
    .glyphicon-chat1-fill
  • operational risk
    .glyphicon-a-operationalrisk
  • examine-fill
    .glyphicon-examine-fill
  • upload
    .glyphicon-upload
  • debenture
    .glyphicon-debenture
  • treeselect
    .glyphicon-treeselect
  • configuration
    .glyphicon-configuration
  • tab-pre
    .glyphicon-tab-pre
  • clear
    .glyphicon-clear
  • up-arrow
    .glyphicon-up-arrow
  • block
    .glyphicon-block
  • versions
    .glyphicon-versions
  • clock
    .glyphicon-clock
  • transfer
    .glyphicon-transfer
  • board
    .glyphicon-board
  • workbench
    .glyphicon-workbench
  • check
    .glyphicon-check
  • user-management
    .glyphicon-user-management
  • edit1
    .glyphicon-edit1
  • skin-fill
    .glyphicon-skin-fill
  • code-fill
    .glyphicon-code-fill
  • web
    .glyphicon-web
  • btn
    .glyphicon-btn
  • send
    .glyphicon-send
  • edit
    .glyphicon-edit
  • layout-left-center-right
    .glyphicon-layout-left-center-right
  • circle
    .glyphicon-circle
  • treenode
    .glyphicon-treenode
  • border-left
    .glyphicon-border-left
  • voice
    .glyphicon-voice
  • chart-line
    .glyphicon-chart-line
  • wrapper
    .glyphicon-wrapper
  • data-structure
    .glyphicon-data-structure
  • workbench-fill
    .glyphicon-workbench-fill
  • download
    .glyphicon-download
  • user-add
    .glyphicon-user-add
  • container
    .glyphicon-container
  • update
    .glyphicon-update
  • chat1
    .glyphicon-chat1
  • receive
    .glyphicon-receive
  • examine
    .glyphicon-examine
  • warning
    .glyphicon-warning
  • collect-fill
    .glyphicon-collect-fill
  • steps
    .glyphicon-steps
  • csv
    .glyphicon-csv
  • revisions
    .glyphicon-revisions
  • carousel-single
    .glyphicon-carousel-single
  • row-h
    .glyphicon-row-h
  • back
    .glyphicon-back
  • voice-fill
    .glyphicon-voice-fill
  • collect1-fill
    .glyphicon-collect1-fill
  • user-fill
    .glyphicon-user-fill
  • conference
    .glyphicon-conference
  • withdraw
    .glyphicon-withdraw
  • apex
    .glyphicon-apex
  • tables-add-subtract
    .glyphicon-tables-add-subtract
  • desktop
    .glyphicon-desktop
  • theme
    .glyphicon-theme
  • data-type
    .glyphicon-data-type
  • signal
    .glyphicon-signal
  • calendar-fill
    .glyphicon-calendar-fill
  • style
    .glyphicon-style
  • delete1-fill
    .glyphicon-delete1-fill
  • video
    .glyphicon-video
  • chat-unread
    .glyphicon-chat-unread
  • warn
    .glyphicon-warn
  • center-horizontal
    .glyphicon-center-horizontal
  • Switch 2
    .glyphicon-a-Switch2
  • clear2
    .glyphicon-clear2
  • text right
    .glyphicon-a-textright
  • break
    .glyphicon-break
  • txt
    .glyphicon-txt
  • branch
    .glyphicon-branch
  • word
    .glyphicon-word
  • calendar-month
    .glyphicon-calendar-month
  • tips 2
    .glyphicon-a-tips2
  • carousel
    .glyphicon-carousel
  • warning 2
    .glyphicon-a-warning2
  • collect
    .glyphicon-collect
  • chart-scatter
    .glyphicon-chart-scatter
  • fail-fill
    .glyphicon-fail-fill
  • enter
    .glyphicon-enter
  • appoint
    .glyphicon-appoint
  • calendar-all
    .glyphicon-calendar-all
  • Binding-data-sources
    .glyphicon-Binding-data-sources
  • calendar
    .glyphicon-calendar
  • clear1
    .glyphicon-clear1
  • decline
    .glyphicon-decline
  • data-input
    .glyphicon-data-input
  • com_icon_add-page
    .glyphicon-com_icon_add-page
  • dropdown
    .glyphicon-dropdown
  • down 2
    .glyphicon-a-down2
  • collect1
    .glyphicon-collect1
  • customer
    .glyphicon-customer
  • down-arrow
    .glyphicon-down-arrow

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="iconfont glyphicon-xxx"></span>

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

  • unfold
    #glyphicon-retraction
  • retraction
    #glyphicon-unfold
  • Strategy comparison
    #glyphicon-a-Strategycomparison
  • Combination chart
    #glyphicon-a-Combinationchart
  • portrait
    #glyphicon-portrait
  • Stacked bar chart
    #glyphicon-a-Stackedbarchart
  • tag
    #glyphicon-tag1
  • Risk monitoring
    #glyphicon-a-Riskmonitoring
  • Number of jurisdictions
    #glyphicon-a-Numberofjurisdictions
  • list2
    #glyphicon-list2
  • Child addition
    #glyphicon-a-Childaddition
  • info-fill
    #glyphicon-info-fill
  • Markers
    #glyphicon-Markers
  • email
    #glyphicon-email1
  • news
    #glyphicon-news1
  • remark
    #glyphicon-remark
  • Demand process
    #glyphicon-a-Demandprocess
  • Personnel examination and approval
    #glyphicon-a-Personnelexaminationandapproval
  • System information
    #glyphicon-a-Systeminformation
  • Research and development process
    #glyphicon-a-Researchanddevelopmentprocess
  • Research and development task
    #glyphicon-a-Researchanddevelopmenttask
  • Allocation of budget accounts
    #glyphicon-a-Allocationofbudgetaccounts
  • Application for commencement
    #glyphicon-a-Applicationforcommencement
  • Administrative statement
    #glyphicon-a-Administrativestatement
  • Attendance management
    #glyphicon-a-Attendancemanagement
  • Administrative examination and approval
    #glyphicon-a-Administrativeexaminationandapproval
  • Branch information
    #glyphicon-a-Branchinformation
  • Collection and payment management
    #glyphicon-a-Collectionandpaymentmanagement
  • Bid management
    #glyphicon-a-Bidmanagement
  • Bank of China order management
    #glyphicon-a-BankofChinaordermanagement
  • Branch dependency package
    #glyphicon-a-Branchdependencypackage
  • Branch build record
    #glyphicon-a-Branchbuildrecord
  • Business trip management
    #glyphicon-a-Businesstripmanagement
  • Business related statement
    #glyphicon-a-Businessrelatedstatement
  • Configuration process
    #glyphicon-a-Configurationprocess
  • Automatic deployment
    #glyphicon-a-Automaticdeployment
  • Business trip loan
    #glyphicon-a-Businesstriploan
  • Check branch
    #glyphicon-a-Checkbranch
  • Man-hour management
    #glyphicon-a-Man-hourmanagement
  • External task list
    #glyphicon-a-Externaltasklist
  • Demand related report
    #glyphicon-a-Demandrelatedreport
  • Cost size class
    #glyphicon-a-Costsizeclass
  • Demand cost management
    #glyphicon-a-Demandcostmanagement
  • Data dictionary
    #glyphicon-a-Datadictionary
  • Contract statement
    #glyphicon-a-Contractstatement
  • District management
    #glyphicon-a-Districtmanagement
  • Contract acceptance
    #glyphicon-a-Contractacceptance
  • Financial statement
    #glyphicon-a-Financialstatement
  • Fault management
    #glyphicon-a-Faultmanagement
  • Financial reimbursement
    #glyphicon-a-Financialreimbursement
  • Follow-up of various matters
    #glyphicon-a-Follow-upofvariousmatters
  • Outward application
    #glyphicon-a-Outwardapplication
  • Cost control
    #glyphicon-a-Costcontrol
  • Customer management
    #glyphicon-a-Customermanagement
  • Implementation batch
    #glyphicon-a-Implementationbatch
  • Financial approval
    #glyphicon-a-Financialapproval
  • Details of annual cost estimates
    #glyphicon-a-Detailsofannualcostestimates
  • Employee management
    #glyphicon-a-Employeemanagement
  • Contract process
    #glyphicon-a-Contractprocess
  • Leave management
    #glyphicon-a-Leavemanagement
  • Resource application
    #glyphicon-a-Resourceapplication
  • Special task management
    #glyphicon-a-Specialtaskmanagement
  • The production version is stored
    #glyphicon-a-Theproductionversionisstored
  • Red and black list
    #glyphicon-a-Redandblacklist
  • System workload
    #glyphicon-a-Systemworkload
  • Virtual resource application
    #glyphicon-a-Virtualresourceapplication
  • Production release
    #glyphicon-a-Productionrelease
  • Performance appraisal
    #glyphicon-a-Performanceappraisal
  • Test management
    #glyphicon-a-Testmanagement
  • Production version extraction
    #glyphicon-a-Productionversionextraction
  • Production source code out
    #glyphicon-a-Productionsourcecodeout
  • Order inquiry
    #glyphicon-a-Orderinquiry
  • Sales approval
    #glyphicon-a-Salesapproval
  • Data management
    #glyphicon-a-Datamanagement
  • panel-tool-restore
    #glyphicon-panel-tool-restore
  • warn-fill
    #glyphicon-warn-fill1
  • proximal
    #glyphicon-proximal
  • move
    #glyphicon-move1
  • Page additions
    #glyphicon-a-Pageadditions
  • To do List
    #glyphicon-a-TodoList
  • customer information
    #glyphicon-a-customerinformation
  • Download
    #glyphicon-Download
  • system scheme
    #glyphicon-a-systemscheme
  • 保存
    #glyphicon-baocun
  • managed futures
    #glyphicon-a-managedfutures
  • spot exposure
    #glyphicon-a-spotexposure
  • term exposure
    #glyphicon-a-termexposure
  • spot management
    #glyphicon-a-spotmanagement
  • abnormal event
    #glyphicon-a-abnormalevent
  • abort
    #glyphicon-abort
  • Account-set-up
    #glyphicon-Account-set-up
  • buy
    #glyphicon-buy
  • assessment
    #glyphicon-assessment
  • business
    #glyphicon-business
  • batch failure
    #glyphicon-a-batchfailure
  • classes
    #glyphicon-classes
  • counter-channel-open
    #glyphicon-counter-channel-open
  • channel-check
    #glyphicon-channel-check
  • deal
    #glyphicon-deal
  • cash audit
    #glyphicon-a-cashaudit
  • composition
    #glyphicon-composition
  • bond quota management
    #glyphicon-a-bondquotamanagement
  • delivery
    #glyphicon-delivery
  • execution of contract
    #glyphicon-a-executionofcontract
  • export-all
    #glyphicon-export-all
  • counter-channel-closed
    #glyphicon-counter-channel-closed
  • early-return
    #glyphicon-early-return
  • fund account
    #glyphicon-a-fundaccount
  • due-to-return
    #glyphicon-due-to-return
  • fixed input
    #glyphicon-a-fixedinput
  • fixing
    #glyphicon-fixing
  • exercising the option
    #glyphicon-a-exercisingtheoption
  • device-attachment
    #glyphicon-device-attachment
  • intersection
    #glyphicon-intersection
  • client-channel-open
    #glyphicon-client-channel-open
  • foreign exchange settlement and sale
    #glyphicon-a-foreignexchangesettlementandsale
  • invoices
    #glyphicon-invoices
  • entrust1
    #glyphicon-entrust1
  • late return
    #glyphicon-a-latereturn
  • liquidate
    #glyphicon-liquidate
  • exhibition-period
    #glyphicon-exhibition-period
  • entrust
    #glyphicon-entrust
  • frustration of contract
    #glyphicon-a-frustrationofcontract
  • payment
    #glyphicon-payment
  • reversal
    #glyphicon-reversal
  • markup
    #glyphicon-markup
  • Positions
    #glyphicon-Positions
  • operate
    #glyphicon-operate
  • foreign exchange swap
    #glyphicon-a-foreignexchangeswap
  • statistics-statements
    #glyphicon-statistics-statements
  • shouxi
    #glyphicon-shouxi
  • product-halt-sales
    #glyphicon-product-halt-sales
  • product
    #glyphicon-product
  • forward exchange rate
    #glyphicon-a-forwardexchangerate
  • client-channel-close
    #glyphicon-client-channel-close
  • to audit
    #glyphicon-a-toaudit
  • preview
    #glyphicon-preview
  • inquiry
    #glyphicon-inquiry
  • unsubscribe
    #glyphicon-unsubscribe
  • set
    #glyphicon-set1
  • stop loss
    #glyphicon-a-stoploss
  • reset-password
    #glyphicon-reset-password
  • stop-profit
    #glyphicon-stop-profit
  • lift ring deposit
    #glyphicon-a-liftringdeposit
  • supervision
    #glyphicon-supervision
  • precious-metal
    #glyphicon-precious-metal
  • knowledge
    #glyphicon-knowledge
  • Touch panels
    #glyphicon-a-Touchpanels
  • the-funds-transfer
    #glyphicon-the-funds-transfer
  • processing measurement
    #glyphicon-a-processingmeasurement
  • risk of check
    #glyphicon-a-riskofcheck
  • some-channels-open
    #glyphicon-some-channels-open
  • product-sold-out
    #glyphicon-product-sold-out
  • withdrawal
    #glyphicon-withdrawal
  • device-not-attachment
    #glyphicon-device-not-attachment
  • third-party-open
    #glyphicon-third-party-open
  • user- error
    #glyphicon-a-user-error
  • positions in management
    #glyphicon-a-positionsinmanagement
  • trade-setting
    #glyphicon-trade-setting
  • foreign exchange at sight
    #glyphicon-a-foreignexchangeatsight
  • quotations-issued-by
    #glyphicon-quotations-issued-by
  • third-party-prohibition
    #glyphicon-third-party-prohibition
  • track
    #glyphicon-track
  • user-add
    #glyphicon-user-add1
  • flex-between-column
    #glyphicon-flex-between-column
  • flex-between-column-h
    #glyphicon-flex-between-column-h
  • compo_icon_form-edit
    #glyphicon-compo_icon_form-edit
  • flex-row-h
    #glyphicon-flex-row-h
  • folder
    #glyphicon-folder
  • check 2
    #glyphicon-a-check2
  • flex-start-row 2
    #glyphicon-a-flex-start-row2
  • down-pair
    #glyphicon-down-pair
  • flex-start-row
    #glyphicon-flex-start-row
  • date-time
    #glyphicon-date-time
  • email
    #glyphicon-email
  • financial information
    #glyphicon-a-financialinformation
  • data-source
    #glyphicon-data-source
  • chart-pie
    #glyphicon-chart-pie
  • flex
    #glyphicon-flex
  • flex-end-row
    #glyphicon-flex-end-row
  • foreign-exchange-forwards
    #glyphicon-foreign-exchange-forwards
  • delete
    #glyphicon-delete
  • edit-fill
    #glyphicon-edit-fill
  • form-export
    #glyphicon-form-export
  • function
    #glyphicon-function
  • group
    #glyphicon-group
  • foreign-exchange-swap
    #glyphicon-foreign-exchange-swap
  • flex-baseline-h
    #glyphicon-flex-baseline-h
  • group-fill
    #glyphicon-group-fill
  • hide
    #glyphicon-hide
  • image
    #glyphicon-image
  • home
    #glyphicon-home
  • icon
    #glyphicon-icon
  • formula
    #glyphicon-formula
  • help
    #glyphicon-help
  • input-box
    #glyphicon-input-box
  • grid
    #glyphicon-grid
  • foreign-currency
    #glyphicon-foreign-currency
  • layout1
    #glyphicon-layout1
  • inline
    #glyphicon-inline
  • layer-fill
    #glyphicon-layer-fill
  • form-import
    #glyphicon-form-import
  • h1
    #glyphicon-h1
  • layout2
    #glyphicon-layout2
  • left
    #glyphicon-left
  • input-item
    #glyphicon-input-item
  • label
    #glyphicon-label
  • form-search
    #glyphicon-form-search
  • line-dot
    #glyphicon-line-dot
  • history
    #glyphicon-history
  • layer
    #glyphicon-layer
  • layout-up-down
    #glyphicon-layout-up-down
  • list-fill
    #glyphicon-list-fill
  • fund
    #glyphicon-fund
  • left-pair
    #glyphicon-left-pair
  • left-fill
    #glyphicon-left-fill
  • max-fill
    #glyphicon-max-fill
  • lightning-fill
    #glyphicon-lightning-fill
  • home-fill
    #glyphicon-home-fill
  • image 2
    #glyphicon-a-image2
  • info
    #glyphicon-info
  • mini
    #glyphicon-mini
  • item
    #glyphicon-item
  • list
    #glyphicon-list
  • hot
    #glyphicon-hot
  • introduce
    #glyphicon-introduce
  • link
    #glyphicon-link
  • line-dash
    #glyphicon-line-dash
  • lock
    #glyphicon-lock
  • metal
    #glyphicon-metal
  • help-fill
    #glyphicon-help-fill
  • Modify
    #glyphicon-Modify
  • iframe
    #glyphicon-iframe
  • monitor
    #glyphicon-monitor
  • multiple choice-fill
    #glyphicon-a-multiplechoice-fill
  • multiple choice
    #glyphicon-a-multiplechoice
  • more1
    #glyphicon-more1
  • negative
    #glyphicon-negative
  • money
    #glyphicon-money
  • more
    #glyphicon-more
  • market risk
    #glyphicon-a-marketrisk
  • fold-1
    #glyphicon-fold-1
  • more1-fill
    #glyphicon-more1-fill
  • foreign-exchange-sight
    #glyphicon-foreign-exchange-sight
  • monitor-fill
    #glyphicon-monitor-fill
  • page
    #glyphicon-page
  • list1
    #glyphicon-list1
  • access
    #glyphicon-access
  • option
    #glyphicon-option
  • inline-block
    #glyphicon-inline-block
  • institution-newly
    #glyphicon-institution-newly
  • left-side
    #glyphicon-left-side
  • more2
    #glyphicon-more2
  • ircle-fill
    #glyphicon-ircle-fill
  • pie chart-fill
    #glyphicon-a-piechart-fill
  • Mute
    #glyphicon-Mute
  • prohibit
    #glyphicon-prohibit
  • process
    #glyphicon-process
  • password
    #glyphicon-password
  • modules
    #glyphicon-modules
  • preserve
    #glyphicon-preserve
  • quotation
    #glyphicon-quotation
  • news
    #glyphicon-news
  • prohibit-fill
    #glyphicon-prohibit-fill
  • pdf
    #glyphicon-pdf
  • positive
    #glyphicon-positive
  • radius-right
    #glyphicon-radius-right
  • quotation-fill
    #glyphicon-quotation-fill
  • query
    #glyphicon-query
  • news-fill
    #glyphicon-news-fill
  • max
    #glyphicon-max
  • push-ws
    #glyphicon-push-ws
  • query-list
    #glyphicon-query-list
  • rectangle
    #glyphicon-rectangle
  • radius-bottom-left
    #glyphicon-radius-bottom-left
  • reduce1-fill
    #glyphicon-reduce1-fill
  • radius-left
    #glyphicon-radius-left
  • move
    #glyphicon-move
  • reduce
    #glyphicon-reduce
  • radius
    #glyphicon-radius
  • quit
    #glyphicon-quit
  • reduce2
    #glyphicon-reduce2
  • narrow
    #glyphicon-narrow
  • layout-left-right
    #glyphicon-layout-left-right
  • right-side
    #glyphicon-right-side
  • right-arrow
    #glyphicon-right-arrow
  • print
    #glyphicon-print
  • right-pair
    #glyphicon-right-pair
  • restore
    #glyphicon-restore
  • right-fill
    #glyphicon-right-fill
  • risk2
    #glyphicon-risk2
  • reduce2-fill
    #glyphicon-reduce2-fill
  • reduce1
    #glyphicon-reduce1
  • return
    #glyphicon-return
  • rise
    #glyphicon-rise
  • left-arrow
    #glyphicon-left-arrow
  • resize-small
    #glyphicon-resize-small
  • refresh
    #glyphicon-refresh
  • screen
    #glyphicon-screen
  • radius-bottom-right
    #glyphicon-radius-bottom-right
  • single choice
    #glyphicon-a-singlechoice
  • service
    #glyphicon-service
  • set up-fill
    #glyphicon-a-setup-fill
  • share
    #glyphicon-share
  • 3D
    #glyphicon-a-3D
  • push-ipc
    #glyphicon-push-ipc
  • 2D
    #glyphicon-a-2D
  • link 2
    #glyphicon-a-link2
  • @
    #glyphicon-a-
  • set up1-fill
    #glyphicon-a-setup1-fill
  • bank
    #glyphicon-bank
  • secede
    #glyphicon-secede
  • border
    #glyphicon-border
  • RMB
    #glyphicon-RMB
  • bank card-fill
    #glyphicon-a-bankcard-fill
  • shear
    #glyphicon-shear
  • audio
    #glyphicon-audio
  • smile
    #glyphicon-smile
  • collapse-single
    #glyphicon-collapse-single
  • space-around-row
    #glyphicon-space-around-row
  • 24h
    #glyphicon-a-24h
  • stflex-end-row
    #glyphicon-stflex-end-row
  • add
    #glyphicon-add
  • skin
    #glyphicon-skin
  • begin
    #glyphicon-begin
  • risk-fill
    #glyphicon-risk-fill
  • border-right
    #glyphicon-border-right
  • strikethrough
    #glyphicon-strikethrough
  • add1-fill
    #glyphicon-add1-fill
  • sort 2
    #glyphicon-a-sort2
  • bottom
    #glyphicon-bottom
  • success
    #glyphicon-success
  • advanced query
    #glyphicon-a-advancedquery
  • set
    #glyphicon-set
  • calendar-range
    #glyphicon-calendar-range
  • select
    #glyphicon-select
  • block 2
    #glyphicon-a-block2
  • set up
    #glyphicon-a-setup
  • add1
    #glyphicon-add1
  • Switch 1
    #glyphicon-a-Switch1
  • calendar-week
    #glyphicon-calendar-week
  • space-between-row
    #glyphicon-space-between-row
  • compo_icon_auto-completion
    #glyphicon-compo_icon_auto-completion
  • single choice2
    #glyphicon-a-singlechoice2
  • border-bottom
    #glyphicon-border-bottom
  • resize-full
    #glyphicon-resize-full
  • center-vertical
    #glyphicon-center-vertical
  • speed
    #glyphicon-speed
  • equipment-fill
    #glyphicon-equipment-fill
  • switch
    #glyphicon-switch
  • bank-card
    #glyphicon-bank-card
  • System-domain
    #glyphicon-System-domain
  • delete-fill
    #glyphicon-delete-fill
  • right
    #glyphicon-right
  • bar-gtaph
    #glyphicon-bar-gtaph
  • text size
    #glyphicon-a-textsize
  • compo_icon_layout-up-crnter-down
    #glyphicon-compo_icon_layout-up-crnter-down
  • tab-single
    #glyphicon-tab-single
  • add2-fill
    #glyphicon-add2-fill
  • time-fill
    #glyphicon-time-fill
  • detailed list-fill
    #glyphicon-a-detailedlist-fill
  • tab le
    #glyphicon-a-table
  • counter
    #glyphicon-counter
  • transaction-fill
    #glyphicon-transaction-fill
  • chat-fill
    #glyphicon-chat-fill
  • text lef
    #glyphicon-a-textlef
  • flex-baseline
    #glyphicon-flex-baseline
  • transaction
    #glyphicon-transaction
  • closecircle
    #glyphicon-closecircle
  • text size 2
    #glyphicon-a-textsize2
  • block-fill
    #glyphicon-block-fill
  • text-italic
    #glyphicon-text-italic
  • close
    #glyphicon-close
  • suspend
    #glyphicon-suspend
  • check-fill
    #glyphicon-check-fill
  • risk3
    #glyphicon-risk3
  • bar chart1
    #glyphicon-a-barchart1
  • sort
    #glyphicon-sort
  • add2
    #glyphicon-add2
  • trans
    #glyphicon-trans
  • detailed list
    #glyphicon-a-detailedlist
  • textediting
    #glyphicon-textediting
  • candlestick chart-fill
    #glyphicon-a-candlestickchart-fill
  • trial
    #glyphicon-trial
  • compo_icon_slider
    #glyphicon-compo_icon_slider
  • tips
    #glyphicon-tips
  • code
    #glyphicon-code
  • risk
    #glyphicon-risk
  • collapse
    #glyphicon-collapse
  • sort-fill
    #glyphicon-sort-fill
  • compo_icon_progress
    #glyphicon-compo_icon_progress
  • set up1
    #glyphicon-a-setup1
  • border-top
    #glyphicon-border-top
  • up-pair
    #glyphicon-up-pair
  • dangerous
    #glyphicon-dangerous
  • text-italic1
    #glyphicon-text-italic1
  • application-fill
    #glyphicon-application-fill
  • unlock
    #glyphicon-unlock
  • commodity
    #glyphicon-commodity
  • tab-div
    #glyphicon-tab-div
  • com_icon_add-folder
    #glyphicon-com_icon_add-folder
  • trend
    #glyphicon-trend
  • divider
    #glyphicon-divider
  • text middle
    #glyphicon-a-textmiddle
  • chart-stock
    #glyphicon-chart-stock
  • unfold-1
    #glyphicon-unfold-1
  • copy
    #glyphicon-copy
  • tab
    #glyphicon-tab
  • credit risks
    #glyphicon-a-creditrisks
  • tag
    #glyphicon-tag
  • application
    #glyphicon-application
  • underline
    #glyphicon-underline
  • chat
    #glyphicon-chat
  • text-bold
    #glyphicon-text-bold
  • excel
    #glyphicon-excel
  • up
    #glyphicon-up
  • file-fill
    #glyphicon-file-fill
  • time
    #glyphicon-time
  • down
    #glyphicon-down
  • user
    #glyphicon-user
  • equipment
    #glyphicon-equipment
  • USD
    #glyphicon-USD
  • delete1
    #glyphicon-delete1
  • up-fill
    #glyphicon-up-fill
  • chat1-fill
    #glyphicon-chat1-fill
  • operational risk
    #glyphicon-a-operationalrisk
  • examine-fill
    #glyphicon-examine-fill
  • upload
    #glyphicon-upload
  • debenture
    #glyphicon-debenture
  • treeselect
    #glyphicon-treeselect
  • configuration
    #glyphicon-configuration
  • tab-pre
    #glyphicon-tab-pre
  • clear
    #glyphicon-clear
  • up-arrow
    #glyphicon-up-arrow
  • block
    #glyphicon-block
  • versions
    #glyphicon-versions
  • clock
    #glyphicon-clock
  • transfer
    #glyphicon-transfer
  • board
    #glyphicon-board
  • workbench
    #glyphicon-workbench
  • check
    #glyphicon-check
  • user-management
    #glyphicon-user-management
  • edit1
    #glyphicon-edit1
  • skin-fill
    #glyphicon-skin-fill
  • code-fill
    #glyphicon-code-fill
  • web
    #glyphicon-web
  • btn
    #glyphicon-btn
  • send
    #glyphicon-send
  • edit
    #glyphicon-edit
  • layout-left-center-right
    #glyphicon-layout-left-center-right
  • circle
    #glyphicon-circle
  • treenode
    #glyphicon-treenode
  • border-left
    #glyphicon-border-left
  • voice
    #glyphicon-voice
  • chart-line
    #glyphicon-chart-line
  • wrapper
    #glyphicon-wrapper
  • data-structure
    #glyphicon-data-structure
  • workbench-fill
    #glyphicon-workbench-fill
  • download
    #glyphicon-download
  • user-add
    #glyphicon-user-add
  • container
    #glyphicon-container
  • update
    #glyphicon-update
  • chat1
    #glyphicon-chat1
  • receive
    #glyphicon-receive
  • examine
    #glyphicon-examine
  • warning
    #glyphicon-warning
  • collect-fill
    #glyphicon-collect-fill
  • steps
    #glyphicon-steps
  • csv
    #glyphicon-csv
  • revisions
    #glyphicon-revisions
  • carousel-single
    #glyphicon-carousel-single
  • row-h
    #glyphicon-row-h
  • back
    #glyphicon-back
  • voice-fill
    #glyphicon-voice-fill
  • collect1-fill
    #glyphicon-collect1-fill
  • user-fill
    #glyphicon-user-fill
  • conference
    #glyphicon-conference
  • withdraw
    #glyphicon-withdraw
  • apex
    #glyphicon-apex
  • tables-add-subtract
    #glyphicon-tables-add-subtract
  • desktop
    #glyphicon-desktop
  • theme
    #glyphicon-theme
  • data-type
    #glyphicon-data-type
  • signal
    #glyphicon-signal
  • calendar-fill
    #glyphicon-calendar-fill
  • style
    #glyphicon-style
  • delete1-fill
    #glyphicon-delete1-fill
  • video
    #glyphicon-video
  • chat-unread
    #glyphicon-chat-unread
  • warn
    #glyphicon-warn
  • center-horizontal
    #glyphicon-center-horizontal
  • Switch 2
    #glyphicon-a-Switch2
  • clear2
    #glyphicon-clear2
  • text right
    #glyphicon-a-textright
  • break
    #glyphicon-break
  • txt
    #glyphicon-txt
  • branch
    #glyphicon-branch
  • word
    #glyphicon-word
  • calendar-month
    #glyphicon-calendar-month
  • tips 2
    #glyphicon-a-tips2
  • carousel
    #glyphicon-carousel
  • warning 2
    #glyphicon-a-warning2
  • collect
    #glyphicon-collect
  • chart-scatter
    #glyphicon-chart-scatter
  • fail-fill
    #glyphicon-fail-fill
  • enter
    #glyphicon-enter
  • appoint
    #glyphicon-appoint
  • calendar-all
    #glyphicon-calendar-all
  • Binding-data-sources
    #glyphicon-Binding-data-sources
  • calendar
    #glyphicon-calendar
  • clear1
    #glyphicon-clear1
  • decline
    #glyphicon-decline
  • data-input
    #glyphicon-data-input
  • com_icon_add-page
    #glyphicon-com_icon_add-page
  • dropdown
    #glyphicon-dropdown
  • down 2
    #glyphicon-a-down2
  • collect1
    #glyphicon-collect1
  • customer
    #glyphicon-customer
  • down-arrow
    #glyphicon-down-arrow

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>