• common_toolbar_subscribe
    
  • common_toolbar_unsubscribe
    
  • common_toolbar_e57
    
  • common_toolbar_calculating
    
  • home_value_added_mini_program
    
  • home_value_added_panorama
    
  • home_value_added_download
    
  • common_input_clear
    
  • common_dialog_cancel
    
  • common_dialog_close
    
  • common_dialog_delete_02
    
  • common_dialog_info
    
  • common_dialog_file_dropdown
    
  • common_dialog_indeterminate_checkbox
    
  • common_dialog_delete
    
  • common_dialog_done
    
  • common_dialog_select
    
  • common_toolbar_arrow
    
  • common_input_search
    
  • common_dialog_checked_box
    
  • common_toolbar_cancel
    
  • common_input_search_dropdown
    
  • common_toolbar_edit
    
  • common_dialog_rename
    
  • common_sidebar_chevron_down
    
  • common_toolbar_delete
    
  • common_toolbar_authorize
    
  • common_toolbar_bind
    
  • common_toolbar_more_obj
    
  • common_sidebar_legacy
    
  • common_toolbar_more_copy
    
  • common_toolbar_more
    
  • common_toolbar_model_download
    
  • common_toolbar_collaboration
    
  • common_toolbar_details
    
  • store_benefit_download
    
  • common_toolbar_move
    
  • common_toolbar_more_more
    
  • common_toolbar_invoice
    
  • store_benefit_panorama
    
  • common_toolbar_unbind
    
  • store_benefit_ai
    
  • common_toolbar_generate_model
    
  • common_toolbar_release
    
  • common_toolbar_more_download
    
  • common_toolbar_more_guided_viewing
    
  • home_value_added_ai
    
  • settings_add
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot?t=1783048688594'); /* IE9 */
  src: url('iconfont.eot?t=1783048688594#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1783048688594') format('woff'),
       url('iconfont.ttf?t=1783048688594') format('truetype'),
       url('iconfont.svg?t=1783048688594#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"。

  • common_toolbar_subscribe
    .icon-common_toolbar_subscribe
  • common_toolbar_unsubscribe
    .icon-common_toolbar_unsubscribe
  • common_toolbar_e57
    .icon-common_toolbar_e57
  • common_toolbar_calculating
    .icon-common_toolbar_calculating
  • home_value_added_mini_program
    .icon-home_value_added_mini_program
  • home_value_added_panorama
    .icon-home_value_added_panorama
  • home_value_added_download
    .icon-home_value_added_download
  • common_input_clear
    .icon-common_input_clear
  • common_dialog_cancel
    .icon-common_dialog_cancel
  • common_dialog_close
    .icon-common_dialog_close
  • common_dialog_delete_02
    .icon-common_dialog_delete_02
  • common_dialog_info
    .icon-common_dialog_info
  • common_dialog_file_dropdown
    .icon-common_dialog_file_dropdown
  • common_dialog_indeterminate_checkbox
    .icon-common_dialog_indeterminate_checkbox
  • common_dialog_delete
    .icon-common_dialog_delete
  • common_dialog_done
    .icon-common_dialog_done
  • common_dialog_select
    .icon-common_dialog_select
  • common_toolbar_arrow
    .icon-common_toolbar_arrow
  • common_input_search
    .icon-common_input_search
  • common_dialog_checked_box
    .icon-common_dialog_checked_box
  • common_toolbar_cancel
    .icon-common_toolbar_cancel
  • common_input_search_dropdown
    .icon-common_input_search_dropdown
  • common_toolbar_edit
    .icon-common_toolbar_edit
  • common_dialog_rename
    .icon-common_dialog_rename
  • common_sidebar_chevron_down
    .icon-common_sidebar_chevron_down
  • common_toolbar_delete
    .icon-common_toolbar_delete
  • common_toolbar_authorize
    .icon-common_toolbar_authorize
  • common_toolbar_bind
    .icon-common_toolbar_bind
  • common_toolbar_more_obj
    .icon-common_toolbar_more_obj
  • common_sidebar_legacy
    .icon-common_sidebar_legacy
  • common_toolbar_more_copy
    .icon-common_toolbar_more_copy
  • common_toolbar_more
    .icon-common_toolbar_more
  • common_toolbar_model_download
    .icon-common_toolbar_model_download
  • common_toolbar_collaboration
    .icon-common_toolbar_collaboration
  • common_toolbar_details
    .icon-common_toolbar_details
  • store_benefit_download
    .icon-store_benefit_download
  • common_toolbar_move
    .icon-common_toolbar_move
  • common_toolbar_more_more
    .icon-common_toolbar_more_more
  • common_toolbar_invoice
    .icon-common_toolbar_invoice
  • store_benefit_panorama
    .icon-store_benefit_panorama
  • common_toolbar_unbind
    .icon-common_toolbar_unbind
  • store_benefit_ai
    .icon-store_benefit_ai
  • common_toolbar_generate_model
    .icon-common_toolbar_generate_model
  • common_toolbar_release
    .icon-common_toolbar_release
  • common_toolbar_more_download
    .icon-common_toolbar_more_download
  • common_toolbar_more_guided_viewing
    .icon-common_toolbar_more_guided_viewing
  • home_value_added_ai
    .icon-home_value_added_ai
  • settings_add
    .icon-settings_add

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

  • common_toolbar_subscribe
    #icon-common_toolbar_subscribe
  • common_toolbar_unsubscribe
    #icon-common_toolbar_unsubscribe
  • common_toolbar_e57
    #icon-common_toolbar_e57
  • common_toolbar_calculating
    #icon-common_toolbar_calculating
  • home_value_added_mini_program
    #icon-home_value_added_mini_program
  • home_value_added_panorama
    #icon-home_value_added_panorama
  • home_value_added_download
    #icon-home_value_added_download
  • common_input_clear
    #icon-common_input_clear
  • common_dialog_cancel
    #icon-common_dialog_cancel
  • common_dialog_close
    #icon-common_dialog_close
  • common_dialog_delete_02
    #icon-common_dialog_delete_02
  • common_dialog_info
    #icon-common_dialog_info
  • common_dialog_file_dropdown
    #icon-common_dialog_file_dropdown
  • common_dialog_indeterminate_checkbox
    #icon-common_dialog_indeterminate_checkbox
  • common_dialog_delete
    #icon-common_dialog_delete
  • common_dialog_done
    #icon-common_dialog_done
  • common_dialog_select
    #icon-common_dialog_select
  • common_toolbar_arrow
    #icon-common_toolbar_arrow
  • common_input_search
    #icon-common_input_search
  • common_dialog_checked_box
    #icon-common_dialog_checked_box
  • common_toolbar_cancel
    #icon-common_toolbar_cancel
  • common_input_search_dropdown
    #icon-common_input_search_dropdown
  • common_toolbar_edit
    #icon-common_toolbar_edit
  • common_dialog_rename
    #icon-common_dialog_rename
  • common_sidebar_chevron_down
    #icon-common_sidebar_chevron_down
  • common_toolbar_delete
    #icon-common_toolbar_delete
  • common_toolbar_authorize
    #icon-common_toolbar_authorize
  • common_toolbar_bind
    #icon-common_toolbar_bind
  • common_toolbar_more_obj
    #icon-common_toolbar_more_obj
  • common_sidebar_legacy
    #icon-common_sidebar_legacy
  • common_toolbar_more_copy
    #icon-common_toolbar_more_copy
  • common_toolbar_more
    #icon-common_toolbar_more
  • common_toolbar_model_download
    #icon-common_toolbar_model_download
  • common_toolbar_collaboration
    #icon-common_toolbar_collaboration
  • common_toolbar_details
    #icon-common_toolbar_details
  • store_benefit_download
    #icon-store_benefit_download
  • common_toolbar_move
    #icon-common_toolbar_move
  • common_toolbar_more_more
    #icon-common_toolbar_more_more
  • common_toolbar_invoice
    #icon-common_toolbar_invoice
  • store_benefit_panorama
    #icon-store_benefit_panorama
  • common_toolbar_unbind
    #icon-common_toolbar_unbind
  • store_benefit_ai
    #icon-store_benefit_ai
  • common_toolbar_generate_model
    #icon-common_toolbar_generate_model
  • common_toolbar_release
    #icon-common_toolbar_release
  • common_toolbar_more_download
    #icon-common_toolbar_more_download
  • common_toolbar_more_guided_viewing
    #icon-common_toolbar_more_guided_viewing
  • home_value_added_ai
    #icon-home_value_added_ai
  • settings_add
    #icon-settings_add

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>