• 分层配置
    
  • integral
    
  • play
    
  • gift
    
  • office-supplies
    
  • operation
    
  • phone
    
  • print
    
  • invoice
    
  • cascades
    
  • image-text
    
  • packaging
    
  • 砍价
    
  • file done
    
  • shopping
    
  • carry out
    
  • calendar-check
    
  • sound
    
  • mail
    
  • gift
    
  • comment
    
  • Field-time
    
  • certified-supplier
    
  • coupons
    
  • data
    
  • Customer management
    
  • feeds
    
  • New user zone
    
  • trade alert
    
  • top sales
    
  • trading volume
    
  • store
    
  • wallet
    
  • comments
    
  • trading data
    
  • 申请记录
    
  • 中间人
    
  • 账户操作
    
  • 通讯录
    
  • 已关注供应商
    
  • icon_164
    
  • 微信
    
  • icon_59
    
  • 小程序设置
    
  • icon_511
    
  • icon_563
    
  • icon_777
    
  • icon_52
    
  • icon_48
    
  • icon_41
    
  • icon_56
    
  • icon_136
    
  • icon_141
    
  • icon_137
    
  • icon_95
    
  • icon_551
    
  • icon_710
    
  • icon_744
    
  • icon_754
    
  • icon_808
    
  • icon_810
    
  • icon_850
    
  • icon_880
    
  • icon_30
    
  • icon_130
    
  • icon_138
    
  • icon_170
    
  • icon_415
    
  • icon_436
    
  • icon_460
    
  • icon_457
    
  • icon_542
    
  • icon_545
    
  • icon_595
    
  • icon_643
    
  • icon_644
    
  • icon_645
    
  • icon_646
    
  • icon_663
    
  • icon_673
    
  • icon_684
    
  • icon_695
    
  • menu_goods
    
  • menu_sort
    
  • menu_danwei
    
  • menu_pingjia
    
  • menu_pinpai
    
  • menu_gongyingshang
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • 分层配置
    .icon_kdzs_mdsz
  • integral
    .icon_xpdy_mbgl
  • play
    .icon_xcxzb_zb
  • gift
    .icon_xycj_cj
  • office-supplies
    .icon_kdzs_fjrmb
  • operation
    .operation
  • phone
    .icon_pcshop
  • print
    .icon_xpdy_dyjgl
  • invoice
    .icon_kdzs_pldy
  • cascades
    .icon_kdzs_mdmb
  • image-text
    .icon_qudao_h5
  • packaging
    .icon_fenxiao_goods
  • 砍价
    .icon_kanjia
  • file done
    .icon_hexiao_order
  • shopping
    .icon_pintuan
  • carry out
    .carryout
  • calendar-check
    .icon_qiandao_jilu
  • sound
    .icon_notice
  • mail
    .icon_notice_mail
  • gift
    .gift
  • comment
    .icon_notice_buyer
  • Field-time
    .Field-time
  • certified-supplier
    .icon_hexiao_member2
  • coupons
    .icon_coupons
  • data
    .icon_coupons_data
  • Customer management
    .icon_fenxiao_member
  • feeds
    .icon_qiandao_guize
  • New user zone
    .icon_pintuan2
  • trade alert
    .icon_notice_seller
  • top sales
    .icon_pintuan_data
  • trading volume
    .icon_fenxiao_data
  • store
    .icon_ziti_store
  • wallet
    .wallet
  • comments
    .icon_kefu_comments
  • trading data
    .tradingdata
  • 申请记录
    .icon_fenxiao_order
  • 中间人
    .icon_hexiao_member
  • 账户操作
    .icon_fenxiao_set
  • 通讯录
    .icon_fenxiao_grade
  • 已关注供应商
    .yiguanzhugongyingshang
  • icon_164
    .icon_user_gaikuang
  • 微信
    .icon_qudao_weixin
  • icon_59
    .icon_qudao_app
  • 小程序设置
    .icon_qudao_xiaochengxu
  • icon_511
    .icon_dianpu_daohang
  • icon_563
    .icon_yingxiao_qipao
  • icon_777
    .icon_set_jiaoyi
  • icon_52
    .icon_caiwu_yue
  • icon_48
    .icon_caiwu_tixian
  • icon_41
    .icon_caiwu_jifen
  • icon_56
    .icon_shuju_liuliang
  • icon_136
    .icon_user_dengji
  • icon_141
    .icon_user_guanli
  • icon_137
    .icon_user_biaoqian
  • icon_95
    .icon_order_shouhou
  • icon_551
    .icon_copy
  • icon_710
    .icon_set_product
  • icon_744
    .icon_set_save
  • icon_754
    .icon_dianpu_fenlei
  • icon_808
    .icon_dianpu_fengge
  • icon_810
    .icon_dianpu_sucai
  • icon_850
    .icon_dianpu_xiangqing
  • icon_880
    .icon_order_guanli
  • icon_30
    .icon_caiwu
  • icon_130
    .icon_user
  • icon_138
    .icon_set_user
  • icon_170
    .icon_shuju
  • icon_415
    .icon_dianpu_home
  • icon_436
    .icon_yingyongcenter
  • icon_460
    .icon_qudao
  • icon_457
    .icon_qudao2
  • icon_542
    .icon_set_store
  • icon_545
    .icon_dianpu_weiyem
  • icon_595
    .icon_set_quanxian
  • icon_643
    .icon_hide
  • icon_644
    .icon_show
  • icon_645
    .icon_wallet
  • icon_646
    .icon_set_pay
  • icon_663
    .icon_set_weihu
  • icon_673
    .icon_set_peisong
  • icon_684
    .icon_yingxiaowf
  • icon_695
    .icon_dianpu_shoppingCar
  • menu_goods
    .icon_goods
  • menu_sort
    .icon_sort
  • menu_danwei
    .icon_danwei
  • menu_pingjia
    .icon_pingjia
  • menu_pinpai
    .icon_pinpai
  • menu_gongyingshang
    .icon_gongyingshang

font-class 引用


font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。

与 Unicode 使用方式相比,具有如下特点:

  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。

使用步骤如下:

第一步:引入项目下面生成的 fontclass 代码:

<link rel="stylesheet" href="./iconfont.css">

第二步:挑选相应图标并获取类名,应用于页面:

<span class="iconfont xxx"></span>

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

  • 分层配置
    #icon_kdzs_mdsz
  • integral
    #icon_xpdy_mbgl
  • play
    #icon_xcxzb_zb
  • gift
    #icon_xycj_cj
  • office-supplies
    #icon_kdzs_fjrmb
  • operation
    #operation
  • phone
    #icon_pcshop
  • print
    #icon_xpdy_dyjgl
  • invoice
    #icon_kdzs_pldy
  • cascades
    #icon_kdzs_mdmb
  • image-text
    #icon_qudao_h5
  • packaging
    #icon_fenxiao_goods
  • 砍价
    #icon_kanjia
  • file done
    #icon_hexiao_order
  • shopping
    #icon_pintuan
  • carry out
    #carryout
  • calendar-check
    #icon_qiandao_jilu
  • sound
    #icon_notice
  • mail
    #icon_notice_mail
  • gift
    #gift
  • comment
    #icon_notice_buyer
  • Field-time
    #Field-time
  • certified-supplier
    #icon_hexiao_member2
  • coupons
    #icon_coupons
  • data
    #icon_coupons_data
  • Customer management
    #icon_fenxiao_member
  • feeds
    #icon_qiandao_guize
  • New user zone
    #icon_pintuan2
  • trade alert
    #icon_notice_seller
  • top sales
    #icon_pintuan_data
  • trading volume
    #icon_fenxiao_data
  • store
    #icon_ziti_store
  • wallet
    #wallet
  • comments
    #icon_kefu_comments
  • trading data
    #tradingdata
  • 申请记录
    #icon_fenxiao_order
  • 中间人
    #icon_hexiao_member
  • 账户操作
    #icon_fenxiao_set
  • 通讯录
    #icon_fenxiao_grade
  • 已关注供应商
    #yiguanzhugongyingshang
  • icon_164
    #icon_user_gaikuang
  • 微信
    #icon_qudao_weixin
  • icon_59
    #icon_qudao_app
  • 小程序设置
    #icon_qudao_xiaochengxu
  • icon_511
    #icon_dianpu_daohang
  • icon_563
    #icon_yingxiao_qipao
  • icon_777
    #icon_set_jiaoyi
  • icon_52
    #icon_caiwu_yue
  • icon_48
    #icon_caiwu_tixian
  • icon_41
    #icon_caiwu_jifen
  • icon_56
    #icon_shuju_liuliang
  • icon_136
    #icon_user_dengji
  • icon_141
    #icon_user_guanli
  • icon_137
    #icon_user_biaoqian
  • icon_95
    #icon_order_shouhou
  • icon_551
    #icon_copy
  • icon_710
    #icon_set_product
  • icon_744
    #icon_set_save
  • icon_754
    #icon_dianpu_fenlei
  • icon_808
    #icon_dianpu_fengge
  • icon_810
    #icon_dianpu_sucai
  • icon_850
    #icon_dianpu_xiangqing
  • icon_880
    #icon_order_guanli
  • icon_30
    #icon_caiwu
  • icon_130
    #icon_user
  • icon_138
    #icon_set_user
  • icon_170
    #icon_shuju
  • icon_415
    #icon_dianpu_home
  • icon_436
    #icon_yingyongcenter
  • icon_460
    #icon_qudao
  • icon_457
    #icon_qudao2
  • icon_542
    #icon_set_store
  • icon_545
    #icon_dianpu_weiyem
  • icon_595
    #icon_set_quanxian
  • icon_643
    #icon_hide
  • icon_644
    #icon_show
  • icon_645
    #icon_wallet
  • icon_646
    #icon_set_pay
  • icon_663
    #icon_set_weihu
  • icon_673
    #icon_set_peisong
  • icon_684
    #icon_yingxiaowf
  • icon_695
    #icon_dianpu_shoppingCar
  • menu_goods
    #icon_goods
  • menu_sort
    #icon_sort
  • menu_danwei
    #icon_danwei
  • menu_pingjia
    #icon_pingjia
  • menu_pinpai
    #icon_pinpai
  • menu_gongyingshang
    #icon_gongyingshang

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>