• 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=1659061669448') format('woff2'),
       url('iconfont.woff?t=1659061669448') format('woff'),
       url('iconfont.ttf?t=1659061669448') 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"。

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

  • 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>