• icomx_xialan
    
  • iconm_xialan
    
  • icomx_gengdxq
    
  • iconm_quertj
    
  • iconm_gongndh
    
  • icomx_gongndh
    
  • iconm_shouqan
    
  • icomx_shouqan
    
  • icomx_suoxck
    
  • icomx_quertj
    
  • iconm_fangdck
    
  • iconm_suoxck
    
  • iconm_quertj
    
  • iconm_gengdxq
    
  • iconm_mine
    
  • icomx_mine
    
  • iconm_message
    
  • icomx_message
    
  • icomx_gongzt
    
  • iconm_gongzt
    
  • icomx_wulw
    
  • iconm_wulw
    
  • iconm_renwzp
    
  • iconm_neibtxl
    
  • iconm_shencgl(1)
    
  • iconm_shencjh
    
  • iconm_renwlz
    
  • iconm_shencgl
    
  • iconm_shengcrw
    
  • iconm_shengcx
    
  • iconm_qingk
    
  • iconm_sih
    
  • iconm_tuikgl
    
  • iconm_tuihgl
    
  • iconm_shoudck
    
  • iconm_wofqd
    
  • iconm_shengcjh
    
  • iconm_tiaoc
    
  • iconm_wangrk
    
  • iconm_shoudrk
    
  • iconm_maoyht
    
  • iconm_waimgl
    
  • iconm_sheng
    
  • iconm_tongxl
    
  • iconm_shouzls
    
  • iconm_yangpd
    
  • iconm_shengcbg
    
  • iconm_waixht(1)
    
  • iconm_waibtxl
    
  • iconx_caiggl
    
  • iconm_wodyx
    
  • iconm_wulgl
    
  • iconx_chanpwlk
    
  • iconm_wospd
    
  • iconm_wangpzl
    
  • iconm_yangpgd
    
  • iconm_xiaoxtz
    
  • iconm_zijzh
    
  • iconx_churklsz
    
  • iconx_caiggl(1)
    
  • iconx_baojd
    
  • iconm_zijgl
    
  • iconm_wulxx
    
  • iconm_zijrbb
    
  • iconx_caiwgl
    
  • iconm_zijgl(1)
    
  • iconx_caiwgl2
    
  • iconm_wulfl
    
  • iconm_waixht
    
  • iconm_youxsz
    
  • iconx_cangkwh
    
  • iconx_chuhgl
    
  • iconx_bangoa
    
  • iconx_kehda
    
  • iconx_kucgl
    
  • iconx_lissp
    
  • iconx_caig
    
  • iconx_caigfk
    
  • iconx_chanpfl
    
  • iconx_dairk
    
  • iconx_chanpxx
    
  • iconm_xianbgl
    
  • iconx_cangcpz
    
  • iconx_kehcc
    
  • iconx_gongdgl
    
  • iconx_daozrl
    
  • iconx_huokzd
    
  • iconx_tongxl
    
  • iconx_guanld
    
  • iconx_caiwgl1
    
  • iconx_wulfl
    
  • iconx_gongys
    
  • iconx_tuihgl
    
  • iconx_gongh
    
  • iconx_liucbl
    
  • iconx_sheng
    
  • iconx_liucyq
    
  • iconx_jioay
    
  • iconx_daick
    
  • iconx_youxsz
    
  • iconx_gongswp
    
  • iconx_shencgl(1)
    
  • iconx_liuckz
    
  • iconx_churk
    
  • iconx_gongyjg
    
  • iconx_zijgl
    
  • iconx_shencgl
    
  • iconx_fapgl
    
  • iconx_xiaoxitz
    
  • iconx_chanpgl
    
  • iconx_shoudck
    
  • iconx_wulgl
    
  • icomx_bom
    
  • iconx_dianzyx
    
  • iconx_kehd
    
  • iconx_gongcgl
    
  • iconx_cangkcx
    
  • icomx_chej
    
  • iconx_kucpd
    
  • icomx_gongzrb
    
  • icomx_gongzrw
    
  • iconx_waimgl
    
  • iconx_tuikgl
    
  • iconx_gongcwh
    
  • icomx_bumfytj
    
  • iconx_waixht
    
  • iconx_sih
    
  • icomx_jiaojd
    
  • iconx_gongzgl
    
  • icomx_danzgl
    
  • icomx_lirjsb
    
  • iconx_liucpz
    
  • iconx_shencjh
    
  • iconx_daohzj
    
  • iconx_wospd
    
  • iconx_tiaoc
    
  • iconx_yangpd
    
  • iconx_gendgl
    
  • icomx_neibtxl
    
  • iconx_zijgl(1)
    
  • icomx_renwzp
    
  • icomx_qingk
    
  • icomx_shouzls
    
  • icomx_baozch
    
  • icomx_daozdj
    
  • icomx_shengcx
    
  • iconx_kehgl
    
  • icomx_gongzrc
    
  • iconx_wodyx
    
  • icomx_caiggd
    
  • iconx_shoudrk
    
  • iconx_wofqd
    
  • iconx_wulxx
    
  • iconx_gongysxx
    
  • icomx_gongx
    
  • icomx_shengcbg
    
  • icomx_bumfyfx
    
  • icomx_zijrbb
    
  • iconm_bumfytj
    
  • iconm_bumfyfx
    
  • icomx_fuwht
    
  • icomx_gongdgl
    
  • icomx_shengcjh
    
  • iconm_chej
    
  • iconm_caiggd
    
  • icomx_xianbgl
    
  • iconm_chanpfl
    
  • iconm_daozrl
    
  • icomx_waibtxl
    
  • icomx_wangrk
    
  • iconm_bangoa
    
  • iconm_gongswp
    
  • icomx_zijzh
    
  • iconm_cangkwh
    
  • iconm_caig
    
  • iconm_daozdj
    
  • iconm_caiggl
    
  • iconm_gongyjg
    
  • iconm_cangcpz
    
  • iconm_caiwgl1
    
  • iconm_chuhgl
    
  • iconm_caiggl(1)
    
  • icomx_shengcrw
    
  • iconm_caiwgl2
    
  • iconm_gendgl
    
  • iconm_daohzj
    
  • iconm_cangcgl
    
  • iconm_gongx
    
  • iconm_cangkcx
    
  • iconm_gongzrw
    
  • icomx_yangpgd
    
  • iconm_bom
    
  • iconm_gongzrb
    
  • iconm_gongdgl(1)
    
  • iconm_churk
    
  • iconm_fuwht
    
  • icomx_lirysb
    
  • iconm_huokzd
    
  • icomx_wangpzl
    
  • iconm_guanld
    
  • iconm_baozch
    
  • iconm_kucpd
    
  • iconm_dairk
    
  • iconm_kehcc
    
  • iconm_gongcwh
    
  • iconm_baojd
    
  • iconm_kucgl
    
  • iconm_kehda
    
  • iconm_gongy
    
  • iconm_gongzgl
    
  • iconm_jiaojd
    
  • iconm_daick
    
  • iconm_lirysb
    
  • iconm_liuckz
    
  • iconm_churklsz
    
  • iconm_chanpwlk
    
  • iconm_liucpz
    
  • iconm_gongysxx
    
  • iconm_gongh
    
  • iconm_caiwgl
    
  • iconm_kehgl
    
  • iconm_liucbl
    
  • iconm_fapgl
    
  • iconm_lissp
    
  • icomx_dak
    
  • iconm_chanpgl
    
  • icomx_waixht
    
  • icomx_maoyht
    
  • iconm_chanpxx
    
  • iconm_liucyq
    
  • iconm_dianzyx
    
  • iconm_danzgl
    
  • iconm_dak
    
  • iconm_gongdgl
    
  • iconm_gongcgl
    
  • icomx_renwlz
    
  • iconm_gongys
    
  • iconm_gongzrc
    
  • iconm_jioay
    
  • iconm_lirjsb
    
  • iconm_kehd
    
  • icon_txl
    
  • icon_kh
    
  • icon_tjfw
    
  • icon_gd
    
  • icon_kb
    
  • btn_help
    
  • icon_ch
    
  • btn_notice
    
  • btn_Full_screen
    
  • icon_dz
    
  • icon_email
    
  • icon_changygn
    
  • icon_cg
    
  • icon_gwc
    
  • icon_pz
    
  • icon_jy
    
  • icon_cn
    
  • icon_cw
    
  • icon_jx
    
  • icon_wp
    
  • icon_right
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • icomx_xialan
    .icon-icomx_xialan1
  • iconm_xialan
    .icon-iconm_xialan1
  • icomx_gengdxq
    .icon-icomx_gengdxq
  • iconm_quertj
    .icon-iconm_quertj1
  • iconm_gongndh
    .icon-iconm_gongndh
  • icomx_gongndh
    .icon-icomx_gongndh
  • iconm_shouqan
    .icon-iconm_xialan
  • icomx_shouqan
    .icon-icomx_xialan
  • icomx_suoxck
    .icon-icomx_suoxck
  • icomx_quertj
    .icon-icomx_quertj
  • iconm_fangdck
    .icon-iconm_fangdck
  • iconm_suoxck
    .icon-iconm_suoxck
  • iconm_quertj
    .icon-iconm_quertj
  • iconm_gengdxq
    .icon-iconm_gengdxq
  • iconm_mine
    .icon-iconm_mine
  • icomx_mine
    .icon-icomx_mine
  • iconm_message
    .icon-iconm_message
  • icomx_message
    .icon-icomx_message
  • icomx_gongzt
    .icon-icomx_gongzt
  • iconm_gongzt
    .icon-iconm_gongzt
  • icomx_wulw
    .icon-icomx_wulw
  • iconm_wulw
    .icon-iconm_wulw
  • iconm_renwzp
    .icon-iconm_renwzp
  • iconm_neibtxl
    .icon-iconm_neibtxl
  • iconm_shencgl(1)
    .icon-a-iconm_shencgl1
  • iconm_shencjh
    .icon-iconm_shencjh
  • iconm_renwlz
    .icon-iconm_renwlz
  • iconm_shencgl
    .icon-iconm_shencgl
  • iconm_shengcrw
    .icon-iconm_shengcrw
  • iconm_shengcx
    .icon-iconm_shengcx
  • iconm_qingk
    .icon-iconm_qingk
  • iconm_sih
    .icon-iconm_sih
  • iconm_tuikgl
    .icon-iconm_tuikgl
  • iconm_tuihgl
    .icon-iconm_tuihgl
  • iconm_shoudck
    .icon-iconm_shoudck
  • iconm_wofqd
    .icon-iconm_wofqd
  • iconm_shengcjh
    .icon-iconm_shengcjh
  • iconm_tiaoc
    .icon-iconm_tiaoc
  • iconm_wangrk
    .icon-iconm_wangrk
  • iconm_shoudrk
    .icon-iconm_shoudrk
  • iconm_maoyht
    .icon-iconm_maoyht
  • iconm_waimgl
    .icon-iconm_waimgl
  • iconm_sheng
    .icon-iconm_sheng
  • iconm_tongxl
    .icon-iconm_tongxl
  • iconm_shouzls
    .icon-iconm_shouzls
  • iconm_yangpd
    .icon-iconm_yangpd
  • iconm_shengcbg
    .icon-iconm_shengcbg
  • iconm_waixht(1)
    .icon-a-iconm_waixht1
  • iconm_waibtxl
    .icon-iconm_waibtxl
  • iconx_caiggl
    .icon-iconx_caiggl
  • iconm_wodyx
    .icon-iconm_wodyx
  • iconm_wulgl
    .icon-iconm_wulgl
  • iconx_chanpwlk
    .icon-iconx_chanpwlk
  • iconm_wospd
    .icon-iconm_wospd
  • iconm_wangpzl
    .icon-iconm_wangpzl
  • iconm_yangpgd
    .icon-iconm_yangpgd
  • iconm_xiaoxtz
    .icon-iconm_xiaoxtz
  • iconm_zijzh
    .icon-iconm_zijzh
  • iconx_churklsz
    .icon-iconx_churklsz
  • iconx_caiggl(1)
    .icon-a-iconx_caiggl1
  • iconx_baojd
    .icon-iconx_baojd
  • iconm_zijgl
    .icon-iconm_zijgl
  • iconm_wulxx
    .icon-iconm_wulxx
  • iconm_zijrbb
    .icon-iconm_zijrbb
  • iconx_caiwgl
    .icon-iconx_caiwgl
  • iconm_zijgl(1)
    .icon-a-iconm_zijgl1
  • iconx_caiwgl2
    .icon-iconx_caiwgl2
  • iconm_wulfl
    .icon-iconm_wulfl
  • iconm_waixht
    .icon-iconm_waixht
  • iconm_youxsz
    .icon-iconm_youxsz
  • iconx_cangkwh
    .icon-iconx_cangkwh
  • iconx_chuhgl
    .icon-iconx_chuhgl
  • iconx_bangoa
    .icon-iconx_bangoa
  • iconx_kehda
    .icon-iconx_kehda
  • iconx_kucgl
    .icon-iconx_kucgl
  • iconx_lissp
    .icon-iconx_lissp
  • iconx_caig
    .icon-iconx_caig
  • iconx_caigfk
    .icon-iconx_caigfk
  • iconx_chanpfl
    .icon-iconx_chanpfl
  • iconx_dairk
    .icon-iconx_dairk
  • iconx_chanpxx
    .icon-iconx_chanpxx
  • iconm_xianbgl
    .icon-iconm_xianbgl
  • iconx_cangcpz
    .icon-iconx_cangcpz
  • iconx_kehcc
    .icon-iconx_kehcc
  • iconx_gongdgl
    .icon-iconx_gongdgl
  • iconx_daozrl
    .icon-iconx_daozrl
  • iconx_huokzd
    .icon-iconx_huokzd
  • iconx_tongxl
    .icon-iconx_tongxl
  • iconx_guanld
    .icon-iconx_guanld
  • iconx_caiwgl1
    .icon-iconx_caiwgl1
  • iconx_wulfl
    .icon-iconx_wulfl
  • iconx_gongys
    .icon-iconx_gongys
  • iconx_tuihgl
    .icon-iconx_tuihgl
  • iconx_gongh
    .icon-iconx_gongh
  • iconx_liucbl
    .icon-iconx_liucbl
  • iconx_sheng
    .icon-iconx_sheng
  • iconx_liucyq
    .icon-iconx_liucyq
  • iconx_jioay
    .icon-iconx_jioay
  • iconx_daick
    .icon-iconx_daick
  • iconx_youxsz
    .icon-iconx_youxsz
  • iconx_gongswp
    .icon-iconx_gongswp
  • iconx_shencgl(1)
    .icon-a-iconx_shencgl1
  • iconx_liuckz
    .icon-iconx_liuckz
  • iconx_churk
    .icon-iconx_churk
  • iconx_gongyjg
    .icon-iconx_gongyjg
  • iconx_zijgl
    .icon-iconx_zijgl
  • iconx_shencgl
    .icon-iconx_shencgl
  • iconx_fapgl
    .icon-iconx_fapgl
  • iconx_xiaoxitz
    .icon-iconx_xiaoxitz
  • iconx_chanpgl
    .icon-iconx_chanpgl
  • iconx_shoudck
    .icon-iconx_shoudck
  • iconx_wulgl
    .icon-iconx_wulgl
  • icomx_bom
    .icon-icomx_bom
  • iconx_dianzyx
    .icon-iconx_dianzyx
  • iconx_kehd
    .icon-iconx_kehd
  • iconx_gongcgl
    .icon-iconx_gongcgl
  • iconx_cangkcx
    .icon-iconx_cangkcx
  • icomx_chej
    .icon-icomx_chej
  • iconx_kucpd
    .icon-iconx_kucpd
  • icomx_gongzrb
    .icon-icomx_gongzrb
  • icomx_gongzrw
    .icon-icomx_gongzrw
  • iconx_waimgl
    .icon-iconx_waimgl
  • iconx_tuikgl
    .icon-iconx_tuikgl
  • iconx_gongcwh
    .icon-iconx_gongcwh
  • icomx_bumfytj
    .icon-icomx_bumfytj
  • iconx_waixht
    .icon-iconx_waixht
  • iconx_sih
    .icon-iconx_sih
  • icomx_jiaojd
    .icon-icomx_jiaojd
  • iconx_gongzgl
    .icon-iconx_gongzgl
  • icomx_danzgl
    .icon-icomx_danzgl
  • icomx_lirjsb
    .icon-icomx_lirjsb
  • iconx_liucpz
    .icon-iconx_liucpz
  • iconx_shencjh
    .icon-iconx_shencjh
  • iconx_daohzj
    .icon-iconx_daohzj
  • iconx_wospd
    .icon-iconx_wospd
  • iconx_tiaoc
    .icon-iconx_tiaoc
  • iconx_yangpd
    .icon-iconx_yangpd
  • iconx_gendgl
    .icon-iconx_gendgl
  • icomx_neibtxl
    .icon-icomx_neibtxl
  • iconx_zijgl(1)
    .icon-a-iconx_zijgl1
  • icomx_renwzp
    .icon-icomx_renwzp
  • icomx_qingk
    .icon-icomx_qingk
  • icomx_shouzls
    .icon-icomx_shouzls
  • icomx_baozch
    .icon-icomx_baozch
  • icomx_daozdj
    .icon-icomx_daozdj
  • icomx_shengcx
    .icon-icomx_shengcx
  • iconx_kehgl
    .icon-iconx_kehgl
  • icomx_gongzrc
    .icon-icomx_gongzrc
  • iconx_wodyx
    .icon-iconx_wodyx
  • icomx_caiggd
    .icon-icomx_caiggd
  • iconx_shoudrk
    .icon-iconx_shoudrk
  • iconx_wofqd
    .icon-iconx_wofqd
  • iconx_wulxx
    .icon-iconx_wulxx
  • iconx_gongysxx
    .icon-iconx_gongysxx
  • icomx_gongx
    .icon-icomx_gongx
  • icomx_shengcbg
    .icon-icomx_shengcbg
  • icomx_bumfyfx
    .icon-icomx_bumfyfx
  • icomx_zijrbb
    .icon-icomx_zijrbb
  • iconm_bumfytj
    .icon-iconm_bumfytj
  • iconm_bumfyfx
    .icon-iconm_bumfyfx
  • icomx_fuwht
    .icon-icomx_fuwht
  • icomx_gongdgl
    .icon-icomx_gongdgl
  • icomx_shengcjh
    .icon-icomx_shengcjh
  • iconm_chej
    .icon-iconm_chej
  • iconm_caiggd
    .icon-iconm_caiggd
  • icomx_xianbgl
    .icon-icomx_xianbgl
  • iconm_chanpfl
    .icon-iconm_chanpfl
  • iconm_daozrl
    .icon-iconm_daozrl
  • icomx_waibtxl
    .icon-icomx_waibtxl
  • icomx_wangrk
    .icon-icomx_wangrk
  • iconm_bangoa
    .icon-iconm_bangoa
  • iconm_gongswp
    .icon-iconm_gongswp
  • icomx_zijzh
    .icon-icomx_zijzh
  • iconm_cangkwh
    .icon-iconm_cangkwh
  • iconm_caig
    .icon-iconm_caig
  • iconm_daozdj
    .icon-iconm_daozdj
  • iconm_caiggl
    .icon-iconm_caiggl
  • iconm_gongyjg
    .icon-iconm_gongyjg
  • iconm_cangcpz
    .icon-iconm_cangcpz
  • iconm_caiwgl1
    .icon-iconm_caiwgl1
  • iconm_chuhgl
    .icon-iconm_chuhgl
  • iconm_caiggl(1)
    .icon-a-iconm_caiggl1
  • icomx_shengcrw
    .icon-icomx_shengcrw
  • iconm_caiwgl2
    .icon-iconm_caiwgl2
  • iconm_gendgl
    .icon-iconm_gendgl
  • iconm_daohzj
    .icon-iconm_daohzj
  • iconm_cangcgl
    .icon-iconm_cangcgl
  • iconm_gongx
    .icon-iconm_gongx
  • iconm_cangkcx
    .icon-iconm_cangkcx
  • iconm_gongzrw
    .icon-iconm_gongzrw
  • icomx_yangpgd
    .icon-icomx_yangpgd
  • iconm_bom
    .icon-iconm_bom
  • iconm_gongzrb
    .icon-iconm_gongzrb
  • iconm_gongdgl(1)
    .icon-a-iconm_gongdgl1
  • iconm_churk
    .icon-iconm_churk
  • iconm_fuwht
    .icon-iconm_fuwht
  • icomx_lirysb
    .icon-icomx_lirysb
  • iconm_huokzd
    .icon-iconm_huokzd
  • icomx_wangpzl
    .icon-icomx_wangpzl
  • iconm_guanld
    .icon-iconm_guanld
  • iconm_baozch
    .icon-iconm_baozch
  • iconm_kucpd
    .icon-iconm_kucpd
  • iconm_dairk
    .icon-iconm_dairk
  • iconm_kehcc
    .icon-iconm_kehcc
  • iconm_gongcwh
    .icon-iconm_gongcwh
  • iconm_baojd
    .icon-iconm_baojd
  • iconm_kucgl
    .icon-iconm_kucgl
  • iconm_kehda
    .icon-iconm_kehda
  • iconm_gongy
    .icon-iconm_gongy
  • iconm_gongzgl
    .icon-iconm_gongzgl
  • iconm_jiaojd
    .icon-iconm_jiaojd
  • iconm_daick
    .icon-iconm_daick
  • iconm_lirysb
    .icon-iconm_lirysb
  • iconm_liuckz
    .icon-iconm_liuckz
  • iconm_churklsz
    .icon-iconm_churklsz
  • iconm_chanpwlk
    .icon-iconm_chanpwlk
  • iconm_liucpz
    .icon-iconm_liucpz
  • iconm_gongysxx
    .icon-iconm_gongysxx
  • iconm_gongh
    .icon-iconm_gongh
  • iconm_caiwgl
    .icon-iconm_caiwgl
  • iconm_kehgl
    .icon-iconm_kehgl
  • iconm_liucbl
    .icon-iconm_liucbl
  • iconm_fapgl
    .icon-iconm_fapgl
  • iconm_lissp
    .icon-iconm_lissp
  • icomx_dak
    .icon-icomx_dak
  • iconm_chanpgl
    .icon-iconm_chanpgl
  • icomx_waixht
    .icon-icomx_waixht
  • icomx_maoyht
    .icon-icomx_maoyht
  • iconm_chanpxx
    .icon-iconm_chanpxx
  • iconm_liucyq
    .icon-iconm_liucyq
  • iconm_dianzyx
    .icon-iconm_dianzyx
  • iconm_danzgl
    .icon-iconm_danzgl
  • iconm_dak
    .icon-iconm_dak
  • iconm_gongdgl
    .icon-iconm_gongdgl
  • iconm_gongcgl
    .icon-iconm_gongcgl
  • icomx_renwlz
    .icon-icomx_renwlz
  • iconm_gongys
    .icon-iconm_gongys
  • iconm_gongzrc
    .icon-iconm_gongzrc
  • iconm_jioay
    .icon-iconm_jioay
  • iconm_lirjsb
    .icon-iconm_lirjsb
  • iconm_kehd
    .icon-iconm_kehd
  • icon_txl
    .icon-icon_txl
  • icon_kh
    .icon-icon_kh
  • icon_tjfw
    .icon-icon_tjfw
  • icon_gd
    .icon-icon_gd
  • icon_kb
    .icon-icon_kb
  • btn_help
    .icon-btn_help
  • icon_ch
    .icon-icon_ch
  • btn_notice
    .icon-btn_notice
  • btn_Full_screen
    .icon-btn_Full_screen
  • icon_dz
    .icon-icon_dz
  • icon_email
    .icon-icon_email
  • icon_changygn
    .icon-icon_changygn
  • icon_cg
    .icon-icon_cg
  • icon_gwc
    .icon-icon_gwc
  • icon_pz
    .icon-icon_pz
  • icon_jy
    .icon-icon_jy
  • icon_cn
    .icon-icon_cn
  • icon_cw
    .icon-icon_cw
  • icon_jx
    .icon-icon_jx
  • icon_wp
    .icon-icon_wp
  • icon_right
    .icon-icon_right

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

  • icomx_xialan
    #icon-icomx_xialan1
  • iconm_xialan
    #icon-iconm_xialan1
  • icomx_gengdxq
    #icon-icomx_gengdxq
  • iconm_quertj
    #icon-iconm_quertj1
  • iconm_gongndh
    #icon-iconm_gongndh
  • icomx_gongndh
    #icon-icomx_gongndh
  • iconm_shouqan
    #icon-iconm_xialan
  • icomx_shouqan
    #icon-icomx_xialan
  • icomx_suoxck
    #icon-icomx_suoxck
  • icomx_quertj
    #icon-icomx_quertj
  • iconm_fangdck
    #icon-iconm_fangdck
  • iconm_suoxck
    #icon-iconm_suoxck
  • iconm_quertj
    #icon-iconm_quertj
  • iconm_gengdxq
    #icon-iconm_gengdxq
  • iconm_mine
    #icon-iconm_mine
  • icomx_mine
    #icon-icomx_mine
  • iconm_message
    #icon-iconm_message
  • icomx_message
    #icon-icomx_message
  • icomx_gongzt
    #icon-icomx_gongzt
  • iconm_gongzt
    #icon-iconm_gongzt
  • icomx_wulw
    #icon-icomx_wulw
  • iconm_wulw
    #icon-iconm_wulw
  • iconm_renwzp
    #icon-iconm_renwzp
  • iconm_neibtxl
    #icon-iconm_neibtxl
  • iconm_shencgl(1)
    #icon-a-iconm_shencgl1
  • iconm_shencjh
    #icon-iconm_shencjh
  • iconm_renwlz
    #icon-iconm_renwlz
  • iconm_shencgl
    #icon-iconm_shencgl
  • iconm_shengcrw
    #icon-iconm_shengcrw
  • iconm_shengcx
    #icon-iconm_shengcx
  • iconm_qingk
    #icon-iconm_qingk
  • iconm_sih
    #icon-iconm_sih
  • iconm_tuikgl
    #icon-iconm_tuikgl
  • iconm_tuihgl
    #icon-iconm_tuihgl
  • iconm_shoudck
    #icon-iconm_shoudck
  • iconm_wofqd
    #icon-iconm_wofqd
  • iconm_shengcjh
    #icon-iconm_shengcjh
  • iconm_tiaoc
    #icon-iconm_tiaoc
  • iconm_wangrk
    #icon-iconm_wangrk
  • iconm_shoudrk
    #icon-iconm_shoudrk
  • iconm_maoyht
    #icon-iconm_maoyht
  • iconm_waimgl
    #icon-iconm_waimgl
  • iconm_sheng
    #icon-iconm_sheng
  • iconm_tongxl
    #icon-iconm_tongxl
  • iconm_shouzls
    #icon-iconm_shouzls
  • iconm_yangpd
    #icon-iconm_yangpd
  • iconm_shengcbg
    #icon-iconm_shengcbg
  • iconm_waixht(1)
    #icon-a-iconm_waixht1
  • iconm_waibtxl
    #icon-iconm_waibtxl
  • iconx_caiggl
    #icon-iconx_caiggl
  • iconm_wodyx
    #icon-iconm_wodyx
  • iconm_wulgl
    #icon-iconm_wulgl
  • iconx_chanpwlk
    #icon-iconx_chanpwlk
  • iconm_wospd
    #icon-iconm_wospd
  • iconm_wangpzl
    #icon-iconm_wangpzl
  • iconm_yangpgd
    #icon-iconm_yangpgd
  • iconm_xiaoxtz
    #icon-iconm_xiaoxtz
  • iconm_zijzh
    #icon-iconm_zijzh
  • iconx_churklsz
    #icon-iconx_churklsz
  • iconx_caiggl(1)
    #icon-a-iconx_caiggl1
  • iconx_baojd
    #icon-iconx_baojd
  • iconm_zijgl
    #icon-iconm_zijgl
  • iconm_wulxx
    #icon-iconm_wulxx
  • iconm_zijrbb
    #icon-iconm_zijrbb
  • iconx_caiwgl
    #icon-iconx_caiwgl
  • iconm_zijgl(1)
    #icon-a-iconm_zijgl1
  • iconx_caiwgl2
    #icon-iconx_caiwgl2
  • iconm_wulfl
    #icon-iconm_wulfl
  • iconm_waixht
    #icon-iconm_waixht
  • iconm_youxsz
    #icon-iconm_youxsz
  • iconx_cangkwh
    #icon-iconx_cangkwh
  • iconx_chuhgl
    #icon-iconx_chuhgl
  • iconx_bangoa
    #icon-iconx_bangoa
  • iconx_kehda
    #icon-iconx_kehda
  • iconx_kucgl
    #icon-iconx_kucgl
  • iconx_lissp
    #icon-iconx_lissp
  • iconx_caig
    #icon-iconx_caig
  • iconx_caigfk
    #icon-iconx_caigfk
  • iconx_chanpfl
    #icon-iconx_chanpfl
  • iconx_dairk
    #icon-iconx_dairk
  • iconx_chanpxx
    #icon-iconx_chanpxx
  • iconm_xianbgl
    #icon-iconm_xianbgl
  • iconx_cangcpz
    #icon-iconx_cangcpz
  • iconx_kehcc
    #icon-iconx_kehcc
  • iconx_gongdgl
    #icon-iconx_gongdgl
  • iconx_daozrl
    #icon-iconx_daozrl
  • iconx_huokzd
    #icon-iconx_huokzd
  • iconx_tongxl
    #icon-iconx_tongxl
  • iconx_guanld
    #icon-iconx_guanld
  • iconx_caiwgl1
    #icon-iconx_caiwgl1
  • iconx_wulfl
    #icon-iconx_wulfl
  • iconx_gongys
    #icon-iconx_gongys
  • iconx_tuihgl
    #icon-iconx_tuihgl
  • iconx_gongh
    #icon-iconx_gongh
  • iconx_liucbl
    #icon-iconx_liucbl
  • iconx_sheng
    #icon-iconx_sheng
  • iconx_liucyq
    #icon-iconx_liucyq
  • iconx_jioay
    #icon-iconx_jioay
  • iconx_daick
    #icon-iconx_daick
  • iconx_youxsz
    #icon-iconx_youxsz
  • iconx_gongswp
    #icon-iconx_gongswp
  • iconx_shencgl(1)
    #icon-a-iconx_shencgl1
  • iconx_liuckz
    #icon-iconx_liuckz
  • iconx_churk
    #icon-iconx_churk
  • iconx_gongyjg
    #icon-iconx_gongyjg
  • iconx_zijgl
    #icon-iconx_zijgl
  • iconx_shencgl
    #icon-iconx_shencgl
  • iconx_fapgl
    #icon-iconx_fapgl
  • iconx_xiaoxitz
    #icon-iconx_xiaoxitz
  • iconx_chanpgl
    #icon-iconx_chanpgl
  • iconx_shoudck
    #icon-iconx_shoudck
  • iconx_wulgl
    #icon-iconx_wulgl
  • icomx_bom
    #icon-icomx_bom
  • iconx_dianzyx
    #icon-iconx_dianzyx
  • iconx_kehd
    #icon-iconx_kehd
  • iconx_gongcgl
    #icon-iconx_gongcgl
  • iconx_cangkcx
    #icon-iconx_cangkcx
  • icomx_chej
    #icon-icomx_chej
  • iconx_kucpd
    #icon-iconx_kucpd
  • icomx_gongzrb
    #icon-icomx_gongzrb
  • icomx_gongzrw
    #icon-icomx_gongzrw
  • iconx_waimgl
    #icon-iconx_waimgl
  • iconx_tuikgl
    #icon-iconx_tuikgl
  • iconx_gongcwh
    #icon-iconx_gongcwh
  • icomx_bumfytj
    #icon-icomx_bumfytj
  • iconx_waixht
    #icon-iconx_waixht
  • iconx_sih
    #icon-iconx_sih
  • icomx_jiaojd
    #icon-icomx_jiaojd
  • iconx_gongzgl
    #icon-iconx_gongzgl
  • icomx_danzgl
    #icon-icomx_danzgl
  • icomx_lirjsb
    #icon-icomx_lirjsb
  • iconx_liucpz
    #icon-iconx_liucpz
  • iconx_shencjh
    #icon-iconx_shencjh
  • iconx_daohzj
    #icon-iconx_daohzj
  • iconx_wospd
    #icon-iconx_wospd
  • iconx_tiaoc
    #icon-iconx_tiaoc
  • iconx_yangpd
    #icon-iconx_yangpd
  • iconx_gendgl
    #icon-iconx_gendgl
  • icomx_neibtxl
    #icon-icomx_neibtxl
  • iconx_zijgl(1)
    #icon-a-iconx_zijgl1
  • icomx_renwzp
    #icon-icomx_renwzp
  • icomx_qingk
    #icon-icomx_qingk
  • icomx_shouzls
    #icon-icomx_shouzls
  • icomx_baozch
    #icon-icomx_baozch
  • icomx_daozdj
    #icon-icomx_daozdj
  • icomx_shengcx
    #icon-icomx_shengcx
  • iconx_kehgl
    #icon-iconx_kehgl
  • icomx_gongzrc
    #icon-icomx_gongzrc
  • iconx_wodyx
    #icon-iconx_wodyx
  • icomx_caiggd
    #icon-icomx_caiggd
  • iconx_shoudrk
    #icon-iconx_shoudrk
  • iconx_wofqd
    #icon-iconx_wofqd
  • iconx_wulxx
    #icon-iconx_wulxx
  • iconx_gongysxx
    #icon-iconx_gongysxx
  • icomx_gongx
    #icon-icomx_gongx
  • icomx_shengcbg
    #icon-icomx_shengcbg
  • icomx_bumfyfx
    #icon-icomx_bumfyfx
  • icomx_zijrbb
    #icon-icomx_zijrbb
  • iconm_bumfytj
    #icon-iconm_bumfytj
  • iconm_bumfyfx
    #icon-iconm_bumfyfx
  • icomx_fuwht
    #icon-icomx_fuwht
  • icomx_gongdgl
    #icon-icomx_gongdgl
  • icomx_shengcjh
    #icon-icomx_shengcjh
  • iconm_chej
    #icon-iconm_chej
  • iconm_caiggd
    #icon-iconm_caiggd
  • icomx_xianbgl
    #icon-icomx_xianbgl
  • iconm_chanpfl
    #icon-iconm_chanpfl
  • iconm_daozrl
    #icon-iconm_daozrl
  • icomx_waibtxl
    #icon-icomx_waibtxl
  • icomx_wangrk
    #icon-icomx_wangrk
  • iconm_bangoa
    #icon-iconm_bangoa
  • iconm_gongswp
    #icon-iconm_gongswp
  • icomx_zijzh
    #icon-icomx_zijzh
  • iconm_cangkwh
    #icon-iconm_cangkwh
  • iconm_caig
    #icon-iconm_caig
  • iconm_daozdj
    #icon-iconm_daozdj
  • iconm_caiggl
    #icon-iconm_caiggl
  • iconm_gongyjg
    #icon-iconm_gongyjg
  • iconm_cangcpz
    #icon-iconm_cangcpz
  • iconm_caiwgl1
    #icon-iconm_caiwgl1
  • iconm_chuhgl
    #icon-iconm_chuhgl
  • iconm_caiggl(1)
    #icon-a-iconm_caiggl1
  • icomx_shengcrw
    #icon-icomx_shengcrw
  • iconm_caiwgl2
    #icon-iconm_caiwgl2
  • iconm_gendgl
    #icon-iconm_gendgl
  • iconm_daohzj
    #icon-iconm_daohzj
  • iconm_cangcgl
    #icon-iconm_cangcgl
  • iconm_gongx
    #icon-iconm_gongx
  • iconm_cangkcx
    #icon-iconm_cangkcx
  • iconm_gongzrw
    #icon-iconm_gongzrw
  • icomx_yangpgd
    #icon-icomx_yangpgd
  • iconm_bom
    #icon-iconm_bom
  • iconm_gongzrb
    #icon-iconm_gongzrb
  • iconm_gongdgl(1)
    #icon-a-iconm_gongdgl1
  • iconm_churk
    #icon-iconm_churk
  • iconm_fuwht
    #icon-iconm_fuwht
  • icomx_lirysb
    #icon-icomx_lirysb
  • iconm_huokzd
    #icon-iconm_huokzd
  • icomx_wangpzl
    #icon-icomx_wangpzl
  • iconm_guanld
    #icon-iconm_guanld
  • iconm_baozch
    #icon-iconm_baozch
  • iconm_kucpd
    #icon-iconm_kucpd
  • iconm_dairk
    #icon-iconm_dairk
  • iconm_kehcc
    #icon-iconm_kehcc
  • iconm_gongcwh
    #icon-iconm_gongcwh
  • iconm_baojd
    #icon-iconm_baojd
  • iconm_kucgl
    #icon-iconm_kucgl
  • iconm_kehda
    #icon-iconm_kehda
  • iconm_gongy
    #icon-iconm_gongy
  • iconm_gongzgl
    #icon-iconm_gongzgl
  • iconm_jiaojd
    #icon-iconm_jiaojd
  • iconm_daick
    #icon-iconm_daick
  • iconm_lirysb
    #icon-iconm_lirysb
  • iconm_liuckz
    #icon-iconm_liuckz
  • iconm_churklsz
    #icon-iconm_churklsz
  • iconm_chanpwlk
    #icon-iconm_chanpwlk
  • iconm_liucpz
    #icon-iconm_liucpz
  • iconm_gongysxx
    #icon-iconm_gongysxx
  • iconm_gongh
    #icon-iconm_gongh
  • iconm_caiwgl
    #icon-iconm_caiwgl
  • iconm_kehgl
    #icon-iconm_kehgl
  • iconm_liucbl
    #icon-iconm_liucbl
  • iconm_fapgl
    #icon-iconm_fapgl
  • iconm_lissp
    #icon-iconm_lissp
  • icomx_dak
    #icon-icomx_dak
  • iconm_chanpgl
    #icon-iconm_chanpgl
  • icomx_waixht
    #icon-icomx_waixht
  • icomx_maoyht
    #icon-icomx_maoyht
  • iconm_chanpxx
    #icon-iconm_chanpxx
  • iconm_liucyq
    #icon-iconm_liucyq
  • iconm_dianzyx
    #icon-iconm_dianzyx
  • iconm_danzgl
    #icon-iconm_danzgl
  • iconm_dak
    #icon-iconm_dak
  • iconm_gongdgl
    #icon-iconm_gongdgl
  • iconm_gongcgl
    #icon-iconm_gongcgl
  • icomx_renwlz
    #icon-icomx_renwlz
  • iconm_gongys
    #icon-iconm_gongys
  • iconm_gongzrc
    #icon-iconm_gongzrc
  • iconm_jioay
    #icon-iconm_jioay
  • iconm_lirjsb
    #icon-iconm_lirjsb
  • iconm_kehd
    #icon-iconm_kehd
  • icon_txl
    #icon-icon_txl
  • icon_kh
    #icon-icon_kh
  • icon_tjfw
    #icon-icon_tjfw
  • icon_gd
    #icon-icon_gd
  • icon_kb
    #icon-icon_kb
  • btn_help
    #icon-btn_help
  • icon_ch
    #icon-icon_ch
  • btn_notice
    #icon-btn_notice
  • btn_Full_screen
    #icon-btn_Full_screen
  • icon_dz
    #icon-icon_dz
  • icon_email
    #icon-icon_email
  • icon_changygn
    #icon-icon_changygn
  • icon_cg
    #icon-icon_cg
  • icon_gwc
    #icon-icon_gwc
  • icon_pz
    #icon-icon_pz
  • icon_jy
    #icon-icon_jy
  • icon_cn
    #icon-icon_cn
  • icon_cw
    #icon-icon_cw
  • icon_jx
    #icon-icon_jx
  • icon_wp
    #icon-icon_wp
  • icon_right
    #icon-icon_right

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>