• 运单查询
    
  • 运单打印
    
  • 智能质检
    
  • 售后管理设置
    
  • 售后
    
  • 售后
    
  • 黑名单
    
  • 供应商
    
  • 建议
    
  • 供应商管理
    
  • 供应商管理
    
  • 组合
    
  • 采购
    
  • 售后管理
    
  • 供应商管理
    
  • 建议
    
  • 权限管理
    
  • 组合
    
  • 建议
    
  • 售后管理
    
  • 采购
    
  • 管理后台tab-权限管理
    
  • 售后管理
    
  • 采购
    
  • 智能匹配(正)
    
  • 盘点
    
  • 运单
    
  • 打印运单
    
  • 库存
    
  • 工作流程
    
  • 智能匹配
    
  • 质检
    
  • 工作流程
    
  • 智能匹配@3x
    
  • OA工作流程-icon_workflow
    
  • 质检
    
  • 定制
    
  • 效率
    
  • 错误信息
    
  • 数据安全
    
  • 定制
    
  • 存货
    
  • 存货公示
    
  • 错误信息
    
  • 更新
    
  • 存货
    
  • 更新
    
  • 运营
    
  • 营销
    
  • 错误处理
    
  • 数据安全
    
  • 微服务
    
  • 更新
    
  • 定制
    
  • 微服务治理平台
    
  • 错误日志
    
  • 定制
    
  • 营销
    
  • 人工成本高
    
  • 微服务
    
  • 效率
    
  • 定制
    
  • 微服务平台
    
  • 微服务2
    
  • 定制
    
  • 劳动力
    
  • 数据安全
    
  • erp
    
  • ERP
    
  • erp
    
  • ERP
    
  • 升级
    
  • erp
    
  • erp
    
  • 升级
    
  • 升级
    
  • 升级
    
  • WMS
    
  • 升级
    
  • wms
    
  • facebook
    
  • youtube
    
  • 引号
    
  • 仓库
    
  • 客户
    
  • 客户
    
  • 客户
    
  • 仓库
    
  • 仓库
    
  • 客户
    
  • 客户
    
  • 仓库
    
  • 仓库
    
  • 客户
    
  • 仓库
    
  • 完成
    
  • 验证码
    
  • 手机
    
  • 提示
    
  • 眼睛 闭
    
  • 眼睛 (开)
    
  • 
  • 用户
    
  • 邮件
    
  • 店铺
    
  • 发货装箱
    
  • icon2_店铺管理
    
  • 店铺
    
  • 店铺
    
  • 发货
    
  • 购物车
    
  • 店铺
    
  • 打印
    
  • 无用-默认
    
  • 有用-默认
    
  • 右箭头
    
  • 左箭头
    
  • 双箭头
    
  • 完成
    
  • API
    
  • 云服务
    
  • 数据分析
    
  • 库存
    
  • api
    
  • 商品复制
    
  • 加密
    
  • 会员
    
  • 完成
    
  • 库存
    
  • 订单管理
    
  • 渠道
    
  • 数据分析
    
  • 数据
    
  • 订单管理
    
  • 商品管理
    
  • 会员
    
  • 官方
    

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

  • 运单查询
    .icon-yundanchaxun
  • 运单打印
    .icon-yundandayin
  • 智能质检
    .icon-zhinengzhijian
  • 售后管理设置
    .icon-shouhouguanlishezhi
  • 售后
    .icon-shouhou
  • 售后
    .icon-shouhou1
  • 黑名单
    .icon-heimingdan
  • 供应商
    .icon-gongyingshang
  • 建议
    .icon-jianyi
  • 供应商管理
    .icon-gongyingshangguanli
  • 供应商管理
    .icon-gongyingshangguanli1
  • 组合
    .icon-zuhe
  • 采购
    .icon-caigou1
  • 售后管理
    .icon-shouhouguanli
  • 供应商管理
    .icon-gongyingshangguanli2
  • 建议
    .icon-jianyifuzhi
  • 权限管理
    .icon-quanxianguanli
  • 组合
    .icon-zuhe1
  • 建议
    .icon-jianyi1
  • 售后管理
    .icon-shouhouguanli1
  • 采购
    .icon-caigou2
  • 管理后台tab-权限管理
    .icon-quanxianguanli1
  • 售后管理
    .icon-shouhouguanli2
  • 采购
    .icon-portalCg
  • 智能匹配(正)
    .icon-zhinengpipeizheng
  • 盘点
    .icon-pandian
  • 运单
    .icon-icon
  • 打印运单
    .icon-dayinyundan
  • 库存
    .icon-kucun1
  • 工作流程
    .icon-gongzuoliucheng
  • 智能匹配
    .icon-zhinengpipei
  • 质检
    .icon-zhijian
  • 工作流程
    .icon-gongzuoliucheng1
  • 智能匹配@3x
    .icon-zhinengpipei3x
  • OA工作流程-icon_workflow
    .icon-OAgongzuoliucheng-icon_workflow
  • 质检
    .icon-zhijian1
  • 定制
    .icon-dingzhi
  • 效率
    .icon-tishengxiaoshuai
  • 错误信息
    .icon-cuowuxinxi
  • 数据安全
    .icon-shujuanquan
  • 定制
    .icon-dingzhi1
  • 存货
    .icon-cunhuo
  • 存货公示
    .icon-cunhuogongshi
  • 错误信息
    .icon-wrong
  • 更新
    .icon-gengxin
  • 存货
    .icon-cunhuo1
  • 更新
    .icon-gengxin1
  • 运营
    .icon-yunying
  • 营销
    .icon-yingxiao-
  • 错误处理
    .icon-cuowuchuli
  • 数据安全
    .icon-shujuanquan1
  • 微服务
    .icon-weifuwu
  • 更新
    .icon-gengxin2
  • 定制
    .icon-dingzhi2
  • 微服务治理平台
    .icon-icon_MicroservicesManagementPlatform
  • 错误日志
    .icon-cuowurizhi
  • 定制
    .icon-dingzhi3
  • 营销
    .icon-yingxiao
  • 人工成本高
    .icon-rengongchengbengao
  • 微服务
    .icon-weifuwu1
  • 效率
    .icon-xiaoshuai
  • 定制
    .icon-dingzhi4
  • 微服务平台
    .icon-weifuwupingtai
  • 微服务2
    .icon-weifuwu2
  • 定制
    .icon-custom
  • 劳动力
    .icon-laodongli
  • 数据安全
    .icon-shujuanquan2
  • erp
    .icon-erp1
  • ERP
    .icon-ERP1
  • erp
    .icon-erp2
  • ERP
    .icon-ERP2
  • 升级
    .icon-shengji4
  • erp
    .icon-erp
  • erp
    .icon-ERP
  • 升级
    .icon-shengji
  • 升级
    .icon-shengji1
  • 升级
    .icon-shengji2
  • WMS
    .icon-WMS
  • 升级
    .icon-shengji3
  • wms
    .icon-wms
  • facebook
    .icon-facebook
  • youtube
    .icon-youtube
  • 引号
    .icon-yinhao
  • 仓库
    .icon-cangku
  • 客户
    .icon-kehu
  • 客户
    .icon-qian
  • 客户
    .icon-kehu1
  • 仓库
    .icon-cangku1
  • 仓库
    .icon-cangku2
  • 客户
    .icon-kehu2
  • 客户
    .icon-kehu11
  • 仓库
    .icon-cangku3
  • 仓库
    .icon-cangku4
  • 客户
    .icon-kehu3
  • 仓库
    .icon-cangku11
  • 完成
    .icon-wancheng1
  • 验证码
    .icon-yanzhengma
  • 手机
    .icon-shouji
  • 提示
    .icon-tishi
  • 眼睛 闭
    .icon-yanjingbi
  • 眼睛 (开)
    .icon-yanjingkai
  • .icon-suo
  • 用户
    .icon-yonghu
  • 邮件
    .icon-youjian
  • 店铺
    .icon-dianpu3
  • 发货装箱
    .icon-fahuozhuangxiang
  • icon2_店铺管理
    .icon-icon_dianpuguanli
  • 店铺
    .icon-dianpu2
  • 店铺
    .icon-dianpu4
  • 发货
    .icon-yifahuo
  • 购物车
    .icon-gouwuche1
  • 店铺
    .icon-dianpu
  • 打印
    .icon-dayin
  • 无用-默认
    .icon-wuyong-moren
  • 有用-默认
    .icon-youyong-moren
  • 右箭头
    .icon-right
  • 左箭头
    .icon-left
  • 双箭头
    .icon-arrowdb-r
  • 完成
    .icon-icon89
  • API
    .icon-API
  • 云服务
    .icon-yunfuwu
  • 数据分析
    .icon-shujufenxi
  • 库存
    .icon-kucun
  • api
    .icon-api
  • 商品复制
    .icon-RectangleCopy
  • 加密
    .icon-jiami
  • 会员
    .icon-huiyuan
  • 完成
    .icon-wancheng
  • 库存
    .icon-kucunweb
  • 订单管理
    .icon-dingdanguanli
  • 渠道
    .icon-molecule
  • 数据分析
    .icon-dataAnalysis
  • 数据
    .icon-shuju
  • 订单管理
    .icon-dingdanguanli1
  • 商品管理
    .icon-shangpinkuleimu
  • 会员
    .icon-huiyuan1
  • 官方
    .icon-guanfang

font-class 引用


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

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

  • 兼容性良好,支持 IE8+,及所有现代浏览器。
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

使用步骤如下:

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

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

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

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

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

  • 运单查询
    #icon-yundanchaxun
  • 运单打印
    #icon-yundandayin
  • 智能质检
    #icon-zhinengzhijian
  • 售后管理设置
    #icon-shouhouguanlishezhi
  • 售后
    #icon-shouhou
  • 售后
    #icon-shouhou1
  • 黑名单
    #icon-heimingdan
  • 供应商
    #icon-gongyingshang
  • 建议
    #icon-jianyi
  • 供应商管理
    #icon-gongyingshangguanli
  • 供应商管理
    #icon-gongyingshangguanli1
  • 组合
    #icon-zuhe
  • 采购
    #icon-caigou1
  • 售后管理
    #icon-shouhouguanli
  • 供应商管理
    #icon-gongyingshangguanli2
  • 建议
    #icon-jianyifuzhi
  • 权限管理
    #icon-quanxianguanli
  • 组合
    #icon-zuhe1
  • 建议
    #icon-jianyi1
  • 售后管理
    #icon-shouhouguanli1
  • 采购
    #icon-caigou2
  • 管理后台tab-权限管理
    #icon-quanxianguanli1
  • 售后管理
    #icon-shouhouguanli2
  • 采购
    #icon-portalCg
  • 智能匹配(正)
    #icon-zhinengpipeizheng
  • 盘点
    #icon-pandian
  • 运单
    #icon-icon
  • 打印运单
    #icon-dayinyundan
  • 库存
    #icon-kucun1
  • 工作流程
    #icon-gongzuoliucheng
  • 智能匹配
    #icon-zhinengpipei
  • 质检
    #icon-zhijian
  • 工作流程
    #icon-gongzuoliucheng1
  • 智能匹配@3x
    #icon-zhinengpipei3x
  • OA工作流程-icon_workflow
    #icon-OAgongzuoliucheng-icon_workflow
  • 质检
    #icon-zhijian1
  • 定制
    #icon-dingzhi
  • 效率
    #icon-tishengxiaoshuai
  • 错误信息
    #icon-cuowuxinxi
  • 数据安全
    #icon-shujuanquan
  • 定制
    #icon-dingzhi1
  • 存货
    #icon-cunhuo
  • 存货公示
    #icon-cunhuogongshi
  • 错误信息
    #icon-wrong
  • 更新
    #icon-gengxin
  • 存货
    #icon-cunhuo1
  • 更新
    #icon-gengxin1
  • 运营
    #icon-yunying
  • 营销
    #icon-yingxiao-
  • 错误处理
    #icon-cuowuchuli
  • 数据安全
    #icon-shujuanquan1
  • 微服务
    #icon-weifuwu
  • 更新
    #icon-gengxin2
  • 定制
    #icon-dingzhi2
  • 微服务治理平台
    #icon-icon_MicroservicesManagementPlatform
  • 错误日志
    #icon-cuowurizhi
  • 定制
    #icon-dingzhi3
  • 营销
    #icon-yingxiao
  • 人工成本高
    #icon-rengongchengbengao
  • 微服务
    #icon-weifuwu1
  • 效率
    #icon-xiaoshuai
  • 定制
    #icon-dingzhi4
  • 微服务平台
    #icon-weifuwupingtai
  • 微服务2
    #icon-weifuwu2
  • 定制
    #icon-custom
  • 劳动力
    #icon-laodongli
  • 数据安全
    #icon-shujuanquan2
  • erp
    #icon-erp1
  • ERP
    #icon-ERP1
  • erp
    #icon-erp2
  • ERP
    #icon-ERP2
  • 升级
    #icon-shengji4
  • erp
    #icon-erp
  • erp
    #icon-ERP
  • 升级
    #icon-shengji
  • 升级
    #icon-shengji1
  • 升级
    #icon-shengji2
  • WMS
    #icon-WMS
  • 升级
    #icon-shengji3
  • wms
    #icon-wms
  • facebook
    #icon-facebook
  • youtube
    #icon-youtube
  • 引号
    #icon-yinhao
  • 仓库
    #icon-cangku
  • 客户
    #icon-kehu
  • 客户
    #icon-qian
  • 客户
    #icon-kehu1
  • 仓库
    #icon-cangku1
  • 仓库
    #icon-cangku2
  • 客户
    #icon-kehu2
  • 客户
    #icon-kehu11
  • 仓库
    #icon-cangku3
  • 仓库
    #icon-cangku4
  • 客户
    #icon-kehu3
  • 仓库
    #icon-cangku11
  • 完成
    #icon-wancheng1
  • 验证码
    #icon-yanzhengma
  • 手机
    #icon-shouji
  • 提示
    #icon-tishi
  • 眼睛 闭
    #icon-yanjingbi
  • 眼睛 (开)
    #icon-yanjingkai
  • #icon-suo
  • 用户
    #icon-yonghu
  • 邮件
    #icon-youjian
  • 店铺
    #icon-dianpu3
  • 发货装箱
    #icon-fahuozhuangxiang
  • icon2_店铺管理
    #icon-icon_dianpuguanli
  • 店铺
    #icon-dianpu2
  • 店铺
    #icon-dianpu4
  • 发货
    #icon-yifahuo
  • 购物车
    #icon-gouwuche1
  • 店铺
    #icon-dianpu
  • 打印
    #icon-dayin
  • 无用-默认
    #icon-wuyong-moren
  • 有用-默认
    #icon-youyong-moren
  • 右箭头
    #icon-right
  • 左箭头
    #icon-left
  • 双箭头
    #icon-arrowdb-r
  • 完成
    #icon-icon89
  • API
    #icon-API
  • 云服务
    #icon-yunfuwu
  • 数据分析
    #icon-shujufenxi
  • 库存
    #icon-kucun
  • api
    #icon-api
  • 商品复制
    #icon-RectangleCopy
  • 加密
    #icon-jiami
  • 会员
    #icon-huiyuan
  • 完成
    #icon-wancheng
  • 库存
    #icon-kucunweb
  • 订单管理
    #icon-dingdanguanli
  • 渠道
    #icon-molecule
  • 数据分析
    #icon-dataAnalysis
  • 数据
    #icon-shuju
  • 订单管理
    #icon-dingdanguanli1
  • 商品管理
    #icon-shangpinkuleimu
  • 会员
    #icon-huiyuan1
  • 官方
    #icon-guanfang

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>