• b-indicator
    
  • search
    
  • pin
    
  • indicate1
    
  • indicate2
    
  • indicate3
    
  • 4dage_cn
    
  • 4dage_en
    
  • mode_vr
    
  • measure_b
    
  • sreen_c
    
  • scaleplate_b
    
  • menu_m
    
  • sreen_o
    
  • music_s
    
  • photograph_b
    
  • show_3d_s
    
  • show_plane_n
    
  • show_3d_n
    
  • show_plane_s
    
  • show_roaming_s
    
  • show_roaming_n
    
  • stand
    
  • swsd__cn
    
  • swsd__en
    
  • b_pic
    
  • b_music
    
  • b_text
    
  • b_video
    
  • b_internet
    
  • frame-s
    
  • frame-b
    
  • frame-w
    
  • frame-d
    
  • without
    
  • copy
    
  • scaleplate
    
  • location
    
  • nav-edit
    
  • share
    
  • logo-4dage
    
  • del-s
    
  • photograph
    
  • assist
    
  • data_revise_n
    
  • close_r
    
  • Bathtub
    
  • BedsideCupboard
    
  • BalconyChair
    
  • Cupboard
    
  • Desk
    
  • Closestool
    
  • CombinationSofa
    
  • DiningTable
    
  • Elevator
    
  • Dresser
    
  • DoubleBed
    
  • Carpet
    
  • GasStove
    
  • TV
    
  • SingleBed
    
  • SingleSofa
    
  • Wardrobe
    
  • Washstand
    
  • Pillow
    
  • TeaTable
    
  • Plant
    
  • info_agent
    
  • scene_lecture
    
  • 撤销
    
  • tagging
    
  • maps_enlarge
    
  • rinfo_address
    
  • rinfo_avprice
    
  • rinfo_orientation
    
  • rinfo_developers
    
  • rinfo_newest
    
  • rinfo_earliest
    
  • rinfo_layout
    
  • rinfo_price
    
  • rinfo_area
    
  • rinfo_agelimit
    
  • 暂停
    
  • rinfo_play
    
  • scene_call
    
  • scene_rule_normal
    
  • scene_rule_close
    
  • scene_tags_close
    
  • scene_tags_normal
    
  • scene_vrlecture
    
  • scene_vrmode
    
  • scene_tool
    
  • scene_tool_active
    
  • a_position
    
  • a-scale
    
  • model-s
    
  • video-s
    
  • chartlet-s
    
  • filter2
    
  • monitor-e
    
  • monitor-b
    
  • monitor-s
    
  • monitoring
    
  • b-label
    
  • b-Monitor
    
  • b-scene
    
  • adjust
    
  • filter
    
  • minimap
    
  • show_share
    
  • show_more_ruler
    
  • transparency
    
  • mosaic_e
    
  • eraser
    
  • video
    
  • down
    
  • 清空
    
  • QQ
    
  • 朋友
    
  • link
    
  • icon_share_facebook
    
  • icon_share_whatsapp
    
  • 微信
    
  • watermark
    
  • camera_h
    
  • 1V1
    
  • 横标EN
    
  • hot_spot
    
  • foot
    
  • music-t
    
  • yes
    
  • no
    
  • floor_rename
    
  • play_stop
    
  • scene_auto
    
  • compass
    
  • h-d
    
  • scene_screen
    
  • scene_full
    
  • scene_window
    
  • 返回
    
  • show_back
    
  • show_more_share
    
  • show_more_finish
    
  • show_more_music
    
  • show_map_collect
    
  • data-j
    
  • cancel
    
  • affirm
    
  • checkbox_p
    
  • left
    
  • right
    
  • loading
    
  • show_function_collect
    
  • show_more
    
  • d-r
    
  • up-a
    
  • edit_mirror
    
  • neiqiang
    
  • waiqiang
    
  • shuangkaimen
    
  • zimumen
    
  • men
    
  • yimen
    
  • zhediemen
    
  • luodichuang
    
  • chuang
    
  • piaochuang
    
  • uxingchuang
    
  • lxingchuang
    
  • lpiaochuang
    
  • upiaochuang
    
  • liang
    
  • yandao
    
  • zhuzi
    
  • dianti
    
  • loudao
    
  • dange
    
  • yakou
    
  • more read
    
  • mosaic
    
  • 横标CN
    
  • nor
    
  • checkbox
    
  • rotate
    
  • adapt
    
  • recover
    
  • repeal
    
  • reset
    
  • course
    
  • publish
    
  • save
    
  • sel
    
  • mosaic
    
  • media
    
  • pic
    
  • eye_f
    
  • eye_c
    
  • size-o
    
  • size-f
    
  • magnify
    
  • reduce
    
  • video
    
  • uploading_s
    
  • path
    
  • record
    
  • clear
    
  • pause
    
  • preview
    
  • full
    
  • add
    
  • del
    
  • close
    
  • web
    
  • music
    
  • uploading
    
  • state_e
    
  • state_f
    
  • state_s
    
  • vip_uploading
    
  • eye-n
    
  • eye-s
    
  • course
    
  • edit
    
  • help
    
  • rule
    
  • link
    
  • uploading
    
  • vr
    
  • complete
    
  • download
    
  • pull-down
    
  • pull-up
    
  • updown
    
  • scene
    
  • message
    
  • basic
    
  • hotspot
    
  • guide
    
  • wander
    
  • house
    
  • video
    
  • show_3d_normal
    
  • show_plane_normal
    
  • show_roaming_selected
    
  • show_plane_selected
    
  • show_3d_selected
    
  • show_roaming_normal
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • b-indicator
    .icon-b-indicator
  • search
    .icon-search
  • pin
    .icon-pin
  • indicate1
    .icon-indicate1
  • indicate2
    .icon-indicate2
  • indicate3
    .icon-indicate3
  • 4dage_cn
    .icon-a-4dage_cn
  • 4dage_en
    .icon-a-4dage_en
  • mode_vr
    .icon-mode_vr
  • measure_b
    .icon-measure_b
  • sreen_c
    .icon-sreen_c
  • scaleplate_b
    .icon-scaleplate_b
  • menu_m
    .icon-menu_m
  • sreen_o
    .icon-sreen_o
  • music_s
    .icon-music_s
  • photograph_b
    .icon-photograph_b
  • show_3d_s
    .icon-show_3d_s
  • show_plane_n
    .icon-show_plane_n
  • show_3d_n
    .icon-show_3d_n
  • show_plane_s
    .icon-show_plane_s
  • show_roaming_s
    .icon-show_roaming_s
  • show_roaming_n
    .icon-show_roaming_n
  • stand
    .icon-stand
  • swsd__cn
    .icon-swsd__cn
  • swsd__en
    .icon-swsd__en
  • b_pic
    .icon-b_pic
  • b_music
    .icon-b_music
  • b_text
    .icon-b_text
  • b_video
    .icon-b_video
  • b_internet
    .icon-b_internet
  • frame-s
    .icon-frame-s
  • frame-b
    .icon-frame-b
  • frame-w
    .icon-frame-w
  • frame-d
    .icon-frame-d
  • without
    .icon-without
  • copy
    .icon-copy
  • scaleplate
    .icon-scaleplate
  • location
    .icon-location
  • nav-edit
    .icon-nav-edit
  • share
    .icon-share
  • logo-4dage
    .icon-logo-4dage
  • del-s
    .icon-del-s
  • photograph
    .icon-photograph
  • assist
    .icon-assist
  • data_revise_n
    .icon-data_revise_n
  • close_r
    .icon-close_r
  • Bathtub
    .icon-Bathtub
  • BedsideCupboard
    .icon-BedsideCupboard
  • BalconyChair
    .icon-BalconyChair
  • Cupboard
    .icon-Cupboard
  • Desk
    .icon-Desk
  • Closestool
    .icon-Closestool
  • CombinationSofa
    .icon-CombinationSofa
  • DiningTable
    .icon-DiningTable
  • Elevator
    .icon-Elevator
  • Dresser
    .icon-Dresser
  • DoubleBed
    .icon-DoubleBed
  • Carpet
    .icon-Carpet
  • GasStove
    .icon-GasStove
  • TV
    .icon-TV
  • SingleBed
    .icon-SingleBed
  • SingleSofa
    .icon-SingleSofa
  • Wardrobe
    .icon-Wardrobe
  • Washstand
    .icon-Washstand
  • Pillow
    .icon-Pillow
  • TeaTable
    .icon-TeaTable
  • Plant
    .icon-Plant
  • info_agent
    .icon-info_agent
  • scene_lecture
    .icon-scene_lecture
  • 撤销
    .icon-_cancel
  • tagging
    .icon-tagging
  • maps_enlarge
    .icon-maps_enlarge
  • rinfo_address
    .icon-rinfo_address
  • rinfo_avprice
    .icon-rinfo_avprice
  • rinfo_orientation
    .icon-rinfo_orientation
  • rinfo_developers
    .icon-rinfo_developers
  • rinfo_newest
    .icon-rinfo_newest
  • rinfo_earliest
    .icon-rinfo_earliest
  • rinfo_layout
    .icon-rinfo_layout
  • rinfo_price
    .icon-rinfo_price
  • rinfo_area
    .icon-rinfo_area
  • rinfo_agelimit
    .icon-rinfo_agelimit
  • 暂停
    .icon-CombinedShape
  • rinfo_play
    .icon-rinfo_play
  • scene_call
    .icon-scene_call
  • scene_rule_normal
    .icon-scene_rule_normal
  • scene_rule_close
    .icon-scene_rule_close
  • scene_tags_close
    .icon-scene_tags_close
  • scene_tags_normal
    .icon-scene_tags_normal
  • scene_vrlecture
    .icon-scene_vrlecture
  • scene_vrmode
    .icon-scene_vrmode
  • scene_tool
    .icon-scene_tool
  • scene_tool_active
    .icon-scene_tool_active
  • a_position
    .icon-a_position
  • a-scale
    .icon-a-scale
  • model-s
    .icon-model-s
  • video-s
    .icon-video-s
  • chartlet-s
    .icon-chartlet-s
  • filter2
    .icon-filter1
  • monitor-e
    .icon-monitor-e
  • monitor-b
    .icon-monitor-b
  • monitor-s
    .icon-monitor-s
  • monitoring
    .icon-monitoring
  • b-label
    .icon-b-label
  • b-Monitor
    .icon-b-Monitor
  • b-scene
    .icon-b-scene
  • adjust
    .icon-adjust
  • filter
    .icon-filter
  • minimap
    .icon-minimap
  • show_share
    .icon-show_share
  • show_more_ruler
    .icon-show_more_ruler
  • transparency
    .icon-transparency
  • mosaic_e
    .icon-mosaic_e
  • eraser
    .icon-eraser
  • video
    .icon-video2
  • down
    .icon-down
  • 清空
    .icon-qingkong-copy-copy
  • QQ
    .icon-_qq
  • 朋友
    .icon-_friend
  • link
    .icon-link1
  • icon_share_facebook
    .icon-icon_share_facebook
  • icon_share_whatsapp
    .icon-icon_share_whatsapp
  • 微信
    .icon-_wechat
  • watermark
    .icon-watermark
  • camera_h
    .icon-camera_h
  • 1V1
    .icon-a-1V1
  • 横标EN
    .icon-hengbiaoEN
  • hot_spot
    .icon-hot_spot
  • foot
    .icon-foot
  • music-t
    .icon-music-t
  • yes
    .icon-yes
  • no
    .icon-no
  • floor_rename
    .icon-floor_rename
  • play_stop
    .icon-play_stop
  • scene_auto
    .icon-scene_auto
  • compass
    .icon-compass
  • h-d
    .icon-h-d
  • scene_screen
    .icon-scene_screen
  • scene_full
    .icon-scene_full
  • scene_window
    .icon-scene_window
  • 返回
    .icon-_back
  • show_back
    .icon-show_back
  • show_more_share
    .icon-show_more_share
  • show_more_finish
    .icon-show_more_finish
  • show_more_music
    .icon-show_more_music
  • show_map_collect
    .icon-show_map_collect
  • data-j
    .icon-data-j
  • cancel
    .icon-cancel
  • affirm
    .icon-affirm
  • checkbox_p
    .icon-checkbox_p
  • left
    .icon-left
  • right
    .icon-right
  • loading
    .icon-_loading_
  • show_function_collect
    .icon-show_function_collect
  • show_more
    .icon-show_more
  • d-r
    .icon-d-r
  • up-a
    .icon-up-a
  • edit_mirror
    .icon-fanzhuan
  • neiqiang
    .icon-cad-neiqiang
  • waiqiang
    .icon-cad-waiqiang
  • shuangkaimen
    .icon-cad-shuangkaimen
  • zimumen
    .icon-cad-zimumen
  • men
    .icon-cad-men
  • yimen
    .icon-cad-yimen
  • zhediemen
    .icon-cad-zhediemen
  • luodichuang
    .icon-cad-luodichuang
  • chuang
    .icon-cad-chuang
  • piaochuang
    .icon-cad-piaochuang
  • uxingchuang
    .icon-cad-uxingchuang
  • lxingchuang
    .icon-cad-lxingchuang
  • lpiaochuang
    .icon-cad-lpiaochuang
  • upiaochuang
    .icon-cad-upiaochuang
  • liang
    .icon-cad-liang
  • yandao
    .icon-cad-yandao
  • zhuzi
    .icon-cad-zhuzi
  • dianti
    .icon-cad-dianti
  • loudao
    .icon-cad-loudao
  • dange
    .icon-cad-dange
  • yakou
    .icon-cad-yakou
  • more read
    .icon-more
  • mosaic
    .icon-mosaic1
  • 横标CN
    .icon-hengbiaoCN
  • nor
    .icon-nor
  • checkbox
    .icon-checkbox1
  • rotate
    .icon-rotate
  • adapt
    .icon-adapt
  • recover
    .icon-recover
  • repeal
    .icon-repeal
  • reset
    .icon-reset
  • course
    .icon-course1
  • publish
    .icon-publish
  • save
    .icon-save
  • sel
    .icon-checkbox
  • mosaic
    .icon-mosaic
  • media
    .icon-media
  • pic
    .icon-pic
  • eye_f
    .icon-eye_f
  • eye_c
    .icon-eye_c
  • size-o
    .icon-size-o
  • size-f
    .icon-size-f
  • magnify
    .icon-magnify
  • reduce
    .icon-reduce
  • video
    .icon-video1
  • uploading_s
    .icon-uploading_s
  • path
    .icon-path
  • record
    .icon-record
  • clear
    .icon-clear
  • pause
    .icon-pause
  • preview
    .icon-preview
  • full
    .icon-full
  • add
    .icon-add
  • del
    .icon-del
  • close
    .icon-close
  • web
    .icon-web
  • music
    .icon-music
  • uploading
    .icon-uploading1
  • state_e
    .icon-state_e
  • state_f
    .icon-state_f
  • state_s
    .icon-state_s
  • vip_uploading
    .icon-vip_uploading
  • eye-n
    .icon-eye-n
  • eye-s
    .icon-eye-s
  • course
    .icon-course
  • edit
    .icon-edit
  • help
    .icon-help
  • rule
    .icon-rule
  • link
    .icon-link
  • uploading
    .icon-uploading
  • vr
    .icon-vr
  • complete
    .icon-complete
  • download
    .icon-download
  • pull-down
    .icon-pull-down
  • pull-up
    .icon-pull-up
  • updown
    .icon-updown
  • scene
    .icon-scene
  • message
    .icon-message
  • basic
    .icon-basic
  • hotspot
    .icon-hotspot
  • guide
    .icon-guide
  • wander
    .icon-wander
  • house
    .icon-house
  • video
    .icon-video
  • show_3d_normal
    .icon-show_3d_normal
  • show_plane_normal
    .icon-show_plane_normal
  • show_roaming_selected
    .icon-show_roaming_selected
  • show_plane_selected
    .icon-show_plane_selected
  • show_3d_selected
    .icon-show_3d_selected
  • show_roaming_normal
    .icon-show_roaming_normal

font-class 引用


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

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

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

使用步骤如下:

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

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

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

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

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

  • b-indicator
    #icon-b-indicator
  • search
    #icon-search
  • pin
    #icon-pin
  • indicate1
    #icon-indicate1
  • indicate2
    #icon-indicate2
  • indicate3
    #icon-indicate3
  • 4dage_cn
    #icon-a-4dage_cn
  • 4dage_en
    #icon-a-4dage_en
  • mode_vr
    #icon-mode_vr
  • measure_b
    #icon-measure_b
  • sreen_c
    #icon-sreen_c
  • scaleplate_b
    #icon-scaleplate_b
  • menu_m
    #icon-menu_m
  • sreen_o
    #icon-sreen_o
  • music_s
    #icon-music_s
  • photograph_b
    #icon-photograph_b
  • show_3d_s
    #icon-show_3d_s
  • show_plane_n
    #icon-show_plane_n
  • show_3d_n
    #icon-show_3d_n
  • show_plane_s
    #icon-show_plane_s
  • show_roaming_s
    #icon-show_roaming_s
  • show_roaming_n
    #icon-show_roaming_n
  • stand
    #icon-stand
  • swsd__cn
    #icon-swsd__cn
  • swsd__en
    #icon-swsd__en
  • b_pic
    #icon-b_pic
  • b_music
    #icon-b_music
  • b_text
    #icon-b_text
  • b_video
    #icon-b_video
  • b_internet
    #icon-b_internet
  • frame-s
    #icon-frame-s
  • frame-b
    #icon-frame-b
  • frame-w
    #icon-frame-w
  • frame-d
    #icon-frame-d
  • without
    #icon-without
  • copy
    #icon-copy
  • scaleplate
    #icon-scaleplate
  • location
    #icon-location
  • nav-edit
    #icon-nav-edit
  • share
    #icon-share
  • logo-4dage
    #icon-logo-4dage
  • del-s
    #icon-del-s
  • photograph
    #icon-photograph
  • assist
    #icon-assist
  • data_revise_n
    #icon-data_revise_n
  • close_r
    #icon-close_r
  • Bathtub
    #icon-Bathtub
  • BedsideCupboard
    #icon-BedsideCupboard
  • BalconyChair
    #icon-BalconyChair
  • Cupboard
    #icon-Cupboard
  • Desk
    #icon-Desk
  • Closestool
    #icon-Closestool
  • CombinationSofa
    #icon-CombinationSofa
  • DiningTable
    #icon-DiningTable
  • Elevator
    #icon-Elevator
  • Dresser
    #icon-Dresser
  • DoubleBed
    #icon-DoubleBed
  • Carpet
    #icon-Carpet
  • GasStove
    #icon-GasStove
  • TV
    #icon-TV
  • SingleBed
    #icon-SingleBed
  • SingleSofa
    #icon-SingleSofa
  • Wardrobe
    #icon-Wardrobe
  • Washstand
    #icon-Washstand
  • Pillow
    #icon-Pillow
  • TeaTable
    #icon-TeaTable
  • Plant
    #icon-Plant
  • info_agent
    #icon-info_agent
  • scene_lecture
    #icon-scene_lecture
  • 撤销
    #icon-_cancel
  • tagging
    #icon-tagging
  • maps_enlarge
    #icon-maps_enlarge
  • rinfo_address
    #icon-rinfo_address
  • rinfo_avprice
    #icon-rinfo_avprice
  • rinfo_orientation
    #icon-rinfo_orientation
  • rinfo_developers
    #icon-rinfo_developers
  • rinfo_newest
    #icon-rinfo_newest
  • rinfo_earliest
    #icon-rinfo_earliest
  • rinfo_layout
    #icon-rinfo_layout
  • rinfo_price
    #icon-rinfo_price
  • rinfo_area
    #icon-rinfo_area
  • rinfo_agelimit
    #icon-rinfo_agelimit
  • 暂停
    #icon-CombinedShape
  • rinfo_play
    #icon-rinfo_play
  • scene_call
    #icon-scene_call
  • scene_rule_normal
    #icon-scene_rule_normal
  • scene_rule_close
    #icon-scene_rule_close
  • scene_tags_close
    #icon-scene_tags_close
  • scene_tags_normal
    #icon-scene_tags_normal
  • scene_vrlecture
    #icon-scene_vrlecture
  • scene_vrmode
    #icon-scene_vrmode
  • scene_tool
    #icon-scene_tool
  • scene_tool_active
    #icon-scene_tool_active
  • a_position
    #icon-a_position
  • a-scale
    #icon-a-scale
  • model-s
    #icon-model-s
  • video-s
    #icon-video-s
  • chartlet-s
    #icon-chartlet-s
  • filter2
    #icon-filter1
  • monitor-e
    #icon-monitor-e
  • monitor-b
    #icon-monitor-b
  • monitor-s
    #icon-monitor-s
  • monitoring
    #icon-monitoring
  • b-label
    #icon-b-label
  • b-Monitor
    #icon-b-Monitor
  • b-scene
    #icon-b-scene
  • adjust
    #icon-adjust
  • filter
    #icon-filter
  • minimap
    #icon-minimap
  • show_share
    #icon-show_share
  • show_more_ruler
    #icon-show_more_ruler
  • transparency
    #icon-transparency
  • mosaic_e
    #icon-mosaic_e
  • eraser
    #icon-eraser
  • video
    #icon-video2
  • down
    #icon-down
  • 清空
    #icon-qingkong-copy-copy
  • QQ
    #icon-_qq
  • 朋友
    #icon-_friend
  • link
    #icon-link1
  • icon_share_facebook
    #icon-icon_share_facebook
  • icon_share_whatsapp
    #icon-icon_share_whatsapp
  • 微信
    #icon-_wechat
  • watermark
    #icon-watermark
  • camera_h
    #icon-camera_h
  • 1V1
    #icon-a-1V1
  • 横标EN
    #icon-hengbiaoEN
  • hot_spot
    #icon-hot_spot
  • foot
    #icon-foot
  • music-t
    #icon-music-t
  • yes
    #icon-yes
  • no
    #icon-no
  • floor_rename
    #icon-floor_rename
  • play_stop
    #icon-play_stop
  • scene_auto
    #icon-scene_auto
  • compass
    #icon-compass
  • h-d
    #icon-h-d
  • scene_screen
    #icon-scene_screen
  • scene_full
    #icon-scene_full
  • scene_window
    #icon-scene_window
  • 返回
    #icon-_back
  • show_back
    #icon-show_back
  • show_more_share
    #icon-show_more_share
  • show_more_finish
    #icon-show_more_finish
  • show_more_music
    #icon-show_more_music
  • show_map_collect
    #icon-show_map_collect
  • data-j
    #icon-data-j
  • cancel
    #icon-cancel
  • affirm
    #icon-affirm
  • checkbox_p
    #icon-checkbox_p
  • left
    #icon-left
  • right
    #icon-right
  • loading
    #icon-_loading_
  • show_function_collect
    #icon-show_function_collect
  • show_more
    #icon-show_more
  • d-r
    #icon-d-r
  • up-a
    #icon-up-a
  • edit_mirror
    #icon-fanzhuan
  • neiqiang
    #icon-cad-neiqiang
  • waiqiang
    #icon-cad-waiqiang
  • shuangkaimen
    #icon-cad-shuangkaimen
  • zimumen
    #icon-cad-zimumen
  • men
    #icon-cad-men
  • yimen
    #icon-cad-yimen
  • zhediemen
    #icon-cad-zhediemen
  • luodichuang
    #icon-cad-luodichuang
  • chuang
    #icon-cad-chuang
  • piaochuang
    #icon-cad-piaochuang
  • uxingchuang
    #icon-cad-uxingchuang
  • lxingchuang
    #icon-cad-lxingchuang
  • lpiaochuang
    #icon-cad-lpiaochuang
  • upiaochuang
    #icon-cad-upiaochuang
  • liang
    #icon-cad-liang
  • yandao
    #icon-cad-yandao
  • zhuzi
    #icon-cad-zhuzi
  • dianti
    #icon-cad-dianti
  • loudao
    #icon-cad-loudao
  • dange
    #icon-cad-dange
  • yakou
    #icon-cad-yakou
  • more read
    #icon-more
  • mosaic
    #icon-mosaic1
  • 横标CN
    #icon-hengbiaoCN
  • nor
    #icon-nor
  • checkbox
    #icon-checkbox1
  • rotate
    #icon-rotate
  • adapt
    #icon-adapt
  • recover
    #icon-recover
  • repeal
    #icon-repeal
  • reset
    #icon-reset
  • course
    #icon-course1
  • publish
    #icon-publish
  • save
    #icon-save
  • sel
    #icon-checkbox
  • mosaic
    #icon-mosaic
  • media
    #icon-media
  • pic
    #icon-pic
  • eye_f
    #icon-eye_f
  • eye_c
    #icon-eye_c
  • size-o
    #icon-size-o
  • size-f
    #icon-size-f
  • magnify
    #icon-magnify
  • reduce
    #icon-reduce
  • video
    #icon-video1
  • uploading_s
    #icon-uploading_s
  • path
    #icon-path
  • record
    #icon-record
  • clear
    #icon-clear
  • pause
    #icon-pause
  • preview
    #icon-preview
  • full
    #icon-full
  • add
    #icon-add
  • del
    #icon-del
  • close
    #icon-close
  • web
    #icon-web
  • music
    #icon-music
  • uploading
    #icon-uploading1
  • state_e
    #icon-state_e
  • state_f
    #icon-state_f
  • state_s
    #icon-state_s
  • vip_uploading
    #icon-vip_uploading
  • eye-n
    #icon-eye-n
  • eye-s
    #icon-eye-s
  • course
    #icon-course
  • edit
    #icon-edit
  • help
    #icon-help
  • rule
    #icon-rule
  • link
    #icon-link
  • uploading
    #icon-uploading
  • vr
    #icon-vr
  • complete
    #icon-complete
  • download
    #icon-download
  • pull-down
    #icon-pull-down
  • pull-up
    #icon-pull-up
  • updown
    #icon-updown
  • scene
    #icon-scene
  • message
    #icon-message
  • basic
    #icon-basic
  • hotspot
    #icon-hotspot
  • guide
    #icon-guide
  • wander
    #icon-wander
  • house
    #icon-house
  • video
    #icon-video
  • show_3d_normal
    #icon-show_3d_normal
  • show_plane_normal
    #icon-show_plane_normal
  • show_roaming_selected
    #icon-show_roaming_selected
  • show_plane_selected
    #icon-show_plane_selected
  • show_3d_selected
    #icon-show_3d_selected
  • show_roaming_normal
    #icon-show_roaming_normal

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>