• 交叉 11
    
  • icon_right
    
  • icon_gou
    
  • icon_write1
    
  • icon_address
    
  • icon_email
    
  • icon_business
    
  • icon_write
    
  • icon_profits
    
  • icon_offer
    
  • icon_sales
    
  • icon_cjht
    
  • icon_video
    
  • icon_attention
    
  • icon-pj
    
  • icon-el
    
  • icon-ebc
    
  • icon_xlj
    
  • btn_kanban_gray
    
  • btn_shengc_gray
    
  • btn_shebei_blue
    
  • btn_mine_gray
    
  • btn_open
    
  • btn_close
    
  • icon_sx
    
  • icon_cjht
    
  • icon_inbox
    
  • icon_up
    
  • icon_sent
    
  • ztjc
    
  • ztps
    
  • icon_write (1)
    
  • ztqx
    
  • ztdx
    
  • icon_write
    
  • icon_imassage
    
  • icon_right
    
  • icon_left2
    
  • icon_move
    
  • icon_attachment
    
  • icon_label
    
  • icon_read
    
  • icon_gfwjj
    
  • btn_refresh
    
  • icon_search
    
  • icon_contact
    
  • icon_forwarding
    
  • icon_ygyx
    
  • icon_draftbox
    
  • icon_unread
    
  • icon_email
    
  • icon_ljyx
    
  • icon_sent
    
  • icon_more
    
  • icon_down
    
  • icon_delete
    
  • icon_set_up
    
  • icon_wdwjj
    
  • icon_ch
    
  • icon_wp
    
  • icon_txl
    
  • icon_pz
    
  • icon_dz
    
  • icon_kb
    
  • icon_khgl
    
  • icon_wddb
    
  • icon_right
    
  • icon_cw
    
  • icon_dzrl
    
  • icon_cn
    
  • icon_wxht
    
  • icon_khcpk
    
  • icon_img
    
  • icon_gscpk
    
  • icon_htcg
    
  • icon_cygn
    
  • icon_tjfw
    
  • icon_jx
    
  • icon_bzcpk
    
  • icon_yx
    
  • icon_dgfw
    
  • icon_jjd
    
  • icon_cg
    
  • icon_lrysb
    
  • icon_email
    
  • icon_jy
    
  • icon_kh
    
  • icon_gd
    
  • icon_end (1)
    
  • icon_begin (1)
    
  • icon_audit (1)
    
  • icon_handle (1)
    
  • icon_shenpi
    
  • icon_audit
    
  • icon_handle
    
  • icon_end
    
  • icon_begin
    
  • icon_审批
    
  • icon_ql
    
  • btn_smile
    
  • btn_add
    
  • icon_listen
    
  • bnt_palette
    
  • btn_play1
    
  • btn_amplification
    
  • btn_volume
    
  • btn_collection_gray
    
  • icon_play
    
  • btn_share
    
  • btn_mine
    
  • btn_operations_gray
    
  • btn_scan
    
  • btn_menu
    
  • btn_manual_gray
    
  • icon_warning_success (2)
    
  • icon_warning_success (1)
    
  • icon_warning_success
    
  • icon_lock
    
  • btn_up
    
  • icon_xj
    
  • icon_ss
    
  • icon_zc
    
  • btn_mine_gray
    
  • btn_shengc_gray
    
  • btn_shebei_gray
    
  • btn_up
    
  • icon_wdj
    
  • icon_zt
    
  • icon_scx
    
  • btn_left
    
  • btn_down1
    
  • btn_drop_down
    
  • btn_more
    
  • btn_list
    
  • btn_kanban_gray
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • 交叉 11
    .icon-a-jiaocha11
  • icon_right
    .icon-icon_right2
  • icon_gou
    .icon-icon_gou
  • icon_write1
    .icon-icon_write11
  • icon_address
    .icon-icon_address
  • icon_email
    .icon-icon_email2
  • icon_business
    .icon-icon_business
  • icon_write
    .icon-icon_write1
  • icon_profits
    .icon-icon_profits
  • icon_offer
    .icon-icon_offer
  • icon_sales
    .icon-icon_sales
  • icon_cjht
    .icon-icon_cjht1
  • icon_video
    .icon-icon_video
  • icon_attention
    .icon-icon_attention
  • icon-pj
    .icon-icon-pj
  • icon-el
    .icon-icon-el
  • icon-ebc
    .icon-icon-ebc
  • icon_xlj
    .icon-icon_xlj
  • btn_kanban_gray
    .icon-btn_kanban_gray1
  • btn_shengc_gray
    .icon-btn_shengc_gray1
  • btn_shebei_blue
    .icon-btn_shebei_blue
  • btn_mine_gray
    .icon-btn_mine_gray1
  • btn_open
    .icon-btn_open1
  • btn_close
    .icon-btn_close1
  • icon_sx
    .icon-icon_sx
  • icon_cjht
    .icon-icon_cjht
  • icon_inbox
    .icon-icon_inbox1
  • icon_up
    .icon-icon_up
  • icon_sent
    .icon-icon_sent1
  • ztjc
    .icon-ztjc
  • ztps
    .icon-ztps
  • icon_write (1)
    .icon-a-icon_write1
  • ztqx
    .icon-ztqx
  • ztdx
    .icon-ztdx
  • icon_write
    .icon-icon_write
  • icon_imassage
    .icon-icon_imassage
  • icon_right
    .icon-icon_right1
  • icon_left2
    .icon-icon_left2
  • icon_move
    .icon-icon_move
  • icon_attachment
    .icon-icon_attachment
  • icon_label
    .icon-icon_label
  • icon_read
    .icon-icon_read
  • icon_gfwjj
    .icon-icon_gfwjj
  • btn_refresh
    .icon-btn_refresh
  • icon_search
    .icon-icon_search
  • icon_contact
    .icon-icon_contact
  • icon_forwarding
    .icon-icon_forwarding
  • icon_ygyx
    .icon-icon_ygyx
  • icon_draftbox
    .icon-icon_draftbox
  • icon_unread
    .icon-icon_unread
  • icon_email
    .icon-icon_email1
  • icon_ljyx
    .icon-icon_ljyx
  • icon_sent
    .icon-icon_sent
  • icon_more
    .icon-icon_more
  • icon_down
    .icon-icon_down
  • icon_delete
    .icon-icon_delete
  • icon_set_up
    .icon-icon_set_up
  • icon_wdwjj
    .icon-icon_wdwjj
  • icon_ch
    .icon-icon_ch
  • icon_wp
    .icon-icon_wp
  • icon_txl
    .icon-icon_txl
  • icon_pz
    .icon-icon_pz
  • icon_dz
    .icon-icon_dz
  • icon_kb
    .icon-icon_kb
  • icon_khgl
    .icon-icon_khgl
  • icon_wddb
    .icon-icon_wddb
  • icon_right
    .icon-icon_right
  • icon_cw
    .icon-icon_cw
  • icon_dzrl
    .icon-icon_dzrl
  • icon_cn
    .icon-icon_cn
  • icon_wxht
    .icon-icon_wxht
  • icon_khcpk
    .icon-icon_khcpk
  • icon_img
    .icon-icon_img
  • icon_gscpk
    .icon-icon_gscpk
  • icon_htcg
    .icon-icon_htcg
  • icon_cygn
    .icon-icon_cygn
  • icon_tjfw
    .icon-icon_tjfw
  • icon_jx
    .icon-icon_jx
  • icon_bzcpk
    .icon-icon_bzcpk
  • icon_yx
    .icon-icon_yx
  • icon_dgfw
    .icon-icon_dgfw
  • icon_jjd
    .icon-icon_jjd
  • icon_cg
    .icon-icon_cg
  • icon_lrysb
    .icon-icon_lrysb
  • icon_email
    .icon-icon_email
  • icon_jy
    .icon-icon_jy
  • icon_kh
    .icon-icon_kh
  • icon_gd
    .icon-icon_gd
  • icon_end (1)
    .icon-a-icon_end1
  • icon_begin (1)
    .icon-a-icon_begin1
  • icon_audit (1)
    .icon-a-icon_audit1
  • icon_handle (1)
    .icon-a-icon_handle1
  • icon_shenpi
    .icon-icon_shenpi1
  • icon_audit
    .icon-icon_audit
  • icon_handle
    .icon-icon_handle
  • icon_end
    .icon-icon_end
  • icon_begin
    .icon-icon_begin
  • icon_审批
    .icon-icon_shenpi
  • icon_ql
    .icon-icon_ql
  • btn_smile
    .icon-btn_smile
  • btn_add
    .icon-btn_add
  • icon_listen
    .icon-icon_listen
  • bnt_palette
    .icon-bnt_palette
  • btn_play1
    .icon-btn_play1
  • btn_amplification
    .icon-btn_amplification
  • btn_volume
    .icon-btn_volume
  • btn_collection_gray
    .icon-btn_collection_gray
  • icon_play
    .icon-icon_play
  • btn_share
    .icon-btn_share
  • btn_mine
    .icon-btn_mine
  • btn_operations_gray
    .icon-btn_operations_gray
  • btn_scan
    .icon-btn_scan
  • btn_menu
    .icon-btn_menu
  • btn_manual_gray
    .icon-btn_manual_gray
  • icon_warning_success (2)
    .icon-a-icon_warning_success2
  • icon_warning_success (1)
    .icon-a-icon_warning_success1
  • icon_warning_success
    .icon-icon_warning_success
  • icon_lock
    .icon-icon_lock
  • btn_up
    .icon-btn_up1
  • icon_xj
    .icon-icon_xj
  • icon_ss
    .icon-icon_ss
  • icon_zc
    .icon-icon_zc
  • btn_mine_gray
    .icon-btn_mine_gray
  • btn_shengc_gray
    .icon-btn_shengc_gray
  • btn_shebei_gray
    .icon-btn_shebei_gray
  • btn_up
    .icon-btn_up
  • icon_wdj
    .icon-icon_wdj
  • icon_zt
    .icon-icon_zt
  • icon_scx
    .icon-icon_scx
  • btn_left
    .icon-btn_left
  • btn_down1
    .icon-btn_down1
  • btn_drop_down
    .icon-btn_drop_down
  • btn_more
    .icon-btn_more
  • btn_list
    .icon-btn_list
  • btn_kanban_gray
    .icon-btn_kanban_gray

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

  • 交叉 11
    #icon-a-jiaocha11
  • icon_right
    #icon-icon_right2
  • icon_gou
    #icon-icon_gou
  • icon_write1
    #icon-icon_write11
  • icon_address
    #icon-icon_address
  • icon_email
    #icon-icon_email2
  • icon_business
    #icon-icon_business
  • icon_write
    #icon-icon_write1
  • icon_profits
    #icon-icon_profits
  • icon_offer
    #icon-icon_offer
  • icon_sales
    #icon-icon_sales
  • icon_cjht
    #icon-icon_cjht1
  • icon_video
    #icon-icon_video
  • icon_attention
    #icon-icon_attention
  • icon-pj
    #icon-icon-pj
  • icon-el
    #icon-icon-el
  • icon-ebc
    #icon-icon-ebc
  • icon_xlj
    #icon-icon_xlj
  • btn_kanban_gray
    #icon-btn_kanban_gray1
  • btn_shengc_gray
    #icon-btn_shengc_gray1
  • btn_shebei_blue
    #icon-btn_shebei_blue
  • btn_mine_gray
    #icon-btn_mine_gray1
  • btn_open
    #icon-btn_open1
  • btn_close
    #icon-btn_close1
  • icon_sx
    #icon-icon_sx
  • icon_cjht
    #icon-icon_cjht
  • icon_inbox
    #icon-icon_inbox1
  • icon_up
    #icon-icon_up
  • icon_sent
    #icon-icon_sent1
  • ztjc
    #icon-ztjc
  • ztps
    #icon-ztps
  • icon_write (1)
    #icon-a-icon_write1
  • ztqx
    #icon-ztqx
  • ztdx
    #icon-ztdx
  • icon_write
    #icon-icon_write
  • icon_imassage
    #icon-icon_imassage
  • icon_right
    #icon-icon_right1
  • icon_left2
    #icon-icon_left2
  • icon_move
    #icon-icon_move
  • icon_attachment
    #icon-icon_attachment
  • icon_label
    #icon-icon_label
  • icon_read
    #icon-icon_read
  • icon_gfwjj
    #icon-icon_gfwjj
  • btn_refresh
    #icon-btn_refresh
  • icon_search
    #icon-icon_search
  • icon_contact
    #icon-icon_contact
  • icon_forwarding
    #icon-icon_forwarding
  • icon_ygyx
    #icon-icon_ygyx
  • icon_draftbox
    #icon-icon_draftbox
  • icon_unread
    #icon-icon_unread
  • icon_email
    #icon-icon_email1
  • icon_ljyx
    #icon-icon_ljyx
  • icon_sent
    #icon-icon_sent
  • icon_more
    #icon-icon_more
  • icon_down
    #icon-icon_down
  • icon_delete
    #icon-icon_delete
  • icon_set_up
    #icon-icon_set_up
  • icon_wdwjj
    #icon-icon_wdwjj
  • icon_ch
    #icon-icon_ch
  • icon_wp
    #icon-icon_wp
  • icon_txl
    #icon-icon_txl
  • icon_pz
    #icon-icon_pz
  • icon_dz
    #icon-icon_dz
  • icon_kb
    #icon-icon_kb
  • icon_khgl
    #icon-icon_khgl
  • icon_wddb
    #icon-icon_wddb
  • icon_right
    #icon-icon_right
  • icon_cw
    #icon-icon_cw
  • icon_dzrl
    #icon-icon_dzrl
  • icon_cn
    #icon-icon_cn
  • icon_wxht
    #icon-icon_wxht
  • icon_khcpk
    #icon-icon_khcpk
  • icon_img
    #icon-icon_img
  • icon_gscpk
    #icon-icon_gscpk
  • icon_htcg
    #icon-icon_htcg
  • icon_cygn
    #icon-icon_cygn
  • icon_tjfw
    #icon-icon_tjfw
  • icon_jx
    #icon-icon_jx
  • icon_bzcpk
    #icon-icon_bzcpk
  • icon_yx
    #icon-icon_yx
  • icon_dgfw
    #icon-icon_dgfw
  • icon_jjd
    #icon-icon_jjd
  • icon_cg
    #icon-icon_cg
  • icon_lrysb
    #icon-icon_lrysb
  • icon_email
    #icon-icon_email
  • icon_jy
    #icon-icon_jy
  • icon_kh
    #icon-icon_kh
  • icon_gd
    #icon-icon_gd
  • icon_end (1)
    #icon-a-icon_end1
  • icon_begin (1)
    #icon-a-icon_begin1
  • icon_audit (1)
    #icon-a-icon_audit1
  • icon_handle (1)
    #icon-a-icon_handle1
  • icon_shenpi
    #icon-icon_shenpi1
  • icon_audit
    #icon-icon_audit
  • icon_handle
    #icon-icon_handle
  • icon_end
    #icon-icon_end
  • icon_begin
    #icon-icon_begin
  • icon_审批
    #icon-icon_shenpi
  • icon_ql
    #icon-icon_ql
  • btn_smile
    #icon-btn_smile
  • btn_add
    #icon-btn_add
  • icon_listen
    #icon-icon_listen
  • bnt_palette
    #icon-bnt_palette
  • btn_play1
    #icon-btn_play1
  • btn_amplification
    #icon-btn_amplification
  • btn_volume
    #icon-btn_volume
  • btn_collection_gray
    #icon-btn_collection_gray
  • icon_play
    #icon-icon_play
  • btn_share
    #icon-btn_share
  • btn_mine
    #icon-btn_mine
  • btn_operations_gray
    #icon-btn_operations_gray
  • btn_scan
    #icon-btn_scan
  • btn_menu
    #icon-btn_menu
  • btn_manual_gray
    #icon-btn_manual_gray
  • icon_warning_success (2)
    #icon-a-icon_warning_success2
  • icon_warning_success (1)
    #icon-a-icon_warning_success1
  • icon_warning_success
    #icon-icon_warning_success
  • icon_lock
    #icon-icon_lock
  • btn_up
    #icon-btn_up1
  • icon_xj
    #icon-icon_xj
  • icon_ss
    #icon-icon_ss
  • icon_zc
    #icon-icon_zc
  • btn_mine_gray
    #icon-btn_mine_gray
  • btn_shengc_gray
    #icon-btn_shengc_gray
  • btn_shebei_gray
    #icon-btn_shebei_gray
  • btn_up
    #icon-btn_up
  • icon_wdj
    #icon-icon_wdj
  • icon_zt
    #icon-icon_zt
  • icon_scx
    #icon-icon_scx
  • btn_left
    #icon-btn_left
  • btn_down1
    #icon-btn_down1
  • btn_drop_down
    #icon-btn_drop_down
  • btn_more
    #icon-btn_more
  • btn_list
    #icon-btn_list
  • btn_kanban_gray
    #icon-btn_kanban_gray

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>