#

- 
  top
  &#xe6f3;
- 
  editor_play
  &#xe6ef;
- 
  editor_3d
  &#xe6f0;
- 
  editor_update
  &#xe6f1;
- 
  editor_list_delete
  &#xe6f2;
- 
  material_panoramic_picture
  &#xe6e8;
- 
  material_preview_upload
  &#xe6e9;
- 
  toast_yellow
  &#xe6ea;
- 
  works_search
  &#xe6eb;
- 
  works_share
  &#xe6ec;
- 
  works_look
  &#xe6ed;
- 
  works_delete
  &#xe6ee;
- 
  editor_folder_off
  &#xe6c5;
- 
  editor_folder_on
  &#xe6c6;
- 
  editor_add
  &#xe6c7;
- 
  editor_hot_add
  &#xe6c8;
- 
  editor_off
  &#xe6c9;
- 
  editor_list_add
  &#xe6ca;
- 
  editor_on
  &#xe6cb;
- 
  editor_playback
  &#xe6cc;
- 
  editor_list_edit
  &#xe6cd;
- 
  material_image
  &#xe6ce;
- 
  material_music
  &#xe6cf;
- 
  editor_panoramic
  &#xe6d0;
- 
  editor_list_image
  &#xe6d1;
- 
  material_preview_drop_out
  &#xe6d2;
- 
  editor_preview
  &#xe6d3;
- 
  editor_search
  &#xe6d4;
- 
  material_operation_delete
  &#xe6d5;
- 
  material_operation_editor
  &#xe6d6;
- 
  editor_return
  &#xe6d7;
- 
  material_preview_full_screen
  &#xe6d8;
- 
  material_preview_enlarge
  &#xe6d9;
- 
  editor_save
  &#xe6da;
- 
  material_preview_next1
  &#xe6db;
- 
  material_preview_next
  &#xe6dc;
- 
  material_preview_narrow
  &#xe6dd;
- 
  material_preview_previous
  &#xe6de;
- 
  material_operation_image
  &#xe6df;
- 
  material_video
  &#xe6e0;
- 
  material_preview_upload_collect
  &#xe6e1;
- 
  pop-ups_shut-down
  &#xe6e2;
- 
  toast_green
  &#xe6e3;
- 
  toast_red
  &#xe6e4;
- 
  works_editor
  &#xe6e5;
- 
  pop-ups_crop
  &#xe6e6;
- 
  material_prompt
  &#xe6e7;
- 
  bs_close
  &#xe74c;
- 
  bs_folder
  &#xe74d;
- 
  bs_list_menu
  &#xe74e;
- 
  bs_list_edit
  &#xe74f;
- 
  bs_list_info
  &#xe750;
- 
  bs_list_play
  &#xe751;
- 
  bs_list_stop
  &#xe752;
- 
  bs_plus
  &#xe753;
- 
  bs_reduce
  &#xe754;
- 
  bs_next
  &#xe755;
- 
  bs_nav_panorama
  &#xe756;
- 
  bs_upload
  &#xe757;
- 
  bs_search
  &#xe758;
- 
  bs_nav_photo
  &#xe759;
- 
  bs_nav_video
  &#xe75a;
- 
  edit_add
  &#xe75b;
- 
  bs_nav_sound
  &#xe75c;
- 
  edit_input_arrow
  &#xe75d;
- 
  edit_close
  &#xe75e;
- 
  edit_case_delete
  &#xe75f;
- 
  bs_share
  &#xe760;
- 
  edit_input_unvisible
  &#xe761;
- 
  edit_input_visible
  &#xe762;
- 
  edit_list_more
  &#xe763;
- 
  edit_list_default
  &#xe764;
- 
  edit_nav_hotpoint
  &#xe765;
- 
  edit_nav_base
  &#xe766;
- 
  edit_next
  &#xe767;
- 
  edit_jumpsview
  &#xe768;
- 
  edit_pre
  &#xe769;
- 
  edit_linkview
  &#xe76a;
- 
  edit_select
  &#xe76b;
- 
  edit_nav_scenenav
  &#xe76c;
- 
  edit_soundview
  &#xe76d;
- 
  edit_photoview
  &#xe76e;
- 
  edit_search
  &#xe76f;
- 
  edit_textview
  &#xe770;
- 
  edit_nav_screen
  &#xe771;
- 
  edit_type_3d
  &#xe772;
- 
  edit_top_save
  &#xe773;
- 
  edit_type_panorama
  &#xe774;
- 
  edit_top_view
  &#xe775;
- 
  edit_videoview
  &#xe776;
- 
  list_views
  &#xe777;
- 
  nav_scene_down
  &#xe778;
- 
  tool_about
  &#xe779;
- 
  nav_scene_up
  &#xe77a;
- 
  tool_vr
  &#xe77b;
- 
  tool_window
  &#xe77c;
- 
  tool_full
  &#xe77d;
- 
  img_logo
  &#xe77e;
- 
  list_cover
  &#xe77f;
- 
  list_delete
  &#xe780;
- 
  bs_stop
  &#xe781;
- 
  bs_play
  &#xe782;
- 
  bs_list_circle
  &#xe783;
- 
  show_playback
  &#xe681;
- 
  show_suspension
  &#xe683;
- 
  show_3d_normal
  &#xe677;
- 
  show_plane_normal
  &#xe67d;
- 
  show_roaming_selected
  &#xe682;
- 
  show_plane_selected
  &#xe684;
- 
  show_3d_selected
  &#xe685;
- 
  show_roaming_normal
  &#xe686;
- 
  show_function_collect
  &#xe687;
- 
  show_drop-down
  &#xe673;

## Unicode 引用

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

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

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

Unicode 使用步骤如下：

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

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

- top
  .icon-top
- editor_play
  .icon-editor_play
- editor_3d
  .icon-editor_3d
- editor_update
  .icon-editor_update
- editor_list_delete
  .icon-editor_list_delete
- material_panoramic_picture
  .icon-material_panoramic_picture
- material_preview_upload
  .icon-material_preview_upload
- toast_yellow
  .icon-toast_yellow
- works_search
  .icon-works_search
- works_share
  .icon-works_share
- works_look
  .icon-works_look
- works_delete
  .icon-works_delete
- editor_folder_off
  .icon-editor_folder_off
- editor_folder_on
  .icon-editor_folder_on
- editor_add
  .icon-editor_add
- editor_hot_add
  .icon-editor_hot_add
- editor_off
  .icon-editor_off
- editor_list_add
  .icon-editor_list_add
- editor_on
  .icon-editor_on
- editor_playback
  .icon-editor_playback
- editor_list_edit
  .icon-editor_list_edit
- material_image
  .icon-material_image
- material_music
  .icon-material_music
- editor_panoramic
  .icon-editor_panoramic
- editor_list_image
  .icon-editor_list_image
- material_preview_drop_out
  .icon-material_preview_drop_out
- editor_preview
  .icon-editor_preview
- editor_search
  .icon-editor_search
- material_operation_delete
  .icon-material_operation_delete
- material_operation_editor
  .icon-material_operation_editor
- editor_return
  .icon-editor_return
- material_preview_full_screen
  .icon-material_preview_full_screen
- material_preview_enlarge
  .icon-material_preview_enlarge
- editor_save
  .icon-editor_save
- material_preview_next1
  .icon-material_preview_next1
- material_preview_next
  .icon-material_preview_next
- material_preview_narrow
  .icon-material_preview_narrow
- material_preview_previous
  .icon-material_preview_previous
- material_operation_image
  .icon-material_operation_image
- material_video
  .icon-material_video
- material_preview_upload_collect
  .icon-material_preview_upload_collect
- pop-ups_shut-down
  .icon-pop-ups_shut-down
- toast_green
  .icon-toast_green
- toast_red
  .icon-toast_red
- works_editor
  .icon-works_editor
- pop-ups_crop
  .icon-pop-ups_crop
- material_prompt
  .icon-material_prompt
- bs_close
  .icon-bs_close
- bs_folder
  .icon-bs_folder
- bs_list_menu
  .icon-bs_list_menu
- bs_list_edit
  .icon-bs_list_edit
- bs_list_info
  .icon-bs_list_info
- bs_list_play
  .icon-bs_list_play
- bs_list_stop
  .icon-bs_list_stop
- bs_plus
  .icon-bs_plus
- bs_reduce
  .icon-bs_reduce
- bs_next
  .icon-bs_next
- bs_nav_panorama
  .icon-bs_nav_panorama
- bs_upload
  .icon-bs_upload
- bs_search
  .icon-bs_search
- bs_nav_photo
  .icon-bs_nav_photo
- bs_nav_video
  .icon-bs_nav_video
- edit_add
  .icon-edit_add
- bs_nav_sound
  .icon-bs_nav_sound
- edit_input_arrow
  .icon-edit_input_arrow
- edit_close
  .icon-edit_close
- edit_case_delete
  .icon-edit_case_delete
- bs_share
  .icon-bs_share
- edit_input_unvisible
  .icon-edit_input_unvisible
- edit_input_visible
  .icon-edit_input_visible
- edit_list_more
  .icon-edit_list_more
- edit_list_default
  .icon-edit_list_default
- edit_nav_hotpoint
  .icon-edit_nav_hotpoint
- edit_nav_base
  .icon-edit_nav_base
- edit_next
  .icon-edit_next
- edit_jumpsview
  .icon-edit_jumpsview
- edit_pre
  .icon-edit_pre
- edit_linkview
  .icon-edit_linkview
- edit_select
  .icon-edit_select
- edit_nav_scenenav
  .icon-edit_nav_scenenav
- edit_soundview
  .icon-edit_soundview
- edit_photoview
  .icon-edit_photoview
- edit_search
  .icon-edit_search
- edit_textview
  .icon-edit_textview
- edit_nav_screen
  .icon-edit_nav_screen
- edit_type_3d
  .icon-edit_type_3d
- edit_top_save
  .icon-edit_top_save
- edit_type_panorama
  .icon-edit_type_panorama
- edit_top_view
  .icon-edit_top_view
- edit_videoview
  .icon-edit_videoview
- list_views
  .icon-list_views
- nav_scene_down
  .icon-nav_scene_down
- tool_about
  .icon-tool_about
- nav_scene_up
  .icon-nav_scene_up
- tool_vr
  .icon-tool_vr
- tool_window
  .icon-tool_window
- tool_full
  .icon-tool_full
- img_logo
  .icon-img_logo
- list_cover
  .icon-bs_list_cover
- list_delete
  .icon-list_delete
- bs_stop
  .icon-bs_stop
- bs_play
  .icon-bs_play
- bs_list_circle
  .icon-bs_list_circle
- show_playback
  .icon-show_playback
- show_suspension
  .icon-show_suspension
- 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
- show_function_collect
  .icon-show_function_collect
- show_drop-down
  .icon-show_drop-down

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

- top
  #icon-top
- editor_play
  #icon-editor_play
- editor_3d
  #icon-editor_3d
- editor_update
  #icon-editor_update
- editor_list_delete
  #icon-editor_list_delete
- material_panoramic_picture
  #icon-material_panoramic_picture
- material_preview_upload
  #icon-material_preview_upload
- toast_yellow
  #icon-toast_yellow
- works_search
  #icon-works_search
- works_share
  #icon-works_share
- works_look
  #icon-works_look
- works_delete
  #icon-works_delete
- editor_folder_off
  #icon-editor_folder_off
- editor_folder_on
  #icon-editor_folder_on
- editor_add
  #icon-editor_add
- editor_hot_add
  #icon-editor_hot_add
- editor_off
  #icon-editor_off
- editor_list_add
  #icon-editor_list_add
- editor_on
  #icon-editor_on
- editor_playback
  #icon-editor_playback
- editor_list_edit
  #icon-editor_list_edit
- material_image
  #icon-material_image
- material_music
  #icon-material_music
- editor_panoramic
  #icon-editor_panoramic
- editor_list_image
  #icon-editor_list_image
- material_preview_drop_out
  #icon-material_preview_drop_out
- editor_preview
  #icon-editor_preview
- editor_search
  #icon-editor_search
- material_operation_delete
  #icon-material_operation_delete
- material_operation_editor
  #icon-material_operation_editor
- editor_return
  #icon-editor_return
- material_preview_full_screen
  #icon-material_preview_full_screen
- material_preview_enlarge
  #icon-material_preview_enlarge
- editor_save
  #icon-editor_save
- material_preview_next1
  #icon-material_preview_next1
- material_preview_next
  #icon-material_preview_next
- material_preview_narrow
  #icon-material_preview_narrow
- material_preview_previous
  #icon-material_preview_previous
- material_operation_image
  #icon-material_operation_image
- material_video
  #icon-material_video
- material_preview_upload_collect
  #icon-material_preview_upload_collect
- pop-ups_shut-down
  #icon-pop-ups_shut-down
- toast_green
  #icon-toast_green
- toast_red
  #icon-toast_red
- works_editor
  #icon-works_editor
- pop-ups_crop
  #icon-pop-ups_crop
- material_prompt
  #icon-material_prompt
- bs_close
  #icon-bs_close
- bs_folder
  #icon-bs_folder
- bs_list_menu
  #icon-bs_list_menu
- bs_list_edit
  #icon-bs_list_edit
- bs_list_info
  #icon-bs_list_info
- bs_list_play
  #icon-bs_list_play
- bs_list_stop
  #icon-bs_list_stop
- bs_plus
  #icon-bs_plus
- bs_reduce
  #icon-bs_reduce
- bs_next
  #icon-bs_next
- bs_nav_panorama
  #icon-bs_nav_panorama
- bs_upload
  #icon-bs_upload
- bs_search
  #icon-bs_search
- bs_nav_photo
  #icon-bs_nav_photo
- bs_nav_video
  #icon-bs_nav_video
- edit_add
  #icon-edit_add
- bs_nav_sound
  #icon-bs_nav_sound
- edit_input_arrow
  #icon-edit_input_arrow
- edit_close
  #icon-edit_close
- edit_case_delete
  #icon-edit_case_delete
- bs_share
  #icon-bs_share
- edit_input_unvisible
  #icon-edit_input_unvisible
- edit_input_visible
  #icon-edit_input_visible
- edit_list_more
  #icon-edit_list_more
- edit_list_default
  #icon-edit_list_default
- edit_nav_hotpoint
  #icon-edit_nav_hotpoint
- edit_nav_base
  #icon-edit_nav_base
- edit_next
  #icon-edit_next
- edit_jumpsview
  #icon-edit_jumpsview
- edit_pre
  #icon-edit_pre
- edit_linkview
  #icon-edit_linkview
- edit_select
  #icon-edit_select
- edit_nav_scenenav
  #icon-edit_nav_scenenav
- edit_soundview
  #icon-edit_soundview
- edit_photoview
  #icon-edit_photoview
- edit_search
  #icon-edit_search
- edit_textview
  #icon-edit_textview
- edit_nav_screen
  #icon-edit_nav_screen
- edit_type_3d
  #icon-edit_type_3d
- edit_top_save
  #icon-edit_top_save
- edit_type_panorama
  #icon-edit_type_panorama
- edit_top_view
  #icon-edit_top_view
- edit_videoview
  #icon-edit_videoview
- list_views
  #icon-list_views
- nav_scene_down
  #icon-nav_scene_down
- tool_about
  #icon-tool_about
- nav_scene_up
  #icon-nav_scene_up
- tool_vr
  #icon-tool_vr
- tool_window
  #icon-tool_window
- tool_full
  #icon-tool_full
- img_logo
  #icon-img_logo
- list_cover
  #icon-bs_list_cover
- list_delete
  #icon-list_delete
- bs_stop
  #icon-bs_stop
- bs_play
  #icon-bs_play
- bs_list_circle
  #icon-bs_list_circle
- show_playback
  #icon-show_playback
- show_suspension
  #icon-show_suspension
- 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
- show_function_collect
  #icon-show_function_collect
- show_drop-down
  #icon-show_drop-down

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