• 结算
    
  • 结算报表
    
  • 结算单
    
  • 结算管理
    
  • 返利规则
    
  • 月结
    
  • 结算单管理
    
  • 月结管理
    
  • 智慧销售
    
  • 智慧销售管理
    
  • 后端商品毛利
    
  • 成本查询
    
  • 流量
    
  • 供应商
    
  • 分销商
    
  • 人群
    
  • 人群管理
    
  • 分销商结算
    
  • 商家数据
    
  • 搜索
    
  • 协同
    
  • 招商
    
  • 商品
    
  • 单据
    
  • 工具箱
    
  • 
  • 平台
    
  • 经销
    
  • 资源
    
  • 
  • 用户
    
  • 安全
    
  • 数据
    
  • 疑问
    
  • 调拨
    
  • 用户管理
    
  • 商家管理
    
  • 分销商管理
    
  • 商家
    
  • 供应商管理
    
  • 商品管理
    
  • 商品复制
    
  • 采购单
    
  • 采购价管理
    
  • 定价
    
  • 结算报表
    
  • 入库
    
  • 库存管理
    
  • 出入库管理
    
  • 退仓管理
    
  • 合同
    
  • 商品计划
    
  • 销量计划
    
  • 销量实时看板
    
  • 结算效率分析
    
  • 营销流量配置
    
  • 运营工具
    
  • 目标管理
    
  • 目标制定
    
  • 活动协同
    
  • 目标监控
    
  • 增值服务
    
  • 全链路可售
    
  • 超级服务
    
  • 上门取货
    
  • 定位
    
  • 预约
    
  • 物流
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1718867101197') format('woff2'),
       url('iconfont.woff?t=1718867101197') format('woff'),
       url('iconfont.ttf?t=1718867101197') 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-RectangleCopy48
  • 结算报表
    .icon-RectangleCopy52
  • 结算单
    .icon-RectangleCopy55
  • 结算管理
    .icon-RectangleCopy56
  • 返利规则
    .icon-RectangleCopy57
  • 月结
    .icon-RectangleCopy58
  • 结算单管理
    .icon-RectangleCopy61
  • 月结管理
    .icon-RectangleCopy62
  • 智慧销售
    .icon-RectangleCopy63
  • 智慧销售管理
    .icon-RectangleCopy64
  • 后端商品毛利
    .icon-RectangleCopy65
  • 成本查询
    .icon-RectangleCopy66
  • 流量
    .icon-RectangleCopy49
  • 供应商
    .icon-RectangleCopy50
  • 分销商
    .icon-RectangleCopy51
  • 人群
    .icon-RectangleCopy53
  • 人群管理
    .icon-RectangleCopy54
  • 分销商结算
    .icon-RectangleCopy59
  • 商家数据
    .icon-RectangleCopy60
  • 搜索
    .icon-RectangleCopy37
  • 协同
    .icon-RectangleCopy38
  • 招商
    .icon-RectangleCopy39
  • 商品
    .icon-RectangleCopy40
  • 单据
    .icon-RectangleCopy41
  • 工具箱
    .icon-RectangleCopy42
  • .icon-RectangleCopy43
  • 平台
    .icon-RectangleCopy44
  • 经销
    .icon-RectangleCopy45
  • 资源
    .icon-RectangleCopy46
  • .icon-RectangleCopy47
  • 用户
    .icon-RectangleCopy
  • 安全
    .icon-RectangleCopy1
  • 数据
    .icon-RectangleCopy2
  • 疑问
    .icon-RectangleCopy3
  • 调拨
    .icon-RectangleCopy4
  • 用户管理
    .icon-RectangleCopy5
  • 商家管理
    .icon-RectangleCopy6
  • 分销商管理
    .icon-RectangleCopy7
  • 商家
    .icon-RectangleCopy8
  • 供应商管理
    .icon-RectangleCopy9
  • 商品管理
    .icon-RectangleCopy10
  • 商品复制
    .icon-RectangleCopy11
  • 采购单
    .icon-RectangleCopy12
  • 采购价管理
    .icon-RectangleCopy13
  • 定价
    .icon-RectangleCopy14
  • 结算报表
    .icon-RectangleCopy15
  • 入库
    .icon-RectangleCopy16
  • 库存管理
    .icon-RectangleCopy17
  • 出入库管理
    .icon-RectangleCopy18
  • 退仓管理
    .icon-RectangleCopy19
  • 合同
    .icon-RectangleCopy20
  • 商品计划
    .icon-RectangleCopy21
  • 销量计划
    .icon-RectangleCopy22
  • 销量实时看板
    .icon-RectangleCopy23
  • 结算效率分析
    .icon-RectangleCopy24
  • 营销流量配置
    .icon-RectangleCopy25
  • 运营工具
    .icon-RectangleCopy26
  • 目标管理
    .icon-RectangleCopy27
  • 目标制定
    .icon-RectangleCopy28
  • 活动协同
    .icon-RectangleCopy29
  • 目标监控
    .icon-RectangleCopy30
  • 增值服务
    .icon-RectangleCopy31
  • 全链路可售
    .icon-RectangleCopy32
  • 超级服务
    .icon-RectangleCopy33
  • 上门取货
    .icon-RectangleCopy34
  • 定位
    .icon-dingwei
  • 预约
    .icon-RectangleCopy35
  • 物流
    .icon-RectangleCopy36

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

  • 结算
    #icon-RectangleCopy48
  • 结算报表
    #icon-RectangleCopy52
  • 结算单
    #icon-RectangleCopy55
  • 结算管理
    #icon-RectangleCopy56
  • 返利规则
    #icon-RectangleCopy57
  • 月结
    #icon-RectangleCopy58
  • 结算单管理
    #icon-RectangleCopy61
  • 月结管理
    #icon-RectangleCopy62
  • 智慧销售
    #icon-RectangleCopy63
  • 智慧销售管理
    #icon-RectangleCopy64
  • 后端商品毛利
    #icon-RectangleCopy65
  • 成本查询
    #icon-RectangleCopy66
  • 流量
    #icon-RectangleCopy49
  • 供应商
    #icon-RectangleCopy50
  • 分销商
    #icon-RectangleCopy51
  • 人群
    #icon-RectangleCopy53
  • 人群管理
    #icon-RectangleCopy54
  • 分销商结算
    #icon-RectangleCopy59
  • 商家数据
    #icon-RectangleCopy60
  • 搜索
    #icon-RectangleCopy37
  • 协同
    #icon-RectangleCopy38
  • 招商
    #icon-RectangleCopy39
  • 商品
    #icon-RectangleCopy40
  • 单据
    #icon-RectangleCopy41
  • 工具箱
    #icon-RectangleCopy42
  • #icon-RectangleCopy43
  • 平台
    #icon-RectangleCopy44
  • 经销
    #icon-RectangleCopy45
  • 资源
    #icon-RectangleCopy46
  • #icon-RectangleCopy47
  • 用户
    #icon-RectangleCopy
  • 安全
    #icon-RectangleCopy1
  • 数据
    #icon-RectangleCopy2
  • 疑问
    #icon-RectangleCopy3
  • 调拨
    #icon-RectangleCopy4
  • 用户管理
    #icon-RectangleCopy5
  • 商家管理
    #icon-RectangleCopy6
  • 分销商管理
    #icon-RectangleCopy7
  • 商家
    #icon-RectangleCopy8
  • 供应商管理
    #icon-RectangleCopy9
  • 商品管理
    #icon-RectangleCopy10
  • 商品复制
    #icon-RectangleCopy11
  • 采购单
    #icon-RectangleCopy12
  • 采购价管理
    #icon-RectangleCopy13
  • 定价
    #icon-RectangleCopy14
  • 结算报表
    #icon-RectangleCopy15
  • 入库
    #icon-RectangleCopy16
  • 库存管理
    #icon-RectangleCopy17
  • 出入库管理
    #icon-RectangleCopy18
  • 退仓管理
    #icon-RectangleCopy19
  • 合同
    #icon-RectangleCopy20
  • 商品计划
    #icon-RectangleCopy21
  • 销量计划
    #icon-RectangleCopy22
  • 销量实时看板
    #icon-RectangleCopy23
  • 结算效率分析
    #icon-RectangleCopy24
  • 营销流量配置
    #icon-RectangleCopy25
  • 运营工具
    #icon-RectangleCopy26
  • 目标管理
    #icon-RectangleCopy27
  • 目标制定
    #icon-RectangleCopy28
  • 活动协同
    #icon-RectangleCopy29
  • 目标监控
    #icon-RectangleCopy30
  • 增值服务
    #icon-RectangleCopy31
  • 全链路可售
    #icon-RectangleCopy32
  • 超级服务
    #icon-RectangleCopy33
  • 上门取货
    #icon-RectangleCopy34
  • 定位
    #icon-dingwei
  • 预约
    #icon-RectangleCopy35
  • 物流
    #icon-RectangleCopy36

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>