• login_icon_visible@2x
    
  • title_telephone_alarm_dis@2x
    
  • navigation_icn_set_nor@2x
    
  • title_telephone_alarm_sel@2x
    
  • select@2x
    
  • unread@2x
    
  • organize_icon_down@2x
    
  • icn_home_head_search_nor_@2x
    
  • organize_icon_up@2x
    
  • icn_search@2x
    
  • unselect@2x
    
  • icn_home_head_filtrate_nor_@2x
    
  • icn_home_head_add_nor_@2x
    
  • icon_list_next_saas@2x
    
  • bar_new
    
  • icn_bumenrenyuan@2x
    
  • bar_found
    
  • icn_hangyezhibo@2x
    
  • bar_live
    
  • icn_kaoqindaka@2x
    
  • bar_camera
    
  • icn_new_member@2x
    
  • bar_my
    
  • icn_shangwuzhibo@2x
    
  • icn_my_equipment@2x
    
  • icn_shuzihuiwu@2x
    
  • icn_more_nor@2x
    
  • icn_shipinjiankong@2x
    
  • icn_my_Photo_album@2x
    
  • icn_system_message@2x
    
  • icn_organize_default@2x
    
  • icn_triangle_down_1_nor@2x
    
  • list_lsetting_nor@2x
    
  • icn_triangle_up_1_nor@2x
    
  • navigation_icn_close_nor@2x
    
  • icn_zailigang@2x
    
  • navigation_icn_back_nor@2x
    
  • navigation_icn_back_nor@2x
    
  • icn_my_software_infor@2x
    
  • icn_yunshipinhuiyi@2x
    
  • home_video_error_encryption@2x
    
  • navigation_icn_close_nor@2x
    
  • home_video_error_offline@2x
    
  • navigation_icn_back_white_nor@2x
    
  • icn_close_search_bg@2x
    
  • navigation_icn_close_white_nor@2x
    
  • unuse@2x
    
  • organize_icon_down@2x
    
  • navigation_icn_edit_nor@2x
    
  • search_icon@2x
    
  • bar_my@2x
    
  • organize_icon_up@2x
    
  • bar_zhineng@2x
    
  • icn_system_message@2x
    
  • bar_tongxunlu_sel@2x
    
  • icn_back_bottom_nor@2x
    
  • bar_gongzuotai@2x
    
  • icn_add_bottom_nor@2x
    
  • icn_edit_1_nor@2x
    
  • icn_edit_bottom_nor@2x
    
  • icn_my_about@2x
    
  • icn_push_new_default_18x18@2x
    
  • icn_my_renzheng@2x
    
  • icn_new_member@2x
    
  • icn_my_company@2x
    
  • icn_system_message@2x
    
  • icn_pc@2x
    
  • icn_security
    
  • navigation_icn_new_nor@2x
    
  • icon_cloud_normal
    
  • navigation_icn_sao_nor@2x
    
  • icn_star_02@2x
    
  • icn_momen@2x
    
  • icn_star_01@2x
    
  • icn_man@2x
    
  • icn_star_03@2x
    
  • icn_fanhui@2x
    
  • icn_zan@2x
    
  • icn_tianjia@2x
    
  • icn_setting_gongzuotai@2x
    
  • icn_bianji@2x
    
  • icn_function_menu@2x
    
  • img_default_avatar@2x
    
  • icn_rubber_nor@2x
    
  • icn_camera@2x
    
  • icn_clean_nor@2x
    
  • inc_home_jihuo@2x
    
  • icn_add_temperature_setting@2x
    
  • bar_my@2x
    
  • icn_add_zhineng@2x
    
  • bar_tongxunlu@2x
    
  • icn_air_conditioning_group_1@2x
    
  • bar_zhineng@2x
    
  • icn_subtract_temperature_setting@2x
    
  • navigation_icn_new_nor@2x
    
  • icn_light_group_1@2x
    
  • bar_zhineng_sel@2x
    
  • icn_wwitch_group_nor@2x
    
  • bar_my_sel@2x
    
  • icn_edit_zhineng@2x
    
  • bar_tongxunlu_sel@2x
    
  • icn_delete_zhineng@2x
    
  • bar_gongzuotai@2x
    
  • icn_socket_group_1@2x
    
  • bar_gongzuotai_sel@2x
    
  • icn_detail_timing@2x
    
  • icn_people_my_company@2x
    
  • icn_curtain_group_1@2x
    
  • icn_phone_my_company@2x
    
  • icn_light_group_2@2x
    
  • icn_address_my_company@2x
    
  • icn_light_group_1@2x
    
  • icn_edit_my_company@2x
    
  • icn_more@2x
    
  • icn_introduce_my_company@2x
    
  • icn_wwitch_p2_44_nor@2x
    
  • icn_url_my_company@2x
    
  • icn_shangban@2x
    
  • icn_type_my_company@2x
    
  • icn_fresh_air_nor@2x
    
  • icn_set_my_company@2x
    
  • icn_xiaban@2x
    
  • total
    
  • icn_xiuxi@2x
    
  • add_conference
    
  • icn_guanchuanglian@2x
    
  • creat_conference
    
  • icn_kaichuanglian@2x
    
  • clock_off
    
  • icn_my_company@2x
    
  • clocked
    
  • icn_add_bottom_nor@2x
    
  • PC
    
  • icn_edit_bottom_nor@2x
    
  • ipone
    
  • icn_back_bottom_nor@2x
    
  • guanli_detail
    
  • icn_tips_40x40@2x
    
  • gateway_wrong
    
  • icn_gongdan@2x
    
  • micro_thumbnail
    
  • icn_picture@2x
    
  • assem
    
  • icn_account@2x
    
  • microphone-black
    
  • icn_work_box@2x
    
  • camera-black
    
  • icn_daiban@2x
    
  • trump
    
  • icn_shequ@2x
    
  • camera-off
    
  • icn_link@2x
    
  • trump_off
    
  • icn_browser@2x
    
  • micro-off
    
  • icn_store@2x
    
  • micro_thumbnail_off
    
  • bar_gongzuotai@2x
    
  • nocamera_thumbnail
    
  • bar_shebei@2x
    
  • switch_camera
    
  • bar_shebei_sel@2x
    
  • icn_yunshipinhuiyi@1x
    
  • bar_gongzuotai_sel@2x
    
  • icn_bumen
    
  • icn_bumenrenyuan
    
  • icn_close_dialog_box@2x
    
  • bar_zhineng@2x
    
  • bar_zhineng_sel@2x
    
  • icn_my_setting@2x
    
  • switch_open_1@2x
    
  • icn_delete_01@2x
    
  • icn_app_store@2x
    
  • icn_shuzi_my_company@2x
    
  • icn_add_gongzuotai@2x
    
  • 云储存 - 暂停
    
  • 云储存 - 正常
    
  • navigation_icn_share_nor@2x
    
  • icn_app_store@2x
    
  • icn_weixin@2x
    
  • icn_how_to_buy@2x
    
  • icn_app_details@2x
    
  • icn_more_01@2x
    
  • icn_close_01@2x
    
  • icn_new_company@2x
    
  • icn_system_message@2x
    
  • icn_new_member@2x
    
  • icn_system_company@2x
    
  • icn_add_department@2x
    
  • icn_chengyuan_shenhe@2x
    
  • icn_app_store@2x
    
  • icn_album@2x
    
  • icn_edit_add_members@2x
    
  • icn_download_address@2x
    
  • icn_flashlight_off@2x
    
  • icn_default_company_1@2x
    
  • icn_erweima_add_members@2x
    
  • icn_phone_add_members@2x
    
  • icn_renzheng_02@2x
    
  • icn_edit_sao@2x
    
  • icn_flashlight_on@2x
    
  • icn_pengyouquan_address@2x
    
  • icn_weixin_address@2x
    
  • icn_setting_gongzuotai@2x
    
  • icn_weixin_add_members@2x
    
  • icn_qq_address@2x
    
  • icn_add_members@2x
    
  • icn_department_address_04@2x
    
  • icn_department_address_03@2x
    
  • icn_head_porlrait@2x
    
  • icn_home_head_search_nor_@2x
    
  • bar_my@2x
    
  • bar_camera@2x
    
  • icn_setting@2x
    
  • bar_new@2x
    
  • icn_add_desktop@2x
    
  • icn_my_feedback@2x
    
  • navigation_icn_my_nor
    
  • icn_small@2x
    
  • icn_big@2x
    
  • icn_error
    
  • icn_failure
    
  • icn_succeed
    
  • 问号
    
  • icn_error
    
  • bar_default
    
  • bar_address_book
    
  • bar_my
    
  • bar_workbench_sel
    
  • bar_smart
    
  • icn_zidingyi@2x
    
  • icn_yingyongguanli@2x
    
  • but_app_store
    
  • bar_my@2x
    
  • icn_close@2x
    
  • bar_tongxunlu@2x
    
  • icn_link@2x
    
  • icn_daiban@2x
    
  • icn_account@2x
    
  • icn_menu@2x
    
  • navigation_icn_sao_nor@2x
    
  • navigation_icn_my_nor@2x
    
  • navigation_icn_new_nor@2x
    
  • icn_shequ@2x
    
  • icn_add@2x
    
  • icn_browser@2x
    
  • icn_gongdan@2x
    
  • icn_picture@2x
    
  • icn_store@2x
    
  • icn_work_box@2x
    
  • icn_set@2x
    
  • bar_shebei
    
  • icn_changjing@2x
    
  • icn_type_my_company@2x
    
  • icn_back_bottom_nor@2x
    
  • icn_add_bottom_nor@2x
    
  • icn_edit_bottom_nor@2x
    
  • bar_ezviz@2x
    
  • close_comming@2x
    
  • common_image_48x48_loading_@2x
    
  • common_image_loading_@2x
    
  • common_image_retry_@2x
    
  • icn_collection_playbcak_pop_up@2x
    
  • icn_collection_playbcak_pop_up_dis@2x
    
  • icn_collection_playbcak_pop_up_sel@2x
    
  • icn_delete_playbcak_pop_up_sel@2x
    
  • icn_download_playbcak_pop_up@2x
    
  • icn_delete_playbcak_pop_up_dis@2x
    
  • icn_download_playbcak_pop_up_dis@2x
    
  • icn_delete_playbcak_pop_up@2x
    
  • icn_download_playbcak_pop_up_sel@2x
    
  • icn_forward_video_dis_@2x
    
  • icn_forward_video_sel_@2x
    
  • icn_forward_video_normal_@2x
    
  • icn_full_screen_video_landscape_sel_@2x
    
  • icn_full_screen_video_landscape_normal_@2x
    
  • icn_help_playback_dis@2x
    
  • icn_help_playback_nor@2x
    
  • icn_help_playback_sel@2x
    
  • icn_pause_video_dis_@2x
    
  • icn_pause_video_normal_@2x
    
  • icn_play_pop_up@2x
    
  • icn_pause_video_sel_@2x
    
  • icn_play_pop_up_sel@2x
    
  • icn_play_pop_up_dis@2x
    
  • icn_play_video_dis_@2x
    
  • icn_play_video_normal_@2x
    
  • icn_play_video_sel_@2x
    
  • icn_screenshot_playback_dis_@2x
    
  • icn_refresh_live_list@2x
    
  • icn_radio@2x
    
  • icn_screenshot_playback_normal_@2x
    
  • icn_screenshot_playback_sel_@2x
    
  • icn_search@2x
    
  • icn_share_pop_up@2x
    
  • icn_share_pop_up_sel@2x
    
  • icn_share_pop_up_dis@2x
    
  • icn_triangle_up_dis@2x
    
  • icn_triangle_down_nor@2x
    
  • icn_triangle_down_dis@2x
    
  • icn_triangle_up_sel@2x
    
  • icn_triangle_up_nor@2x
    
  • icn_video_playback_normal_@2x
    
  • icn_video_playback_dis_@2x
    
  • iso_@2x
    
  • list_icon_next_1@2x
    
  • icn_video_playback_sel_@2x
    
  • list_larger_@2x
    
  • list_larger_dis@2x
    
  • list_larger_sel@2x
    
  • List_of_small_sel@2x
    
  • List_of_small_@2x
    
  • List_of_small_dis@2x
    
  • login_icon_disvisible@2x
    
  • login_icon_disvisible_sel@2x
    
  • login_icon_password_default@2x
    
  • login_icon_password_sel@2x
    
  • login_icon_user_default@2x
    
  • login_icon_visible@2x
    
  • login_icon_user_sel@2x
    
  • navigation_icn_back_nor@2x
    
  • navigation_icn_back_dis@2x
    
  • login_icon_visible_sel@2x
    
  • navigation_icn_back_sel@2x
    
  • navigation_icn_edit_sel@2x
    
  • navigation_icn_edit_dis@2x
    
  • navigation_icn_set_nor@2x
    
  • navigation_icn_set_dis@2x
    
  • navigation_icn_set_sel@2x
    
  • navigation_icn_share_nor@2x
    
  • navigation_icn_share_dis@2x
    
  • navigation_icn_share_sel@2x
    
  • icn_radio@2x
    
  • organize_icon_down__sel@2x
    
  • icn_refresh_live_list@2x
    
  • organize_icon_up@2x
    
  • icn_search@2x
    
  • organize_icon_down@2x
    
  • icn_triangle_down_nor@2x
    
  • organize_icon_up_sel@2x
    
  • list_icon_next@2x
    
  • select@2x
    
  • login_icon_disvisible@2x
    
  • title_telephone_alarm_@2x
    

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

  • login_icon_visible@2x
    .iconlogin_icon_visiblex1
  • title_telephone_alarm_dis@2x
    .icontitle_telephone_alarm_disx
  • navigation_icn_set_nor@2x
    .iconnavigation_icn_set_norx1
  • title_telephone_alarm_sel@2x
    .icontitle_telephone_alarm_selx
  • select@2x
    .iconselectx1
  • unread@2x
    .iconunreadx
  • organize_icon_down@2x
    .iconorganize_icon_downx
  • icn_home_head_search_nor_@2x
    .iconicn_home_head_search_nor_x
  • organize_icon_up@2x
    .iconorganize_icon_upx
  • icn_search@2x
    .iconicn_searchx11
  • unselect@2x
    .iconunselectx1
  • icn_home_head_filtrate_nor_@2x
    .iconicn_home_head_filtrate_nor_x
  • icn_home_head_add_nor_@2x
    .iconicn_home_head_add_nor_x1
  • icon_list_next_saas@2x
    .iconicon_list_next_saasx
  • bar_new
    .iconbar_new
  • icn_bumenrenyuan@2x
    .iconicn_bumenrenyuanx
  • bar_found
    .iconbar_found
  • icn_hangyezhibo@2x
    .iconicn_hangyezhibox
  • bar_live
    .iconbar_live
  • icn_kaoqindaka@2x
    .iconicn_kaoqindakax
  • bar_camera
    .iconbar_camera
  • icn_new_member@2x
    .iconicn_new_memberx
  • bar_my
    .iconbar_my
  • icn_shangwuzhibo@2x
    .iconicn_shangwuzhibox
  • icn_my_equipment@2x
    .iconicn_my_equipmentx
  • icn_shuzihuiwu@2x
    .iconicn_shuzihuiwux
  • icn_more_nor@2x
    .iconicn_more_norx1
  • icn_shipinjiankong@2x
    .iconicn_shipinjiankongx
  • icn_my_Photo_album@2x
    .iconicn_my_Photo_albumx1
  • icn_system_message@2x
    .iconicn_system_messagex
  • icn_organize_default@2x
    .iconicn_organize_defaultx1
  • icn_triangle_down_1_nor@2x
    .iconicn_triangle_down__norx
  • list_lsetting_nor@2x
    .iconlist_lsetting_norx
  • icn_triangle_up_1_nor@2x
    .iconicn_triangle_up__norx
  • navigation_icn_close_nor@2x
    .iconnavigation_icn_close_norx
  • icn_zailigang@2x
    .iconicn_zailigangx
  • navigation_icn_back_nor@2x
    .iconnavigation_icn_back_norx11
  • navigation_icn_back_nor@2x
    .iconnavigation_icn_back_norx2
  • icn_my_software_infor@2x
    .iconicn_my_software_inforx1
  • icn_yunshipinhuiyi@2x
    .iconicn_yunshipinhuiyix1
  • home_video_error_encryption@2x
    .iconhome_video_error_encryptionx
  • navigation_icn_close_nor@2x
    .iconnavigation_icn_close_norx1
  • home_video_error_offline@2x
    .iconhome_video_error_offlinex
  • navigation_icn_back_white_nor@2x
    .iconnavigation_icn_back_white_norx
  • icn_close_search_bg@2x
    .iconicn_close_search_bgx
  • navigation_icn_close_white_nor@2x
    .iconnavigation_icn_close_white_norx
  • unuse@2x
    .iconunusex
  • organize_icon_down@2x
    .iconorganize_icon_downx11
  • navigation_icn_edit_nor@2x
    .iconnavigation_icn_edit_norx
  • search_icon@2x
    .iconsearch_iconx
  • bar_my@2x
    .iconbar_myx
  • organize_icon_up@2x
    .iconorganize_icon_upx11
  • bar_zhineng@2x
    .iconbar_zhinengx
  • icn_system_message@2x
    .iconicn_system_messagex1
  • bar_tongxunlu_sel@2x
    .iconbar_tongxunlu_selx
  • icn_back_bottom_nor@2x
    .iconicn_back_bottom_norx
  • bar_gongzuotai@2x
    .iconbar_gongzuotaix
  • icn_add_bottom_nor@2x
    .iconicn_add_bottom_norx
  • icn_edit_1_nor@2x
    .iconicn_edit__norx
  • icn_edit_bottom_nor@2x
    .iconicn_edit_bottom_norx
  • icn_my_about@2x
    .iconicn_my_aboutx
  • icn_push_new_default_18x18@2x
    .iconicn_push_new_default_xx
  • icn_my_renzheng@2x
    .iconicn_my_renzhengx
  • icn_new_member@2x
    .iconicn_new_memberx1
  • icn_my_company@2x
    .iconicn_my_companyx
  • icn_system_message@2x
    .iconicn_system_messagex2
  • icn_pc@2x
    .iconicn_pcx
  • icn_security
    .iconicn_security
  • navigation_icn_new_nor@2x
    .iconnavigation_icn_new_norx
  • icon_cloud_normal
    .iconicon_cloud_normal
  • navigation_icn_sao_nor@2x
    .iconnavigation_icn_sao_norx
  • icn_star_02@2x
    .iconicn_star_x
  • icn_momen@2x
    .iconicn_momenx
  • icn_star_01@2x
    .iconicn_star_x1
  • icn_man@2x
    .iconicn_manx
  • icn_star_03@2x
    .iconicn_star_x2
  • icn_fanhui@2x
    .iconicn_fanhuix
  • icn_zan@2x
    .iconicn_zanx
  • icn_tianjia@2x
    .iconicn_tianjiax
  • icn_setting_gongzuotai@2x
    .iconicn_setting_gongzuotaix
  • icn_bianji@2x
    .iconicn_bianjix
  • icn_function_menu@2x
    .iconicn_function_menux
  • img_default_avatar@2x
    .iconimg_default_avatarx
  • icn_rubber_nor@2x
    .iconicn_rubber_nor2x
  • icn_camera@2x
    .iconicn_camerax
  • icn_clean_nor@2x
    .iconicn_clean_nor2x
  • inc_home_jihuo@2x
    .iconinc_home_jihuox
  • icn_add_temperature_setting@2x
    .iconicn_add_temperature_setting2x
  • bar_my@2x
    .iconbar_myx1
  • icn_add_zhineng@2x
    .iconicn_add_zhineng2x
  • bar_tongxunlu@2x
    .iconbar_tongxunlux
  • icn_air_conditioning_group_1@2x
    .iconicn_air_conditioning_group_12x
  • bar_zhineng@2x
    .iconbar_zhinengx1
  • icn_subtract_temperature_setting@2x
    .iconicn_subtract_temperature_setting2x
  • navigation_icn_new_nor@2x
    .iconnavigation_icn_new_norx1
  • icn_light_group_1@2x
    .iconicn_light_group_12x
  • bar_zhineng_sel@2x
    .iconbar_zhineng_selx
  • icn_wwitch_group_nor@2x
    .iconicn_wwitch_group_nor2x
  • bar_my_sel@2x
    .iconbar_my_selx
  • icn_edit_zhineng@2x
    .iconicn_edit_zhineng2x
  • bar_tongxunlu_sel@2x
    .iconbar_tongxunlu_selx1
  • icn_delete_zhineng@2x
    .iconicn_delete_zhineng2x
  • bar_gongzuotai@2x
    .iconbar_gongzuotaix3
  • icn_socket_group_1@2x
    .iconicn_socket_group_12x
  • bar_gongzuotai_sel@2x
    .iconbar_gongzuotai_selx1
  • icn_detail_timing@2x
    .iconicn_detail_timing2x
  • icn_people_my_company@2x
    .iconicn_people_my_companyx
  • icn_curtain_group_1@2x
    .iconicn_curtain_group_12x
  • icn_phone_my_company@2x
    .iconicn_phone_my_companyx
  • icn_light_group_2@2x
    .iconicn_light_group_22x
  • icn_address_my_company@2x
    .iconicn_address_my_companyx
  • icn_light_group_1@2x
    .iconicn_light_group_12x1
  • icn_edit_my_company@2x
    .iconicn_edit_my_companyx
  • icn_more@2x
    .iconicn_more2x1
  • icn_introduce_my_company@2x
    .iconicn_introduce_my_companyx
  • icn_wwitch_p2_44_nor@2x
    .iconicn_wwitch_p2_44_nor2x1
  • icn_url_my_company@2x
    .iconicn_url_my_companyx
  • icn_shangban@2x
    .iconicn_shangban2x1
  • icn_type_my_company@2x
    .iconicn_type_my_companyx
  • icn_fresh_air_nor@2x
    .iconicn_fresh_air_nor2x1
  • icn_set_my_company@2x
    .iconicn_set_my_companyx
  • icn_xiaban@2x
    .iconicn_xiaban2x1
  • total
    .icontotal
  • icn_xiuxi@2x
    .iconicn_xiuxi2x1
  • add_conference
    .iconadd_conference
  • icn_guanchuanglian@2x
    .iconicn_guanchuanglian2x
  • creat_conference
    .iconcreat_conference
  • icn_kaichuanglian@2x
    .iconicn_kaichuanglian2x
  • clock_off
    .iconclock_off
  • icn_my_company@2x
    .iconicn_my_company2x
  • clocked
    .iconclocked
  • icn_add_bottom_nor@2x
    .iconicn_add_bottom_nor2x1
  • PC
    .iconPC
  • icn_edit_bottom_nor@2x
    .iconicn_edit_bottom_nor2x1
  • ipone
    .iconipone
  • icn_back_bottom_nor@2x
    .iconicn_back_bottom_nor2x1
  • guanli_detail
    .iconguanli_detail
  • icn_tips_40x40@2x
    .iconicn_tips_40x402x
  • gateway_wrong
    .icongateway_wrong
  • icn_gongdan@2x
    .iconicn_gongdan2x1
  • micro_thumbnail
    .iconmicro_thumbnail
  • icn_picture@2x
    .iconicn_picture2x1
  • assem
    .iconassem
  • icn_account@2x
    .iconicn_account2x1
  • microphone-black
    .iconmicrophone-black
  • icn_work_box@2x
    .iconicn_work_box2x1
  • camera-black
    .iconcamera-black
  • icn_daiban@2x
    .iconicn_daiban2x1
  • trump
    .icontrump
  • icn_shequ@2x
    .iconicn_shequ2x1
  • camera-off
    .iconcamera-off
  • icn_link@2x
    .iconicn_link2x1
  • trump_off
    .icontrump_off
  • icn_browser@2x
    .iconicn_browser2x1
  • micro-off
    .iconmicro-off
  • icn_store@2x
    .iconicn_store2x1
  • micro_thumbnail_off
    .iconmicro_thumbnail_off
  • bar_gongzuotai@2x
    .iconbar_gongzuotai2x
  • nocamera_thumbnail
    .iconnocamera_thumbnail
  • bar_shebei@2x
    .iconbar_shebei2x
  • switch_camera
    .iconswitch_camera
  • bar_shebei_sel@2x
    .iconbar_shebei_sel2x
  • icn_yunshipinhuiyi@1x
    .iconicn_yunshipinhuiyix
  • bar_gongzuotai_sel@2x
    .iconbar_gongzuotai_sel2x
  • icn_bumen
    .iconicn_bumen
  • icn_bumenrenyuan
    .iconicn_bumenrenyuan
  • icn_close_dialog_box@2x
    .iconicn_close_dialog_boxx
  • bar_zhineng@2x
    .iconbar_zhinengx2
  • bar_zhineng_sel@2x
    .iconbar_zhineng_selx1
  • icn_my_setting@2x
    .iconicn_my_settingx
  • switch_open_1@2x
    .iconswitch_open_x
  • icn_delete_01@2x
    .iconicn_delete_x
  • icn_app_store@2x
    .iconicn_app_storex
  • icn_shuzi_my_company@2x
    .iconicn_shuzi_my_companyx
  • icn_add_gongzuotai@2x
    .iconicn_add_gongzuotaix
  • 云储存 - 暂停
    .iconyunchucun-zanting
  • 云储存 - 正常
    .iconyunchucun-zhengchang
  • navigation_icn_share_nor@2x
    .iconnavigation_icn_share_norx1
  • icn_app_store@2x
    .iconicn_app_storex1
  • icn_weixin@2x
    .iconicn_weixinx
  • icn_how_to_buy@2x
    .iconicn_how_to_buyx
  • icn_app_details@2x
    .iconicn_app_detailsx
  • icn_more_01@2x
    .iconicn_more_x
  • icn_close_01@2x
    .iconicn_close_x
  • icn_new_company@2x
    .iconicn_new_company2x
  • icn_system_message@2x
    .iconicn_system_message2x
  • icn_new_member@2x
    .iconicn_new_member2x
  • icn_system_company@2x
    .iconicn_system_company2x
  • icn_add_department@2x
    .iconicn_add_department2x
  • icn_chengyuan_shenhe@2x
    .iconicn_chengyuan_shenhe2x
  • icn_app_store@2x
    .iconicn_app_store2x
  • icn_album@2x
    .iconicn_album2x
  • icn_edit_add_members@2x
    .iconicn_edit_add_members2x
  • icn_download_address@2x
    .iconicn_download_address2x
  • icn_flashlight_off@2x
    .iconicn_flashlight_off2x
  • icn_default_company_1@2x
    .iconicn_default_company_12x
  • icn_erweima_add_members@2x
    .iconicn_erweima_add_members2x
  • icn_phone_add_members@2x
    .iconicn_phone_add_members2x
  • icn_renzheng_02@2x
    .iconicn_renzheng_022x
  • icn_edit_sao@2x
    .iconicn_edit_sao2x
  • icn_flashlight_on@2x
    .iconicn_flashlight_on2x
  • icn_pengyouquan_address@2x
    .iconicn_pengyouquan_address2x
  • icn_weixin_address@2x
    .iconicn_weixin_address2x
  • icn_setting_gongzuotai@2x
    .iconicn_setting_gongzuotai2x
  • icn_weixin_add_members@2x
    .iconicn_weixin_add_members2x
  • icn_qq_address@2x
    .iconicn_qq_address2x
  • icn_add_members@2x
    .iconicn_add_members2x
  • icn_department_address_04@2x
    .iconicn_department_address_042x
  • icn_department_address_03@2x
    .iconicn_department_address_032x
  • icn_head_porlrait@2x
    .iconicn_head_porlrait2x
  • icn_home_head_search_nor_@2x
    .iconicn_home_head_search_nor_2x
  • bar_my@2x
    .iconbar_my2x
  • bar_camera@2x
    .iconbar_camera2x
  • icn_setting@2x
    .iconicn_setting2x
  • bar_new@2x
    .iconbar_new2x
  • icn_add_desktop@2x
    .iconicn_add_desktop2x
  • icn_my_feedback@2x
    .iconicn_my_feedback2x
  • navigation_icn_my_nor
    .iconnavigation_icn_my_nor
  • icn_small@2x
    .iconicn_small2x
  • icn_big@2x
    .iconicn_big2x
  • icn_error
    .iconicn_error
  • icn_failure
    .iconicn_failure
  • icn_succeed
    .iconicn_succeed
  • 问号
    .iconquestion
  • icn_error
    .iconicn_error-copy
  • bar_default
    .iconbar_default1
  • bar_address_book
    .iconbar_address_book1
  • bar_my
    .iconbar_my1
  • bar_workbench_sel
    .iconbar_workbench_sel1
  • bar_smart
    .iconbar_smart1
  • icn_zidingyi@2x
    .iconicn_zidingyi2x1
  • icn_yingyongguanli@2x
    .iconicn_yingyongguanli2x1
  • but_app_store
    .iconbut_app_store1
  • bar_my@2x
    .iconbar_my2x1
  • icn_close@2x
    .iconicn_close2x
  • bar_tongxunlu@2x
    .iconbar_tongxunlu2x
  • icn_link@2x
    .iconicn_link2x
  • icn_daiban@2x
    .iconicn_daiban2x
  • icn_account@2x
    .iconicn_account2x
  • icn_menu@2x
    .iconicn_menu2x
  • navigation_icn_sao_nor@2x
    .iconnavigation_icn_sao_nor2x
  • navigation_icn_my_nor@2x
    .iconnavigation_icn_my_nor2x
  • navigation_icn_new_nor@2x
    .iconnavigation_icn_new_nor2x
  • icn_shequ@2x
    .iconicn_shequ2x
  • icn_add@2x
    .iconicn_add2x
  • icn_browser@2x
    .iconicn_browser2x
  • icn_gongdan@2x
    .iconicn_gongdan2x
  • icn_picture@2x
    .iconicn_picture2x
  • icn_store@2x
    .iconicn_store2x
  • icn_work_box@2x
    .iconicn_work_box2x
  • icn_set@2x
    .iconicn_set2x1
  • bar_shebei
    .iconbar_shebei
  • icn_changjing@2x
    .iconicn_changjing2x
  • icn_type_my_company@2x
    .iconicn_type_my_company2x
  • icn_back_bottom_nor@2x
    .iconicn_back_bottom_nor2x
  • icn_add_bottom_nor@2x
    .iconicn_add_bottom_nor2x
  • icn_edit_bottom_nor@2x
    .iconicn_edit_bottom_nor2x
  • bar_ezviz@2x
    .iconbar_ezvizx
  • close_comming@2x
    .iconclose_commingx
  • common_image_48x48_loading_@2x
    .iconcommon_image_x_loading_x
  • common_image_loading_@2x
    .iconcommon_image_loading_x
  • common_image_retry_@2x
    .iconcommon_image_retry_x
  • icn_collection_playbcak_pop_up@2x
    .iconicn_collection_playbcak_pop_upx
  • icn_collection_playbcak_pop_up_dis@2x
    .iconicn_collection_playbcak_pop_up_disx
  • icn_collection_playbcak_pop_up_sel@2x
    .iconicn_collection_playbcak_pop_up_selx
  • icn_delete_playbcak_pop_up_sel@2x
    .iconicn_delete_playbcak_pop_up_selx
  • icn_download_playbcak_pop_up@2x
    .iconicn_download_playbcak_pop_upx
  • icn_delete_playbcak_pop_up_dis@2x
    .iconicn_delete_playbcak_pop_up_disx
  • icn_download_playbcak_pop_up_dis@2x
    .iconicn_download_playbcak_pop_up_disx
  • icn_delete_playbcak_pop_up@2x
    .iconicn_delete_playbcak_pop_upx
  • icn_download_playbcak_pop_up_sel@2x
    .iconicn_download_playbcak_pop_up_selx
  • icn_forward_video_dis_@2x
    .iconicn_forward_video_dis_x
  • icn_forward_video_sel_@2x
    .iconicn_forward_video_sel_x
  • icn_forward_video_normal_@2x
    .iconicn_forward_video_normal_x
  • icn_full_screen_video_landscape_sel_@2x
    .iconicn_full_screen_video_landscape_sel_x
  • icn_full_screen_video_landscape_normal_@2x
    .iconicn_full_screen_video_landscape_normal_x
  • icn_help_playback_dis@2x
    .iconicn_help_playback_disx
  • icn_help_playback_nor@2x
    .iconicn_help_playback_norx
  • icn_help_playback_sel@2x
    .iconicn_help_playback_selx
  • icn_pause_video_dis_@2x
    .iconicn_pause_video_dis_x
  • icn_pause_video_normal_@2x
    .iconicn_pause_video_normal_x
  • icn_play_pop_up@2x
    .iconicn_play_pop_upx
  • icn_pause_video_sel_@2x
    .iconicn_pause_video_sel_x
  • icn_play_pop_up_sel@2x
    .iconicn_play_pop_up_selx
  • icn_play_pop_up_dis@2x
    .iconicn_play_pop_up_disx
  • icn_play_video_dis_@2x
    .iconicn_play_video_dis_x
  • icn_play_video_normal_@2x
    .iconicn_play_video_normal_x
  • icn_play_video_sel_@2x
    .iconicn_play_video_sel_x
  • icn_screenshot_playback_dis_@2x
    .iconicn_screenshot_playback_dis_x
  • icn_refresh_live_list@2x
    .iconicn_refresh_live_listx1
  • icn_radio@2x
    .iconicn_radiox
  • icn_screenshot_playback_normal_@2x
    .iconicn_screenshot_playback_normal_x
  • icn_screenshot_playback_sel_@2x
    .iconicn_screenshot_playback_sel_x
  • icn_search@2x
    .iconicn_searchx
  • icn_share_pop_up@2x
    .iconicn_share_pop_upx
  • icn_share_pop_up_sel@2x
    .iconicn_share_pop_up_selx
  • icn_share_pop_up_dis@2x
    .iconicn_share_pop_up_disx
  • icn_triangle_up_dis@2x
    .iconicn_triangle_up_disx
  • icn_triangle_down_nor@2x
    .iconicn_triangle_down_norx
  • icn_triangle_down_dis@2x
    .iconicn_triangle_down_disx
  • icn_triangle_up_sel@2x
    .iconicn_triangle_up_selx
  • icn_triangle_up_nor@2x
    .iconicn_triangle_up_norx
  • icn_video_playback_normal_@2x
    .iconicn_video_playback_normal_x
  • icn_video_playback_dis_@2x
    .iconicn_video_playback_dis_x
  • iso_@2x
    .iconiso_x
  • list_icon_next_1@2x
    .iconlist_icon_next_x
  • icn_video_playback_sel_@2x
    .iconicn_video_playback_sel_x
  • list_larger_@2x
    .iconlist_larger_x
  • list_larger_dis@2x
    .iconlist_larger_disx
  • list_larger_sel@2x
    .iconlist_larger_selx
  • List_of_small_sel@2x
    .iconList_of_small_selx
  • List_of_small_@2x
    .iconList_of_small_x
  • List_of_small_dis@2x
    .iconList_of_small_disx
  • login_icon_disvisible@2x
    .iconlogin_icon_disvisiblex
  • login_icon_disvisible_sel@2x
    .iconlogin_icon_disvisible_selx
  • login_icon_password_default@2x
    .iconlogin_icon_password_defaultx
  • login_icon_password_sel@2x
    .iconlogin_icon_password_selx
  • login_icon_user_default@2x
    .iconlogin_icon_user_defaultx
  • login_icon_visible@2x
    .iconlogin_icon_visiblex
  • login_icon_user_sel@2x
    .iconlogin_icon_user_selx
  • navigation_icn_back_nor@2x
    .iconnavigation_icn_back_norx
  • navigation_icn_back_dis@2x
    .iconnavigation_icn_back_disx
  • login_icon_visible_sel@2x
    .iconlogin_icon_visible_selx
  • navigation_icn_back_sel@2x
    .iconnavigation_icn_back_selx
  • navigation_icn_edit_sel@2x
    .iconnavigation_icn_edit_selx
  • navigation_icn_edit_dis@2x
    .iconnavigation_icn_edit_disx
  • navigation_icn_set_nor@2x
    .iconnavigation_icn_set_norx
  • navigation_icn_set_dis@2x
    .iconnavigation_icn_set_disx
  • navigation_icn_set_sel@2x
    .iconnavigation_icn_set_selx
  • navigation_icn_share_nor@2x
    .iconnavigation_icn_share_norx
  • navigation_icn_share_dis@2x
    .iconnavigation_icn_share_disx
  • navigation_icn_share_sel@2x
    .iconnavigation_icn_share_selx
  • icn_radio@2x
    .iconicn_radiox1
  • organize_icon_down__sel@2x
    .iconorganize_icon_down__selx
  • icn_refresh_live_list@2x
    .iconicn_refresh_live_listx
  • organize_icon_up@2x
    .iconorganize_icon_upx1
  • icn_search@2x
    .iconicn_searchx1
  • organize_icon_down@2x
    .iconorganize_icon_downx1
  • icn_triangle_down_nor@2x
    .iconicn_triangle_down_norx2
  • organize_icon_up_sel@2x
    .iconorganize_icon_up_selx
  • list_icon_next@2x
    .iconlist_icon_nextx1
  • select@2x
    .iconselectx
  • login_icon_disvisible@2x
    .iconlogin_icon_disvisiblex1
  • title_telephone_alarm_@2x
    .icontitle_telephone_alarm_x

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

  • login_icon_visible@2x
    #iconlogin_icon_visiblex1
  • title_telephone_alarm_dis@2x
    #icontitle_telephone_alarm_disx
  • navigation_icn_set_nor@2x
    #iconnavigation_icn_set_norx1
  • title_telephone_alarm_sel@2x
    #icontitle_telephone_alarm_selx
  • select@2x
    #iconselectx1
  • unread@2x
    #iconunreadx
  • organize_icon_down@2x
    #iconorganize_icon_downx
  • icn_home_head_search_nor_@2x
    #iconicn_home_head_search_nor_x
  • organize_icon_up@2x
    #iconorganize_icon_upx
  • icn_search@2x
    #iconicn_searchx11
  • unselect@2x
    #iconunselectx1
  • icn_home_head_filtrate_nor_@2x
    #iconicn_home_head_filtrate_nor_x
  • icn_home_head_add_nor_@2x
    #iconicn_home_head_add_nor_x1
  • icon_list_next_saas@2x
    #iconicon_list_next_saasx
  • bar_new
    #iconbar_new
  • icn_bumenrenyuan@2x
    #iconicn_bumenrenyuanx
  • bar_found
    #iconbar_found
  • icn_hangyezhibo@2x
    #iconicn_hangyezhibox
  • bar_live
    #iconbar_live
  • icn_kaoqindaka@2x
    #iconicn_kaoqindakax
  • bar_camera
    #iconbar_camera
  • icn_new_member@2x
    #iconicn_new_memberx
  • bar_my
    #iconbar_my
  • icn_shangwuzhibo@2x
    #iconicn_shangwuzhibox
  • icn_my_equipment@2x
    #iconicn_my_equipmentx
  • icn_shuzihuiwu@2x
    #iconicn_shuzihuiwux
  • icn_more_nor@2x
    #iconicn_more_norx1
  • icn_shipinjiankong@2x
    #iconicn_shipinjiankongx
  • icn_my_Photo_album@2x
    #iconicn_my_Photo_albumx1
  • icn_system_message@2x
    #iconicn_system_messagex
  • icn_organize_default@2x
    #iconicn_organize_defaultx1
  • icn_triangle_down_1_nor@2x
    #iconicn_triangle_down__norx
  • list_lsetting_nor@2x
    #iconlist_lsetting_norx
  • icn_triangle_up_1_nor@2x
    #iconicn_triangle_up__norx
  • navigation_icn_close_nor@2x
    #iconnavigation_icn_close_norx
  • icn_zailigang@2x
    #iconicn_zailigangx
  • navigation_icn_back_nor@2x
    #iconnavigation_icn_back_norx11
  • navigation_icn_back_nor@2x
    #iconnavigation_icn_back_norx2
  • icn_my_software_infor@2x
    #iconicn_my_software_inforx1
  • icn_yunshipinhuiyi@2x
    #iconicn_yunshipinhuiyix1
  • home_video_error_encryption@2x
    #iconhome_video_error_encryptionx
  • navigation_icn_close_nor@2x
    #iconnavigation_icn_close_norx1
  • home_video_error_offline@2x
    #iconhome_video_error_offlinex
  • navigation_icn_back_white_nor@2x
    #iconnavigation_icn_back_white_norx
  • icn_close_search_bg@2x
    #iconicn_close_search_bgx
  • navigation_icn_close_white_nor@2x
    #iconnavigation_icn_close_white_norx
  • unuse@2x
    #iconunusex
  • organize_icon_down@2x
    #iconorganize_icon_downx11
  • navigation_icn_edit_nor@2x
    #iconnavigation_icn_edit_norx
  • search_icon@2x
    #iconsearch_iconx
  • bar_my@2x
    #iconbar_myx
  • organize_icon_up@2x
    #iconorganize_icon_upx11
  • bar_zhineng@2x
    #iconbar_zhinengx
  • icn_system_message@2x
    #iconicn_system_messagex1
  • bar_tongxunlu_sel@2x
    #iconbar_tongxunlu_selx
  • icn_back_bottom_nor@2x
    #iconicn_back_bottom_norx
  • bar_gongzuotai@2x
    #iconbar_gongzuotaix
  • icn_add_bottom_nor@2x
    #iconicn_add_bottom_norx
  • icn_edit_1_nor@2x
    #iconicn_edit__norx
  • icn_edit_bottom_nor@2x
    #iconicn_edit_bottom_norx
  • icn_my_about@2x
    #iconicn_my_aboutx
  • icn_push_new_default_18x18@2x
    #iconicn_push_new_default_xx
  • icn_my_renzheng@2x
    #iconicn_my_renzhengx
  • icn_new_member@2x
    #iconicn_new_memberx1
  • icn_my_company@2x
    #iconicn_my_companyx
  • icn_system_message@2x
    #iconicn_system_messagex2
  • icn_pc@2x
    #iconicn_pcx
  • icn_security
    #iconicn_security
  • navigation_icn_new_nor@2x
    #iconnavigation_icn_new_norx
  • icon_cloud_normal
    #iconicon_cloud_normal
  • navigation_icn_sao_nor@2x
    #iconnavigation_icn_sao_norx
  • icn_star_02@2x
    #iconicn_star_x
  • icn_momen@2x
    #iconicn_momenx
  • icn_star_01@2x
    #iconicn_star_x1
  • icn_man@2x
    #iconicn_manx
  • icn_star_03@2x
    #iconicn_star_x2
  • icn_fanhui@2x
    #iconicn_fanhuix
  • icn_zan@2x
    #iconicn_zanx
  • icn_tianjia@2x
    #iconicn_tianjiax
  • icn_setting_gongzuotai@2x
    #iconicn_setting_gongzuotaix
  • icn_bianji@2x
    #iconicn_bianjix
  • icn_function_menu@2x
    #iconicn_function_menux
  • img_default_avatar@2x
    #iconimg_default_avatarx
  • icn_rubber_nor@2x
    #iconicn_rubber_nor2x
  • icn_camera@2x
    #iconicn_camerax
  • icn_clean_nor@2x
    #iconicn_clean_nor2x
  • inc_home_jihuo@2x
    #iconinc_home_jihuox
  • icn_add_temperature_setting@2x
    #iconicn_add_temperature_setting2x
  • bar_my@2x
    #iconbar_myx1
  • icn_add_zhineng@2x
    #iconicn_add_zhineng2x
  • bar_tongxunlu@2x
    #iconbar_tongxunlux
  • icn_air_conditioning_group_1@2x
    #iconicn_air_conditioning_group_12x
  • bar_zhineng@2x
    #iconbar_zhinengx1
  • icn_subtract_temperature_setting@2x
    #iconicn_subtract_temperature_setting2x
  • navigation_icn_new_nor@2x
    #iconnavigation_icn_new_norx1
  • icn_light_group_1@2x
    #iconicn_light_group_12x
  • bar_zhineng_sel@2x
    #iconbar_zhineng_selx
  • icn_wwitch_group_nor@2x
    #iconicn_wwitch_group_nor2x
  • bar_my_sel@2x
    #iconbar_my_selx
  • icn_edit_zhineng@2x
    #iconicn_edit_zhineng2x
  • bar_tongxunlu_sel@2x
    #iconbar_tongxunlu_selx1
  • icn_delete_zhineng@2x
    #iconicn_delete_zhineng2x
  • bar_gongzuotai@2x
    #iconbar_gongzuotaix3
  • icn_socket_group_1@2x
    #iconicn_socket_group_12x
  • bar_gongzuotai_sel@2x
    #iconbar_gongzuotai_selx1
  • icn_detail_timing@2x
    #iconicn_detail_timing2x
  • icn_people_my_company@2x
    #iconicn_people_my_companyx
  • icn_curtain_group_1@2x
    #iconicn_curtain_group_12x
  • icn_phone_my_company@2x
    #iconicn_phone_my_companyx
  • icn_light_group_2@2x
    #iconicn_light_group_22x
  • icn_address_my_company@2x
    #iconicn_address_my_companyx
  • icn_light_group_1@2x
    #iconicn_light_group_12x1
  • icn_edit_my_company@2x
    #iconicn_edit_my_companyx
  • icn_more@2x
    #iconicn_more2x1
  • icn_introduce_my_company@2x
    #iconicn_introduce_my_companyx
  • icn_wwitch_p2_44_nor@2x
    #iconicn_wwitch_p2_44_nor2x1
  • icn_url_my_company@2x
    #iconicn_url_my_companyx
  • icn_shangban@2x
    #iconicn_shangban2x1
  • icn_type_my_company@2x
    #iconicn_type_my_companyx
  • icn_fresh_air_nor@2x
    #iconicn_fresh_air_nor2x1
  • icn_set_my_company@2x
    #iconicn_set_my_companyx
  • icn_xiaban@2x
    #iconicn_xiaban2x1
  • total
    #icontotal
  • icn_xiuxi@2x
    #iconicn_xiuxi2x1
  • add_conference
    #iconadd_conference
  • icn_guanchuanglian@2x
    #iconicn_guanchuanglian2x
  • creat_conference
    #iconcreat_conference
  • icn_kaichuanglian@2x
    #iconicn_kaichuanglian2x
  • clock_off
    #iconclock_off
  • icn_my_company@2x
    #iconicn_my_company2x
  • clocked
    #iconclocked
  • icn_add_bottom_nor@2x
    #iconicn_add_bottom_nor2x1
  • PC
    #iconPC
  • icn_edit_bottom_nor@2x
    #iconicn_edit_bottom_nor2x1
  • ipone
    #iconipone
  • icn_back_bottom_nor@2x
    #iconicn_back_bottom_nor2x1
  • guanli_detail
    #iconguanli_detail
  • icn_tips_40x40@2x
    #iconicn_tips_40x402x
  • gateway_wrong
    #icongateway_wrong
  • icn_gongdan@2x
    #iconicn_gongdan2x1
  • micro_thumbnail
    #iconmicro_thumbnail
  • icn_picture@2x
    #iconicn_picture2x1
  • assem
    #iconassem
  • icn_account@2x
    #iconicn_account2x1
  • microphone-black
    #iconmicrophone-black
  • icn_work_box@2x
    #iconicn_work_box2x1
  • camera-black
    #iconcamera-black
  • icn_daiban@2x
    #iconicn_daiban2x1
  • trump
    #icontrump
  • icn_shequ@2x
    #iconicn_shequ2x1
  • camera-off
    #iconcamera-off
  • icn_link@2x
    #iconicn_link2x1
  • trump_off
    #icontrump_off
  • icn_browser@2x
    #iconicn_browser2x1
  • micro-off
    #iconmicro-off
  • icn_store@2x
    #iconicn_store2x1
  • micro_thumbnail_off
    #iconmicro_thumbnail_off
  • bar_gongzuotai@2x
    #iconbar_gongzuotai2x
  • nocamera_thumbnail
    #iconnocamera_thumbnail
  • bar_shebei@2x
    #iconbar_shebei2x
  • switch_camera
    #iconswitch_camera
  • bar_shebei_sel@2x
    #iconbar_shebei_sel2x
  • icn_yunshipinhuiyi@1x
    #iconicn_yunshipinhuiyix
  • bar_gongzuotai_sel@2x
    #iconbar_gongzuotai_sel2x
  • icn_bumen
    #iconicn_bumen
  • icn_bumenrenyuan
    #iconicn_bumenrenyuan
  • icn_close_dialog_box@2x
    #iconicn_close_dialog_boxx
  • bar_zhineng@2x
    #iconbar_zhinengx2
  • bar_zhineng_sel@2x
    #iconbar_zhineng_selx1
  • icn_my_setting@2x
    #iconicn_my_settingx
  • switch_open_1@2x
    #iconswitch_open_x
  • icn_delete_01@2x
    #iconicn_delete_x
  • icn_app_store@2x
    #iconicn_app_storex
  • icn_shuzi_my_company@2x
    #iconicn_shuzi_my_companyx
  • icn_add_gongzuotai@2x
    #iconicn_add_gongzuotaix
  • 云储存 - 暂停
    #iconyunchucun-zanting
  • 云储存 - 正常
    #iconyunchucun-zhengchang
  • navigation_icn_share_nor@2x
    #iconnavigation_icn_share_norx1
  • icn_app_store@2x
    #iconicn_app_storex1
  • icn_weixin@2x
    #iconicn_weixinx
  • icn_how_to_buy@2x
    #iconicn_how_to_buyx
  • icn_app_details@2x
    #iconicn_app_detailsx
  • icn_more_01@2x
    #iconicn_more_x
  • icn_close_01@2x
    #iconicn_close_x
  • icn_new_company@2x
    #iconicn_new_company2x
  • icn_system_message@2x
    #iconicn_system_message2x
  • icn_new_member@2x
    #iconicn_new_member2x
  • icn_system_company@2x
    #iconicn_system_company2x
  • icn_add_department@2x
    #iconicn_add_department2x
  • icn_chengyuan_shenhe@2x
    #iconicn_chengyuan_shenhe2x
  • icn_app_store@2x
    #iconicn_app_store2x
  • icn_album@2x
    #iconicn_album2x
  • icn_edit_add_members@2x
    #iconicn_edit_add_members2x
  • icn_download_address@2x
    #iconicn_download_address2x
  • icn_flashlight_off@2x
    #iconicn_flashlight_off2x
  • icn_default_company_1@2x
    #iconicn_default_company_12x
  • icn_erweima_add_members@2x
    #iconicn_erweima_add_members2x
  • icn_phone_add_members@2x
    #iconicn_phone_add_members2x
  • icn_renzheng_02@2x
    #iconicn_renzheng_022x
  • icn_edit_sao@2x
    #iconicn_edit_sao2x
  • icn_flashlight_on@2x
    #iconicn_flashlight_on2x
  • icn_pengyouquan_address@2x
    #iconicn_pengyouquan_address2x
  • icn_weixin_address@2x
    #iconicn_weixin_address2x
  • icn_setting_gongzuotai@2x
    #iconicn_setting_gongzuotai2x
  • icn_weixin_add_members@2x
    #iconicn_weixin_add_members2x
  • icn_qq_address@2x
    #iconicn_qq_address2x
  • icn_add_members@2x
    #iconicn_add_members2x
  • icn_department_address_04@2x
    #iconicn_department_address_042x
  • icn_department_address_03@2x
    #iconicn_department_address_032x
  • icn_head_porlrait@2x
    #iconicn_head_porlrait2x
  • icn_home_head_search_nor_@2x
    #iconicn_home_head_search_nor_2x
  • bar_my@2x
    #iconbar_my2x
  • bar_camera@2x
    #iconbar_camera2x
  • icn_setting@2x
    #iconicn_setting2x
  • bar_new@2x
    #iconbar_new2x
  • icn_add_desktop@2x
    #iconicn_add_desktop2x
  • icn_my_feedback@2x
    #iconicn_my_feedback2x
  • navigation_icn_my_nor
    #iconnavigation_icn_my_nor
  • icn_small@2x
    #iconicn_small2x
  • icn_big@2x
    #iconicn_big2x
  • icn_error
    #iconicn_error
  • icn_failure
    #iconicn_failure
  • icn_succeed
    #iconicn_succeed
  • 问号
    #iconquestion
  • icn_error
    #iconicn_error-copy
  • bar_default
    #iconbar_default1
  • bar_address_book
    #iconbar_address_book1
  • bar_my
    #iconbar_my1
  • bar_workbench_sel
    #iconbar_workbench_sel1
  • bar_smart
    #iconbar_smart1
  • icn_zidingyi@2x
    #iconicn_zidingyi2x1
  • icn_yingyongguanli@2x
    #iconicn_yingyongguanli2x1
  • but_app_store
    #iconbut_app_store1
  • bar_my@2x
    #iconbar_my2x1
  • icn_close@2x
    #iconicn_close2x
  • bar_tongxunlu@2x
    #iconbar_tongxunlu2x
  • icn_link@2x
    #iconicn_link2x
  • icn_daiban@2x
    #iconicn_daiban2x
  • icn_account@2x
    #iconicn_account2x
  • icn_menu@2x
    #iconicn_menu2x
  • navigation_icn_sao_nor@2x
    #iconnavigation_icn_sao_nor2x
  • navigation_icn_my_nor@2x
    #iconnavigation_icn_my_nor2x
  • navigation_icn_new_nor@2x
    #iconnavigation_icn_new_nor2x
  • icn_shequ@2x
    #iconicn_shequ2x
  • icn_add@2x
    #iconicn_add2x
  • icn_browser@2x
    #iconicn_browser2x
  • icn_gongdan@2x
    #iconicn_gongdan2x
  • icn_picture@2x
    #iconicn_picture2x
  • icn_store@2x
    #iconicn_store2x
  • icn_work_box@2x
    #iconicn_work_box2x
  • icn_set@2x
    #iconicn_set2x1
  • bar_shebei
    #iconbar_shebei
  • icn_changjing@2x
    #iconicn_changjing2x
  • icn_type_my_company@2x
    #iconicn_type_my_company2x
  • icn_back_bottom_nor@2x
    #iconicn_back_bottom_nor2x
  • icn_add_bottom_nor@2x
    #iconicn_add_bottom_nor2x
  • icn_edit_bottom_nor@2x
    #iconicn_edit_bottom_nor2x
  • bar_ezviz@2x
    #iconbar_ezvizx
  • close_comming@2x
    #iconclose_commingx
  • common_image_48x48_loading_@2x
    #iconcommon_image_x_loading_x
  • common_image_loading_@2x
    #iconcommon_image_loading_x
  • common_image_retry_@2x
    #iconcommon_image_retry_x
  • icn_collection_playbcak_pop_up@2x
    #iconicn_collection_playbcak_pop_upx
  • icn_collection_playbcak_pop_up_dis@2x
    #iconicn_collection_playbcak_pop_up_disx
  • icn_collection_playbcak_pop_up_sel@2x
    #iconicn_collection_playbcak_pop_up_selx
  • icn_delete_playbcak_pop_up_sel@2x
    #iconicn_delete_playbcak_pop_up_selx
  • icn_download_playbcak_pop_up@2x
    #iconicn_download_playbcak_pop_upx
  • icn_delete_playbcak_pop_up_dis@2x
    #iconicn_delete_playbcak_pop_up_disx
  • icn_download_playbcak_pop_up_dis@2x
    #iconicn_download_playbcak_pop_up_disx
  • icn_delete_playbcak_pop_up@2x
    #iconicn_delete_playbcak_pop_upx
  • icn_download_playbcak_pop_up_sel@2x
    #iconicn_download_playbcak_pop_up_selx
  • icn_forward_video_dis_@2x
    #iconicn_forward_video_dis_x
  • icn_forward_video_sel_@2x
    #iconicn_forward_video_sel_x
  • icn_forward_video_normal_@2x
    #iconicn_forward_video_normal_x
  • icn_full_screen_video_landscape_sel_@2x
    #iconicn_full_screen_video_landscape_sel_x
  • icn_full_screen_video_landscape_normal_@2x
    #iconicn_full_screen_video_landscape_normal_x
  • icn_help_playback_dis@2x
    #iconicn_help_playback_disx
  • icn_help_playback_nor@2x
    #iconicn_help_playback_norx
  • icn_help_playback_sel@2x
    #iconicn_help_playback_selx
  • icn_pause_video_dis_@2x
    #iconicn_pause_video_dis_x
  • icn_pause_video_normal_@2x
    #iconicn_pause_video_normal_x
  • icn_play_pop_up@2x
    #iconicn_play_pop_upx
  • icn_pause_video_sel_@2x
    #iconicn_pause_video_sel_x
  • icn_play_pop_up_sel@2x
    #iconicn_play_pop_up_selx
  • icn_play_pop_up_dis@2x
    #iconicn_play_pop_up_disx
  • icn_play_video_dis_@2x
    #iconicn_play_video_dis_x
  • icn_play_video_normal_@2x
    #iconicn_play_video_normal_x
  • icn_play_video_sel_@2x
    #iconicn_play_video_sel_x
  • icn_screenshot_playback_dis_@2x
    #iconicn_screenshot_playback_dis_x
  • icn_refresh_live_list@2x
    #iconicn_refresh_live_listx1
  • icn_radio@2x
    #iconicn_radiox
  • icn_screenshot_playback_normal_@2x
    #iconicn_screenshot_playback_normal_x
  • icn_screenshot_playback_sel_@2x
    #iconicn_screenshot_playback_sel_x
  • icn_search@2x
    #iconicn_searchx
  • icn_share_pop_up@2x
    #iconicn_share_pop_upx
  • icn_share_pop_up_sel@2x
    #iconicn_share_pop_up_selx
  • icn_share_pop_up_dis@2x
    #iconicn_share_pop_up_disx
  • icn_triangle_up_dis@2x
    #iconicn_triangle_up_disx
  • icn_triangle_down_nor@2x
    #iconicn_triangle_down_norx
  • icn_triangle_down_dis@2x
    #iconicn_triangle_down_disx
  • icn_triangle_up_sel@2x
    #iconicn_triangle_up_selx
  • icn_triangle_up_nor@2x
    #iconicn_triangle_up_norx
  • icn_video_playback_normal_@2x
    #iconicn_video_playback_normal_x
  • icn_video_playback_dis_@2x
    #iconicn_video_playback_dis_x
  • iso_@2x
    #iconiso_x
  • list_icon_next_1@2x
    #iconlist_icon_next_x
  • icn_video_playback_sel_@2x
    #iconicn_video_playback_sel_x
  • list_larger_@2x
    #iconlist_larger_x
  • list_larger_dis@2x
    #iconlist_larger_disx
  • list_larger_sel@2x
    #iconlist_larger_selx
  • List_of_small_sel@2x
    #iconList_of_small_selx
  • List_of_small_@2x
    #iconList_of_small_x
  • List_of_small_dis@2x
    #iconList_of_small_disx
  • login_icon_disvisible@2x
    #iconlogin_icon_disvisiblex
  • login_icon_disvisible_sel@2x
    #iconlogin_icon_disvisible_selx
  • login_icon_password_default@2x
    #iconlogin_icon_password_defaultx
  • login_icon_password_sel@2x
    #iconlogin_icon_password_selx
  • login_icon_user_default@2x
    #iconlogin_icon_user_defaultx
  • login_icon_visible@2x
    #iconlogin_icon_visiblex
  • login_icon_user_sel@2x
    #iconlogin_icon_user_selx
  • navigation_icn_back_nor@2x
    #iconnavigation_icn_back_norx
  • navigation_icn_back_dis@2x
    #iconnavigation_icn_back_disx
  • login_icon_visible_sel@2x
    #iconlogin_icon_visible_selx
  • navigation_icn_back_sel@2x
    #iconnavigation_icn_back_selx
  • navigation_icn_edit_sel@2x
    #iconnavigation_icn_edit_selx
  • navigation_icn_edit_dis@2x
    #iconnavigation_icn_edit_disx
  • navigation_icn_set_nor@2x
    #iconnavigation_icn_set_norx
  • navigation_icn_set_dis@2x
    #iconnavigation_icn_set_disx
  • navigation_icn_set_sel@2x
    #iconnavigation_icn_set_selx
  • navigation_icn_share_nor@2x
    #iconnavigation_icn_share_norx
  • navigation_icn_share_dis@2x
    #iconnavigation_icn_share_disx
  • navigation_icn_share_sel@2x
    #iconnavigation_icn_share_selx
  • icn_radio@2x
    #iconicn_radiox1
  • organize_icon_down__sel@2x
    #iconorganize_icon_down__selx
  • icn_refresh_live_list@2x
    #iconicn_refresh_live_listx
  • organize_icon_up@2x
    #iconorganize_icon_upx1
  • icn_search@2x
    #iconicn_searchx1
  • organize_icon_down@2x
    #iconorganize_icon_downx1
  • icn_triangle_down_nor@2x
    #iconicn_triangle_down_norx2
  • organize_icon_up_sel@2x
    #iconorganize_icon_up_selx
  • list_icon_next@2x
    #iconlist_icon_nextx1
  • select@2x
    #iconselectx
  • login_icon_disvisible@2x
    #iconlogin_icon_disvisiblex1
  • title_telephone_alarm_@2x
    #icontitle_telephone_alarm_x

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>