• cbimlogo
    
  • list-sidebar
    
  • company-nav
    
  • company resources management-nav
    
  • project info management colored-nav
    
  • company
    
  • occupation
    
  • drawing comments
    
  • phone number
    
  • multi phase simultaneous-one person start
    
  • multi phase simultaneous-one person
    
  • phase review
    
  • upward
    
  • forward
    
  • downward
    
  • backward
    
  • multi person choose one end-filled
    
  • multi person choose one end
    
  • multi person choose one in the process-filled
    
  • multi person in order end-filled
    
  • multi person simultaneous end-filled
    
  • multi person in order in the process-filled
    
  • multi person in order end
    
  • multi person choose one in the process
    
  • multi person simultaneous end
    
  • multi person in order in the process
    
  • one person end-filled
    
  • one person in the process
    
  • one person end
    
  • one person in the process-filled
    
  • one person start-filled
    
  • multi person simultaneous in the process
    
  • one person start
    
  • multi person simultaneous in the process-filled
    
  • operational account management-nav-colored
    
  • correspondence management-nav-colored
    
  • project files management-nav-colored
    
  • cost analysis-nav-colored
    
  • image management-nav-colored
    
  • output value distribution-nav-colored
    
  • late cooperation-nav-colored
    
  • search-project-nav-colored
    
  • to do-nav-colored
    
  • search-task-nav-colored
    
  • project summary-nav-colored
    
  • project archived-nav-colored
    
  • project punchlist check-nav-colored
    
  • contract management-nav-colored
    
  • edit
    
  • exit full screen-rectangle
    
  • exit full screen
    
  • flag-filled
    
  • flag
    
  • filter
    
  • folder-small-filled
    
  • folder-filled
    
  • folder-small
    
  • folder
    
  • full screen
    
  • full screen-rectangle
    
  • general files-filled
    
  • general files
    
  • help
    
  • help-filled
    
  • ID
    
  • info-filled
    
  • info
    
  • info-small-filled
    
  • info-small
    
  • loading
    
  • locate
    
  • link
    
  • more
    
  • open-in-new
    
  • organization
    
  • model
    
  • publish
    
  • published
    
  • unpublished
    
  • query log
    
  • remove
    
  • remove-circle
    
  • resource pack
    
  • seal
    
  • select subs
    
  • settings-filled
    
  • settings
    
  • settings-small-filled
    
  • settings-small
    
  • show
    
  • hide
    
  • ID
    
  • sort
    
  • sub-project
    
  • time
    
  • time-small
    
  • time-filled
    
  • video
    
  • zoom in
    
  • zoom out
    
  • check-small-circle-filled
    
  • check-circle-filled
    
  • check-circle
    
  • check-small-circle
    
  • check-small
    
  • check
    
  • star-filled
    
  • star
    
  • data-urban construction management
    
  • type-platform
    
  • model-detailed design
    
  • advanced training
    
  • Multi-planning and collaborative project planning
    
  • shared cases
    
  • tool platform-management type
    
  • tool platform-efficiency type
    
  • share and gain
    
  • integrated professional tool platform
    
  • basic professional tool platform
    
  • completion joint acceptance tool
    
  • tool platform-basic type
    
  • data-subject information
    
  • library-practice
    
  • library-structural components
    
  • data-government
    
  • construction project approval management system
    
  • library-templates
    
  • project consultation
    
  • type-data
    
  • library-standard
    
  • library-materials
    
  • enterprise consultation
    
  • self-own knowledge
    
  • type-industry application
    
  • phase-review
    
  • quality control
    
  • data management
    
  • phase-design
    
  • phase-approval
    
  • library-products
    
  • model-construction process
    
  • project approval
    
  • design management
    
  • model-design
    
  • project closed
    
  • data-space planning
    
  • tool platform-special project type
    
  • library-knowledge
    
  • joint review tool for construction drawings of con
    
  • apps-nav
    
  • standard-building
    
  • home-filled
    
  • Urban physical examination evaluation information
    
  • correspondence management-nav
    
  • data-economic society
    
  • design instruction tool-nav
    
  • design knowledge
    
  • enterprise management configuration-nav
    
  • type-security
    
  • messages-nav
    
  • future implementation plan
    
  • my home-nav
    
  • type-basic
    
  • material recipe tool-nav
    
  • data-basic geography
    
  • late cooperation-nav
    
  • type-operation management
    
  • customer service-nav
    
  • knowledge pack
    
  • contract management-nav
    
  • construction project planning scheme, planning lic
    
  • operational account management-nav
    
  • model-as-built
    
  • cost analysis-nav
    
  • policy management regulations
    
  • password management-nav
    
  • data-perception
    
  • image management-nav
    
  • standards-approval
    
  • project home-nav
    
  • study notes
    
  • project items-nav
    
  • output value distribution-nav
    
  • project files management-nav
    
  • project info-nav
    
  • output-nav
    
  • project summary-nav
    
  • project staffs-nav
    
  • search-task-nav
    
  • project archived-nav
    
  • personal info-nav
    
  • my content library-nav
    
  • mechanical and electrical design tool-nav
    
  • search-project-nav
    
  • project announcement-nav
    
  • project files-nav
    
  • to do-nav
    
  • project progress-nav
    
  • project punchlist check-nav
    
  • review-sidebar
    
  • edit-sidebar
    
  • calendar-filled
    
  • view-list
    
  • view-thumbnail
    
  • smart review-sidebar
    
  • items-sidebar
    
  • publish-sidebar
    
  • view content-sidebar
    
  • first view-filled
    
  • measure-area
    
  • layers-filled
    
  • coordinate view-filled
    
  • measure-filled
    
  • section
    
  • measure-angle
    
  • measure-volume
    
  • refresh-small
    
  • refresh
    
  • measure-distance
    
  • weather control-filled
    
  • configuration
    
  • bar chart
    
  • bar chart-filled
    
  • drawing
    
  • info-overview
    
  • data map-filled
    
  • info-overview-filled
    
  • files
    
  • data map
    
  • legend-filled
    
  • legend
    
  • info-statistics-filled
    
  • layer management
    
  • line chart-filled
    
  • info-summary-filled
    
  • search-filled
    
  • line chart
    
  • info-statistics
    
  • search
    
  • measure
    
  • info-summary
    
  • layer management-filled
    
  • split screen
    
  • markup-circle
    
  • markup-arrow
    
  • markup-rectangle
    
  • markup-cloud
    
  • drawing approval
    
  • drawing catalog
    
  • design instruction tool
    
  • drawing review
    
  • drawing catalog planning
    
  • approval
    
  • approval log
    
  • task confirmation
    
  • technical consultation
    
  • task node
    
  • technical review
    
  • node function
    
  • my department cost account
    
  • items upload
    
  • countdown-indicatorxsmall-filled
    
  • ongoing-small-filled
    
  • ongoing-filled
    
  • play video-circle-filled
    
  • play video-circle
    
  • play video
    
  • play video-rectangle
    
  • play audio
    
  • course done
    
  • course to learn
    
  • course ongoing learning
    
  • meeting minutes
    
  • study catalog
    
  • questions
    
  • study tests
    
  • construction standards library
    
  • material recipe tool
    
  • corner marker-background
    
  • corner marker-solo
    
  • tag-free
    
  • corner marker-free
    
  • add-circle
    
  • add
    
  • add-new item list
    
  • add-new staff
    
  • alert-filled
    
  • alert-small
    
  • arrow-left
    
  • arrow-right
    
  • arrow-down
    
  • arrow-up
    
  • amount
    
  • area selection
    
  • attachments
    
  • cancel-small-filled
    
  • cancel-filled
    
  • cancel
    
  • cancel-small
    
  • close
    
  • clear
    
  • mark location
    
  • clear mark position
    
  • cloud download-filled
    
  • cloud download
    
  • cloud upload-filled
    
  • cloud upload
    
  • collapse-all
    
  • expand-all
    
  • collection-small-filled
    
  • collection-filled
    
  • collection-small
    
  • collection
    
  • copy
    
  • date
    
  • communication
    
  • delete
    
  • download
    
  • upload
    
  • drag
    

Unicode 引用


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

  • 兼容性最好,支持 IE6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}

第二步:定义使用 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"。

  • cbimlogo
    .iconcbimlogo
  • list-sidebar
    .iconlist-sidebar
  • company-nav
    .iconcompany-nav
  • company resources management-nav
    .iconcompanyresourcesmanagement-nav
  • project info management colored-nav
    .iconprojectinfomanagementcolored-nav
  • company
    .iconcompany
  • occupation
    .iconoccupation
  • drawing comments
    .icondrawingcomments
  • phone number
    .iconphonenumber
  • multi phase simultaneous-one person start
    .iconmultiphasesimultaneous-onepersonstart
  • multi phase simultaneous-one person
    .iconmultiphasesimultaneous-oneperson
  • phase review
    .iconphasereview
  • upward
    .iconupward
  • forward
    .iconforward
  • downward
    .icondownward
  • backward
    .iconbackward
  • multi person choose one end-filled
    .iconmultipersonchooseoneend-filled
  • multi person choose one end
    .iconmultipersonchooseoneend
  • multi person choose one in the process-filled
    .iconmultipersonchooseoneintheprocess-filled
  • multi person in order end-filled
    .iconmultipersoninorderend-filled
  • multi person simultaneous end-filled
    .iconmultipersonsimultaneousend-filled
  • multi person in order in the process-filled
    .iconmultipersoninorderintheprocess-filled
  • multi person in order end
    .iconmultipersoninorderend
  • multi person choose one in the process
    .iconmultipersonchooseoneintheprocess
  • multi person simultaneous end
    .iconmultipersonsimultaneousend
  • multi person in order in the process
    .iconmultipersoninorderintheprocess
  • one person end-filled
    .icononepersonend-filled
  • one person in the process
    .icononepersonintheprocess
  • one person end
    .icononepersonend
  • one person in the process-filled
    .icononepersonintheprocess-filled
  • one person start-filled
    .icononepersonstart-filled
  • multi person simultaneous in the process
    .iconmultipersonsimultaneousintheprocess
  • one person start
    .icononepersonstart
  • multi person simultaneous in the process-filled
    .iconmultipersonsimultaneousintheprocess-filled
  • operational account management-nav-colored
    .iconoperationalaccountmanagement-nav-colored
  • correspondence management-nav-colored
    .iconcorrespondencemanagement-nav-colored
  • project files management-nav-colored
    .iconprojectfilesmanagement-nav-colored
  • cost analysis-nav-colored
    .iconcostanalysis-nav-colored
  • image management-nav-colored
    .iconimagemanagement-nav-colored
  • output value distribution-nav-colored
    .iconoutputvaluedistribution-nav-colored
  • late cooperation-nav-colored
    .iconlatecooperation-nav-colored
  • search-project-nav-colored
    .iconsearch-project-nav-colored
  • to do-nav-colored
    .icontodo-nav-colored
  • search-task-nav-colored
    .iconsearch-task-nav-colored
  • project summary-nav-colored
    .iconprojectsummary-nav-colored
  • project archived-nav-colored
    .iconprojectarchived-nav-colored
  • project punchlist check-nav-colored
    .iconprojectpunchlistcheck-nav-colored
  • contract management-nav-colored
    .iconcontractmanagement-nav-colored
  • edit
    .iconedit
  • exit full screen-rectangle
    .iconexitfullscreen-rectangle
  • exit full screen
    .iconexitfullscreen
  • flag-filled
    .iconflag-filled
  • flag
    .iconflag
  • filter
    .iconfilter
  • folder-small-filled
    .iconfolder-small-filled
  • folder-filled
    .iconfolder-filled
  • folder-small
    .iconfolder-small
  • folder
    .iconfolder
  • full screen
    .iconfullscreen
  • full screen-rectangle
    .iconfullscreen-rectangle
  • general files-filled
    .icongeneralfiles-filled
  • general files
    .icongeneralfiles
  • help
    .iconhelp
  • help-filled
    .iconhelp-filled
  • ID
    .iconID
  • info-filled
    .iconinfo-filled
  • info
    .iconinfo
  • info-small-filled
    .iconinfo-small-filled
  • info-small
    .iconinfo-small
  • loading
    .iconloading
  • locate
    .iconlocate
  • link
    .iconlink
  • more
    .iconmore
  • open-in-new
    .iconopen-in-new
  • organization
    .iconorganization
  • model
    .iconmodel
  • publish
    .iconpublish
  • published
    .iconpublished
  • unpublished
    .iconunpublished
  • query log
    .iconquerylog
  • remove
    .iconremove
  • remove-circle
    .iconremove-circle
  • resource pack
    .iconresourcepack
  • seal
    .iconseal
  • select subs
    .iconselectsubs
  • settings-filled
    .iconsettings-filled
  • settings
    .iconsettings
  • settings-small-filled
    .iconsettings-small-filled
  • settings-small
    .iconsettings-small
  • show
    .iconshow
  • hide
    .iconhide
  • ID
    .iconID1
  • sort
    .iconsort
  • sub-project
    .iconsub-project
  • time
    .icontime
  • time-small
    .icontime-small
  • time-filled
    .icontime-filled
  • video
    .iconvideo
  • zoom in
    .iconzoomin
  • zoom out
    .iconzoomout
  • check-small-circle-filled
    .iconcheck-small-circle-filled
  • check-circle-filled
    .iconcheck-circle-filled
  • check-circle
    .iconcheck-circle
  • check-small-circle
    .iconcheck-small-circle
  • check-small
    .iconcheck-small
  • check
    .iconcheck
  • star-filled
    .iconstar-filled
  • star
    .iconstar
  • data-urban construction management
    .icondata-urbanconstructionmanagement
  • type-platform
    .icontype-platform
  • model-detailed design
    .iconmodel-detaileddesign
  • advanced training
    .iconadvancedtraining
  • Multi-planning and collaborative project planning
    .iconMulti-planningandcollaborativeprojectplanning
  • shared cases
    .iconsharedcases
  • tool platform-management type
    .icontoolplatform-managementtype
  • tool platform-efficiency type
    .icontoolplatform-efficiencytype
  • share and gain
    .iconshareandgain
  • integrated professional tool platform
    .iconintegratedprofessionaltoolplatform
  • basic professional tool platform
    .iconbasicprofessionaltoolplatform
  • completion joint acceptance tool
    .iconcompletionjointacceptancetool
  • tool platform-basic type
    .icontoolplatform-basictype
  • data-subject information
    .icondata-subjectinformation
  • library-practice
    .iconlibrary-practice
  • library-structural components
    .iconlibrary-structuralcomponents
  • data-government
    .icondata-government
  • construction project approval management system
    .iconconstructionprojectapprovalmanagementsystem
  • library-templates
    .iconlibrary-templates
  • project consultation
    .iconprojectconsultation
  • type-data
    .icontype-data
  • library-standard
    .iconlibrary-standard
  • library-materials
    .iconlibrary-materials
  • enterprise consultation
    .iconenterpriseconsultation
  • self-own knowledge
    .iconself-ownknowledge
  • type-industry application
    .icontype-industryapplication
  • phase-review
    .iconphase-review
  • quality control
    .iconqualitycontrol
  • data management
    .icondatamanagement
  • phase-design
    .iconphase-design
  • phase-approval
    .iconphase-approval
  • library-products
    .iconlibrary-products
  • model-construction process
    .iconmodel-constructionprocess
  • project approval
    .iconprojectapproval
  • design management
    .icondesignmanagement
  • model-design
    .iconmodel-design
  • project closed
    .iconprojectclosed
  • data-space planning
    .icondata-spaceplanning
  • tool platform-special project type
    .icontoolplatform-specialprojecttype
  • library-knowledge
    .iconlibrary-knowledge
  • joint review tool for construction drawings of con
    .iconjointreviewtoolforconstructiondrawingsofcon
  • apps-nav
    .iconapps-nav
  • standard-building
    .iconstandard-building
  • home-filled
    .iconhome-filled
  • Urban physical examination evaluation information
    .iconUrbanphysicalexaminationevaluationinformation
  • correspondence management-nav
    .iconcorrespondencemanagement-nav
  • data-economic society
    .icondata-economicsociety
  • design instruction tool-nav
    .icondesigninstructiontool-nav
  • design knowledge
    .icondesignknowledge
  • enterprise management configuration-nav
    .iconenterprisemanagementconfiguration-nav
  • type-security
    .icontype-security
  • messages-nav
    .iconmessages-nav
  • future implementation plan
    .iconfutureimplementationplan
  • my home-nav
    .iconmyhome-nav
  • type-basic
    .icontype-basic
  • material recipe tool-nav
    .iconmaterialrecipetool-nav
  • data-basic geography
    .icondata-basicgeography
  • late cooperation-nav
    .iconlatecooperation-nav
  • type-operation management
    .icontype-operationmanagement
  • customer service-nav
    .iconcustomerservice-nav
  • knowledge pack
    .iconknowledgepack
  • contract management-nav
    .iconcontractmanagement-nav
  • construction project planning scheme, planning lic
    .iconconstructionprojectplanningschemeplanninglic
  • operational account management-nav
    .iconoperationalaccountmanagement-nav
  • model-as-built
    .iconmodel-as-built
  • cost analysis-nav
    .iconcostanalysis-nav
  • policy management regulations
    .iconpolicymanagementregulations
  • password management-nav
    .iconpasswordmanagement-nav
  • data-perception
    .icondata-perception
  • image management-nav
    .iconimagemanagement-nav
  • standards-approval
    .iconstandards-approval
  • project home-nav
    .iconprojecthome-nav
  • study notes
    .iconstudynotes
  • project items-nav
    .iconprojectitems-nav
  • output value distribution-nav
    .iconoutputvaluedistribution-nav
  • project files management-nav
    .iconprojectfilesmanagement-nav
  • project info-nav
    .iconprojectinfo-nav
  • output-nav
    .iconoutput-nav
  • project summary-nav
    .iconprojectsummary-nav
  • project staffs-nav
    .iconprojectstaffs-nav
  • search-task-nav
    .iconsearch-task-nav
  • project archived-nav
    .iconprojectarchived-nav
  • personal info-nav
    .iconpersonalinfo-nav
  • my content library-nav
    .iconmycontentlibrary-nav
  • mechanical and electrical design tool-nav
    .iconmechanicalandelectricaldesigntool-nav
  • search-project-nav
    .iconsearch-project-nav
  • project announcement-nav
    .iconprojectannouncement-nav
  • project files-nav
    .iconprojectfiles-nav
  • to do-nav
    .icontodo-nav
  • project progress-nav
    .iconprojectprogress-nav
  • project punchlist check-nav
    .iconprojectpunchlistcheck-nav
  • review-sidebar
    .iconreview-sidebar
  • edit-sidebar
    .iconedit-sidebar
  • calendar-filled
    .iconcalendar-filled
  • view-list
    .iconview-list
  • view-thumbnail
    .iconview-thumbnail
  • smart review-sidebar
    .iconsmartreview-sidebar
  • items-sidebar
    .iconitems-sidebar
  • publish-sidebar
    .iconpublish-sidebar
  • view content-sidebar
    .iconviewcontent-sidebar
  • first view-filled
    .iconfirstview-filled
  • measure-area
    .iconmeasure-area
  • layers-filled
    .iconlayers-filled
  • coordinate view-filled
    .iconcoordinateview-filled
  • measure-filled
    .iconmeasure-filled
  • section
    .iconsection
  • measure-angle
    .iconmeasure-angle
  • measure-volume
    .iconmeasure-volume
  • refresh-small
    .iconrefresh-small
  • refresh
    .iconrefresh
  • measure-distance
    .iconmeasure-distance
  • weather control-filled
    .iconweathercontrol-filled
  • configuration
    .iconconfiguration
  • bar chart
    .iconbarchart
  • bar chart-filled
    .iconbarchart-filled
  • drawing
    .icondrawing
  • info-overview
    .iconinfo-overview
  • data map-filled
    .icondatamap-filled
  • info-overview-filled
    .iconinfo-overview-filled
  • files
    .iconfiles
  • data map
    .icondatamap
  • legend-filled
    .iconlegend-filled
  • legend
    .iconlegend
  • info-statistics-filled
    .iconinfo-statistics-filled
  • layer management
    .iconlayermanagement
  • line chart-filled
    .iconlinechart-filled
  • info-summary-filled
    .iconinfo-summary-filled
  • search-filled
    .iconsearch-filled
  • line chart
    .iconlinechart
  • info-statistics
    .iconinfo-statistics
  • search
    .iconsearch
  • measure
    .iconmeasure
  • info-summary
    .iconinfo-summary
  • layer management-filled
    .iconlayermanagement-filled
  • split screen
    .iconsplitscreen
  • markup-circle
    .iconmarkup-circle
  • markup-arrow
    .iconmarkup-arrow
  • markup-rectangle
    .iconmarkup-rectangle
  • markup-cloud
    .iconmarkup-cloud
  • drawing approval
    .icondrawingapproval
  • drawing catalog
    .icondrawingcatalog
  • design instruction tool
    .icondesigninstructiontool
  • drawing review
    .icondrawingreview
  • drawing catalog planning
    .icondrawingcatalogplanning
  • approval
    .iconapproval
  • approval log
    .iconapprovallog
  • task confirmation
    .icontaskconfirmation
  • technical consultation
    .icontechnicalconsultation
  • task node
    .icontasknode
  • technical review
    .icontechnicalreview
  • node function
    .iconnodefunction
  • my department cost account
    .iconmydepartmentcostaccount
  • items upload
    .iconitemsupload
  • countdown-indicatorxsmall-filled
    .iconcountdown-indicatorxsmall-filled
  • ongoing-small-filled
    .iconongoing-small-filled
  • ongoing-filled
    .iconongoing-filled
  • play video-circle-filled
    .iconplayvideo-circle-filled
  • play video-circle
    .iconplayvideo-circle
  • play video
    .iconplayvideo
  • play video-rectangle
    .iconplayvideo-rectangle
  • play audio
    .iconplayaudio
  • course done
    .iconcoursedone
  • course to learn
    .iconcoursetolearn
  • course ongoing learning
    .iconcourseongoinglearning
  • meeting minutes
    .iconmeetingminutes
  • study catalog
    .iconstudycatalog
  • questions
    .iconquestions
  • study tests
    .iconstudytests
  • construction standards library
    .iconconstructionstandardslibrary
  • material recipe tool
    .iconmaterialrecipetool
  • corner marker-background
    .iconcornermarker-background
  • corner marker-solo
    .iconcornermarker-solo
  • tag-free
    .icontag-free
  • corner marker-free
    .iconcornermarker-free
  • add-circle
    .iconadd-circle
  • add
    .iconadd
  • add-new item list
    .iconadd-newitemlist
  • add-new staff
    .iconadd-newstaff
  • alert-filled
    .iconalert-filled
  • alert-small
    .iconalert-small
  • arrow-left
    .iconarrow-left
  • arrow-right
    .iconarrow-right
  • arrow-down
    .iconarrow-down
  • arrow-up
    .iconarrow-up
  • amount
    .iconamount
  • area selection
    .iconareaselection
  • attachments
    .iconattachments
  • cancel-small-filled
    .iconcancel-small-filled
  • cancel-filled
    .iconcancel-filled
  • cancel
    .iconcancel
  • cancel-small
    .iconcancel-small
  • close
    .iconclose
  • clear
    .iconclear
  • mark location
    .iconmarklocation
  • clear mark position
    .iconclearmarkposition
  • cloud download-filled
    .iconclouddownload-filled
  • cloud download
    .iconclouddownload
  • cloud upload-filled
    .iconcloudupload-filled
  • cloud upload
    .iconcloudupload
  • collapse-all
    .iconcollapse-all
  • expand-all
    .iconexpand-all
  • collection-small-filled
    .iconcollection-small-filled
  • collection-filled
    .iconcollection-filled
  • collection-small
    .iconcollection-small
  • collection
    .iconcollection
  • copy
    .iconcopy
  • date
    .icondate
  • communication
    .iconcommunication
  • delete
    .icondelete
  • download
    .icondownload
  • upload
    .iconupload
  • drag
    .icondrag

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="iconfont iconxxx"></span>

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

  • cbimlogo
    #iconcbimlogo
  • list-sidebar
    #iconlist-sidebar
  • company-nav
    #iconcompany-nav
  • company resources management-nav
    #iconcompanyresourcesmanagement-nav
  • project info management colored-nav
    #iconprojectinfomanagementcolored-nav
  • company
    #iconcompany
  • occupation
    #iconoccupation
  • drawing comments
    #icondrawingcomments
  • phone number
    #iconphonenumber
  • multi phase simultaneous-one person start
    #iconmultiphasesimultaneous-onepersonstart
  • multi phase simultaneous-one person
    #iconmultiphasesimultaneous-oneperson
  • phase review
    #iconphasereview
  • upward
    #iconupward
  • forward
    #iconforward
  • downward
    #icondownward
  • backward
    #iconbackward
  • multi person choose one end-filled
    #iconmultipersonchooseoneend-filled
  • multi person choose one end
    #iconmultipersonchooseoneend
  • multi person choose one in the process-filled
    #iconmultipersonchooseoneintheprocess-filled
  • multi person in order end-filled
    #iconmultipersoninorderend-filled
  • multi person simultaneous end-filled
    #iconmultipersonsimultaneousend-filled
  • multi person in order in the process-filled
    #iconmultipersoninorderintheprocess-filled
  • multi person in order end
    #iconmultipersoninorderend
  • multi person choose one in the process
    #iconmultipersonchooseoneintheprocess
  • multi person simultaneous end
    #iconmultipersonsimultaneousend
  • multi person in order in the process
    #iconmultipersoninorderintheprocess
  • one person end-filled
    #icononepersonend-filled
  • one person in the process
    #icononepersonintheprocess
  • one person end
    #icononepersonend
  • one person in the process-filled
    #icononepersonintheprocess-filled
  • one person start-filled
    #icononepersonstart-filled
  • multi person simultaneous in the process
    #iconmultipersonsimultaneousintheprocess
  • one person start
    #icononepersonstart
  • multi person simultaneous in the process-filled
    #iconmultipersonsimultaneousintheprocess-filled
  • operational account management-nav-colored
    #iconoperationalaccountmanagement-nav-colored
  • correspondence management-nav-colored
    #iconcorrespondencemanagement-nav-colored
  • project files management-nav-colored
    #iconprojectfilesmanagement-nav-colored
  • cost analysis-nav-colored
    #iconcostanalysis-nav-colored
  • image management-nav-colored
    #iconimagemanagement-nav-colored
  • output value distribution-nav-colored
    #iconoutputvaluedistribution-nav-colored
  • late cooperation-nav-colored
    #iconlatecooperation-nav-colored
  • search-project-nav-colored
    #iconsearch-project-nav-colored
  • to do-nav-colored
    #icontodo-nav-colored
  • search-task-nav-colored
    #iconsearch-task-nav-colored
  • project summary-nav-colored
    #iconprojectsummary-nav-colored
  • project archived-nav-colored
    #iconprojectarchived-nav-colored
  • project punchlist check-nav-colored
    #iconprojectpunchlistcheck-nav-colored
  • contract management-nav-colored
    #iconcontractmanagement-nav-colored
  • edit
    #iconedit
  • exit full screen-rectangle
    #iconexitfullscreen-rectangle
  • exit full screen
    #iconexitfullscreen
  • flag-filled
    #iconflag-filled
  • flag
    #iconflag
  • filter
    #iconfilter
  • folder-small-filled
    #iconfolder-small-filled
  • folder-filled
    #iconfolder-filled
  • folder-small
    #iconfolder-small
  • folder
    #iconfolder
  • full screen
    #iconfullscreen
  • full screen-rectangle
    #iconfullscreen-rectangle
  • general files-filled
    #icongeneralfiles-filled
  • general files
    #icongeneralfiles
  • help
    #iconhelp
  • help-filled
    #iconhelp-filled
  • ID
    #iconID
  • info-filled
    #iconinfo-filled
  • info
    #iconinfo
  • info-small-filled
    #iconinfo-small-filled
  • info-small
    #iconinfo-small
  • loading
    #iconloading
  • locate
    #iconlocate
  • link
    #iconlink
  • more
    #iconmore
  • open-in-new
    #iconopen-in-new
  • organization
    #iconorganization
  • model
    #iconmodel
  • publish
    #iconpublish
  • published
    #iconpublished
  • unpublished
    #iconunpublished
  • query log
    #iconquerylog
  • remove
    #iconremove
  • remove-circle
    #iconremove-circle
  • resource pack
    #iconresourcepack
  • seal
    #iconseal
  • select subs
    #iconselectsubs
  • settings-filled
    #iconsettings-filled
  • settings
    #iconsettings
  • settings-small-filled
    #iconsettings-small-filled
  • settings-small
    #iconsettings-small
  • show
    #iconshow
  • hide
    #iconhide
  • ID
    #iconID1
  • sort
    #iconsort
  • sub-project
    #iconsub-project
  • time
    #icontime
  • time-small
    #icontime-small
  • time-filled
    #icontime-filled
  • video
    #iconvideo
  • zoom in
    #iconzoomin
  • zoom out
    #iconzoomout
  • check-small-circle-filled
    #iconcheck-small-circle-filled
  • check-circle-filled
    #iconcheck-circle-filled
  • check-circle
    #iconcheck-circle
  • check-small-circle
    #iconcheck-small-circle
  • check-small
    #iconcheck-small
  • check
    #iconcheck
  • star-filled
    #iconstar-filled
  • star
    #iconstar
  • data-urban construction management
    #icondata-urbanconstructionmanagement
  • type-platform
    #icontype-platform
  • model-detailed design
    #iconmodel-detaileddesign
  • advanced training
    #iconadvancedtraining
  • Multi-planning and collaborative project planning
    #iconMulti-planningandcollaborativeprojectplanning
  • shared cases
    #iconsharedcases
  • tool platform-management type
    #icontoolplatform-managementtype
  • tool platform-efficiency type
    #icontoolplatform-efficiencytype
  • share and gain
    #iconshareandgain
  • integrated professional tool platform
    #iconintegratedprofessionaltoolplatform
  • basic professional tool platform
    #iconbasicprofessionaltoolplatform
  • completion joint acceptance tool
    #iconcompletionjointacceptancetool
  • tool platform-basic type
    #icontoolplatform-basictype
  • data-subject information
    #icondata-subjectinformation
  • library-practice
    #iconlibrary-practice
  • library-structural components
    #iconlibrary-structuralcomponents
  • data-government
    #icondata-government
  • construction project approval management system
    #iconconstructionprojectapprovalmanagementsystem
  • library-templates
    #iconlibrary-templates
  • project consultation
    #iconprojectconsultation
  • type-data
    #icontype-data
  • library-standard
    #iconlibrary-standard
  • library-materials
    #iconlibrary-materials
  • enterprise consultation
    #iconenterpriseconsultation
  • self-own knowledge
    #iconself-ownknowledge
  • type-industry application
    #icontype-industryapplication
  • phase-review
    #iconphase-review
  • quality control
    #iconqualitycontrol
  • data management
    #icondatamanagement
  • phase-design
    #iconphase-design
  • phase-approval
    #iconphase-approval
  • library-products
    #iconlibrary-products
  • model-construction process
    #iconmodel-constructionprocess
  • project approval
    #iconprojectapproval
  • design management
    #icondesignmanagement
  • model-design
    #iconmodel-design
  • project closed
    #iconprojectclosed
  • data-space planning
    #icondata-spaceplanning
  • tool platform-special project type
    #icontoolplatform-specialprojecttype
  • library-knowledge
    #iconlibrary-knowledge
  • joint review tool for construction drawings of con
    #iconjointreviewtoolforconstructiondrawingsofcon
  • apps-nav
    #iconapps-nav
  • standard-building
    #iconstandard-building
  • home-filled
    #iconhome-filled
  • Urban physical examination evaluation information
    #iconUrbanphysicalexaminationevaluationinformation
  • correspondence management-nav
    #iconcorrespondencemanagement-nav
  • data-economic society
    #icondata-economicsociety
  • design instruction tool-nav
    #icondesigninstructiontool-nav
  • design knowledge
    #icondesignknowledge
  • enterprise management configuration-nav
    #iconenterprisemanagementconfiguration-nav
  • type-security
    #icontype-security
  • messages-nav
    #iconmessages-nav
  • future implementation plan
    #iconfutureimplementationplan
  • my home-nav
    #iconmyhome-nav
  • type-basic
    #icontype-basic
  • material recipe tool-nav
    #iconmaterialrecipetool-nav
  • data-basic geography
    #icondata-basicgeography
  • late cooperation-nav
    #iconlatecooperation-nav
  • type-operation management
    #icontype-operationmanagement
  • customer service-nav
    #iconcustomerservice-nav
  • knowledge pack
    #iconknowledgepack
  • contract management-nav
    #iconcontractmanagement-nav
  • construction project planning scheme, planning lic
    #iconconstructionprojectplanningschemeplanninglic
  • operational account management-nav
    #iconoperationalaccountmanagement-nav
  • model-as-built
    #iconmodel-as-built
  • cost analysis-nav
    #iconcostanalysis-nav
  • policy management regulations
    #iconpolicymanagementregulations
  • password management-nav
    #iconpasswordmanagement-nav
  • data-perception
    #icondata-perception
  • image management-nav
    #iconimagemanagement-nav
  • standards-approval
    #iconstandards-approval
  • project home-nav
    #iconprojecthome-nav
  • study notes
    #iconstudynotes
  • project items-nav
    #iconprojectitems-nav
  • output value distribution-nav
    #iconoutputvaluedistribution-nav
  • project files management-nav
    #iconprojectfilesmanagement-nav
  • project info-nav
    #iconprojectinfo-nav
  • output-nav
    #iconoutput-nav
  • project summary-nav
    #iconprojectsummary-nav
  • project staffs-nav
    #iconprojectstaffs-nav
  • search-task-nav
    #iconsearch-task-nav
  • project archived-nav
    #iconprojectarchived-nav
  • personal info-nav
    #iconpersonalinfo-nav
  • my content library-nav
    #iconmycontentlibrary-nav
  • mechanical and electrical design tool-nav
    #iconmechanicalandelectricaldesigntool-nav
  • search-project-nav
    #iconsearch-project-nav
  • project announcement-nav
    #iconprojectannouncement-nav
  • project files-nav
    #iconprojectfiles-nav
  • to do-nav
    #icontodo-nav
  • project progress-nav
    #iconprojectprogress-nav
  • project punchlist check-nav
    #iconprojectpunchlistcheck-nav
  • review-sidebar
    #iconreview-sidebar
  • edit-sidebar
    #iconedit-sidebar
  • calendar-filled
    #iconcalendar-filled
  • view-list
    #iconview-list
  • view-thumbnail
    #iconview-thumbnail
  • smart review-sidebar
    #iconsmartreview-sidebar
  • items-sidebar
    #iconitems-sidebar
  • publish-sidebar
    #iconpublish-sidebar
  • view content-sidebar
    #iconviewcontent-sidebar
  • first view-filled
    #iconfirstview-filled
  • measure-area
    #iconmeasure-area
  • layers-filled
    #iconlayers-filled
  • coordinate view-filled
    #iconcoordinateview-filled
  • measure-filled
    #iconmeasure-filled
  • section
    #iconsection
  • measure-angle
    #iconmeasure-angle
  • measure-volume
    #iconmeasure-volume
  • refresh-small
    #iconrefresh-small
  • refresh
    #iconrefresh
  • measure-distance
    #iconmeasure-distance
  • weather control-filled
    #iconweathercontrol-filled
  • configuration
    #iconconfiguration
  • bar chart
    #iconbarchart
  • bar chart-filled
    #iconbarchart-filled
  • drawing
    #icondrawing
  • info-overview
    #iconinfo-overview
  • data map-filled
    #icondatamap-filled
  • info-overview-filled
    #iconinfo-overview-filled
  • files
    #iconfiles
  • data map
    #icondatamap
  • legend-filled
    #iconlegend-filled
  • legend
    #iconlegend
  • info-statistics-filled
    #iconinfo-statistics-filled
  • layer management
    #iconlayermanagement
  • line chart-filled
    #iconlinechart-filled
  • info-summary-filled
    #iconinfo-summary-filled
  • search-filled
    #iconsearch-filled
  • line chart
    #iconlinechart
  • info-statistics
    #iconinfo-statistics
  • search
    #iconsearch
  • measure
    #iconmeasure
  • info-summary
    #iconinfo-summary
  • layer management-filled
    #iconlayermanagement-filled
  • split screen
    #iconsplitscreen
  • markup-circle
    #iconmarkup-circle
  • markup-arrow
    #iconmarkup-arrow
  • markup-rectangle
    #iconmarkup-rectangle
  • markup-cloud
    #iconmarkup-cloud
  • drawing approval
    #icondrawingapproval
  • drawing catalog
    #icondrawingcatalog
  • design instruction tool
    #icondesigninstructiontool
  • drawing review
    #icondrawingreview
  • drawing catalog planning
    #icondrawingcatalogplanning
  • approval
    #iconapproval
  • approval log
    #iconapprovallog
  • task confirmation
    #icontaskconfirmation
  • technical consultation
    #icontechnicalconsultation
  • task node
    #icontasknode
  • technical review
    #icontechnicalreview
  • node function
    #iconnodefunction
  • my department cost account
    #iconmydepartmentcostaccount
  • items upload
    #iconitemsupload
  • countdown-indicatorxsmall-filled
    #iconcountdown-indicatorxsmall-filled
  • ongoing-small-filled
    #iconongoing-small-filled
  • ongoing-filled
    #iconongoing-filled
  • play video-circle-filled
    #iconplayvideo-circle-filled
  • play video-circle
    #iconplayvideo-circle
  • play video
    #iconplayvideo
  • play video-rectangle
    #iconplayvideo-rectangle
  • play audio
    #iconplayaudio
  • course done
    #iconcoursedone
  • course to learn
    #iconcoursetolearn
  • course ongoing learning
    #iconcourseongoinglearning
  • meeting minutes
    #iconmeetingminutes
  • study catalog
    #iconstudycatalog
  • questions
    #iconquestions
  • study tests
    #iconstudytests
  • construction standards library
    #iconconstructionstandardslibrary
  • material recipe tool
    #iconmaterialrecipetool
  • corner marker-background
    #iconcornermarker-background
  • corner marker-solo
    #iconcornermarker-solo
  • tag-free
    #icontag-free
  • corner marker-free
    #iconcornermarker-free
  • add-circle
    #iconadd-circle
  • add
    #iconadd
  • add-new item list
    #iconadd-newitemlist
  • add-new staff
    #iconadd-newstaff
  • alert-filled
    #iconalert-filled
  • alert-small
    #iconalert-small
  • arrow-left
    #iconarrow-left
  • arrow-right
    #iconarrow-right
  • arrow-down
    #iconarrow-down
  • arrow-up
    #iconarrow-up
  • amount
    #iconamount
  • area selection
    #iconareaselection
  • attachments
    #iconattachments
  • cancel-small-filled
    #iconcancel-small-filled
  • cancel-filled
    #iconcancel-filled
  • cancel
    #iconcancel
  • cancel-small
    #iconcancel-small
  • close
    #iconclose
  • clear
    #iconclear
  • mark location
    #iconmarklocation
  • clear mark position
    #iconclearmarkposition
  • cloud download-filled
    #iconclouddownload-filled
  • cloud download
    #iconclouddownload
  • cloud upload-filled
    #iconcloudupload-filled
  • cloud upload
    #iconcloudupload
  • collapse-all
    #iconcollapse-all
  • expand-all
    #iconexpand-all
  • collection-small-filled
    #iconcollection-small-filled
  • collection-filled
    #iconcollection-filled
  • collection-small
    #iconcollection-small
  • collection
    #iconcollection
  • copy
    #iconcopy
  • date
    #icondate
  • communication
    #iconcommunication
  • delete
    #icondelete
  • download
    #icondownload
  • upload
    #iconupload
  • drag
    #icondrag

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>