• 列表设置
    
  • 附件
    
  • works
    
  • prod
    
  • quyu
    
  • hanshu
    
  • 应付管理
    
  • 字段变更
    
  • 试机
    
  • 基础设置
    
  • 要货管理
    
  • 帮 助
    
  • 零售管理
    
  • U商城
    
  • 库存管理
    
  • 会员管理
    
  • 商品管理
    
  • 首页
    
  • 客商档案
    
  • 浏览态-新增
    
  • 机构人员
    
  • 商品中心
    
  • 1:1
    
  • 系统设置
    
  • 其它档案
    
  • 用户及角色
    
  • 屏幕适用
    
  • 联网
    
  • 库存云LOGO
    
  • 替换
    
  • 大图
    
  • 感叹号
    
  • 切换小写
    
  • 切换大写
    
  • 暂停
    
  • 播放
    
  • 关闭
    
  • 音乐
    
  • 质量信息
    
  • 组织单元
    
  • 成本计算
    
  • 友零售
    
  • 留言
    
  • 收起全屏
    
  • 联动下级
    
  • 减少数量
    
  • 设备
    
  • 添加数量
    
  • 定位
    
  • 零件
    
  • 右半圆
    
  • 编辑
    
  • 左半圆
    
  • 启用
    
  • 停用
    
  • 重置
    
  • 搜索
    
  • 删除一个数字
    
  • 参照
    
  • 日期
    
  • 加载 (2)
    
  • 业务监管
    
  • 警示提示
    
  • 失败提示
    
  • 常规提示
    
  • 
  • 成功提示
    
  • 
  • 
  • 
  • 星_虚
    
  • 
  • 1
    
  • 修改密码
    
  • 3
    
  • 退出登录
    
  • 4
    
  • 增加redline
    
  • 个人信息
    
  • 5
    
  • 增加greyline
    
  • 删除
    
  • 2
    
  • 购物车redline
    
  • 购物车greyline
    
  • 查询
    
  • 虚拟组织
    
  • 
  • 下拉
    
  • 版本变更
    
  • 
  • 店内加工
    
  • 问号 默认
    
  • 向左
    
  • 复制
    
  • 向右
    
  • 多语言
    
  • 筛选
    
  • 笑脸
    
  • 筛选
    
  • 收起
    
  • 展开
    
  • 基础服务设置
    
  • 关 闭
    
  • 刷新
    
  • 友零售logo
    
  • 通知信息
    
  • 返回
    
  • logo
    
  • 选择商品
    
  • logo加文字
    
  • 
  • 表格删除悬停
    
  • 
  • 表格删除
    
  • 输入框删除
    
  • 解锁-确定
    
  • 向下
    
  • 业务档案
    
  • 返回
    
  • 浏览态-编辑-不可用
    
  • 浏览态-删除-不可用
    
  • 浏览态-新增-不可用
    
  • 浏览态-导出-不可用
    
  • 浏览态-导入-不可用
    
  • 浏览态-联查-不可用
    
  • 浏览态-变更-不可用
    
  • 浏览态-打印-不可用
    
  • 冻结
    
  • 浏览态-提交-不可用
    
  • 未冻结
    
  • 浏览态-新增
    
  • 返回
    
  • 向左
    
  • 向右
    
  • 
  • 
  • 浏览态-恢复默认-不可用
    
  • 预订管理
    
  • 浏览态-关闭
    
  • 浏览态-入库
    
  • 隐藏
    
  • 显示图片
    
  • 可见
    
  • 浏览态-保存业务对象-不可用
    
  • 选中
    
  • 浏览态-库存查询-不可用
    
  • 浏览态-日报-不可用
    
  • 浏览态-复核-不可用
    
  • 浏览态-复盘-不可用
    
  • 拖动
    
  • 公告设置
    
  • 浏览态-出库-不可用
    
  • 浏览态-弃审-不可用
    
  • 确定签名
    
  • 二维码
    
  • 清除签名
    
  • 快速
    
  • 常用功能设置
    
  • 
  • 
  • 键盘
    
  • 键盘
    
  • 重置
    
  • 撤销
    
  • 下 拉
    
  • 智能外设
    
  • 系统设置
    
  • 营销流程
    
  • 客户管理
    
  • 客户运营
    
  • 寄存管理
    
  • 聊天
    
  • 最大化
    
  • 最小化
    
  • 已审核
    
  • 已驳回
    
  • 待审核
    
  • 已提交
    
  • 未提交
    
  • 用药安全
    
  • 健康管理
    
  • 慢病管理
    
  • 返回
    
  • 地址
    
  • 触屏更多
    
  • 切换PC-灰色
    
  • 成功
    
  • 失败
    
  • 实盘录入
    
  • 盘点计划
    
  • 盘点复核
    
  • 表格删除悬停
    
  • 进度箭头
    
  • 秒3
    
  • 秒1
    
  • 智能POS
    
  • 手机
    
  • 机器人
    
  • 电脑
    
  • 返回顶部
    
  • 报表统计
    
  • 生成快照
    
  • 商品中心-规格
    
  • 商品中心-单位
    
  • 商品中心-分类
    
  • 商品中心-标签
    
  • 前台分诊
    
  • 商品中心-模板
    
  • 客服管理
    
  • 基础服务
    
  • 收银管理
    
  • 商品中心-属性
    
  • 订单管理
    
  • 商品中心-商品列表
    
  • 营销咨询
    
  • 商品中心-品牌
    
  • 现场咨询
    
  • 货品档案
    
  • 科室消费
    
  • 商品档案
    
  • 输入框删除
    
  • 最小化
    
  • 橡皮擦
    
  • 回车确认
    
  • 上传图片
    
  • 向上
    
  • 向下
    
  • 订单中心
    
  • 更新日志
    
  • 订货中心
    
  • 目标管理
    
  • 到首页
    
  • 到末页
    
  • 星号
    
  • 更多
    
  • 上传
    
  • 会员
    
  • 参照
    
  • 页面分栏-折叠
    
  • 页面分栏-展开
    
  • 切换触屏
    
  • 营销
    
  • 选中
    
  • 问题反馈
    
  • 关闭
    
  • 全屏
    
  • 最小化
    
  • 图片标签样式默认图
    
  • 表单搜索
    
  • 离线单据
    
  • 向右
    
  • 老板方案
    
  • 翻页收起
    
  • 箭头上
    
  • 区域经理方案
    
  • 翻页展开
    
  • 箭头下
    
  • 管理端
    
  • 向下
    
  • 上锁高亮
    
  • 向左
    
  • 切换账号
    
  • 定位高亮
    
  • 关闭
    
  • 物流公司
    
  • 开始高亮
    
  • 组织机构
    
  • 公告管理
    
  • 定价中心
    
  • 数据分析
    
  • 售后管理
    
  • 区域站点
    
  • 促销中心
    
  • 商城设置
    
  • 数据中心
    
  • 商家管理
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'yonicon';
  src: url('iconfont.eot?t=1629797797606'); /* IE9 */
  src: url('iconfont.eot?t=1629797797606#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('iconfont.woff?t=1629797797606') format('woff'),
       url('iconfont.ttf?t=1629797797606') format('truetype'),
       url('iconfont.svg?t=1629797797606#yonicon') format('svg');
}

第二步:定义使用 iconfont 的样式

.yonicon {
  font-family: "yonicon" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步:挑选相应图标并获取字体编码,应用于页面

<span class="yonicon">&#x33;</span>

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

  • 列表设置
    .yonicon-liebiaoshezhi
  • 附件
    .yonicon-fujian
  • works
    .yonicon-works
  • prod
    .yonicon-prod
  • quyu
    .yonicon-quyu
  • hanshu
    .yonicon-hanshu
  • 应付管理
    .yonicon-yingfuguanli
  • 字段变更
    .yonicon-ziduanbiangeng
  • 试机
    .yonicon-roomstatuseight
  • 基础设置
    .yonicon-jichushezhi1
  • 要货管理
    .yonicon-yaohuoguanli1
  • 帮 助
    .yonicon-bangzhu
  • 零售管理
    .yonicon-lingshouguanli1
  • U商城
    .yonicon-Ushangcheng
  • 库存管理
    .yonicon-kucunguanli
  • 会员管理
    .yonicon-huiyuanguanli
  • 商品管理
    .yonicon-shangpinguanli
  • 首页
    .yonicon-shouye
  • 客商档案
    .yonicon-keshangdangan
  • 浏览态-新增
    .yonicon-plus-copy-disabled
  • 机构人员
    .yonicon-jigourenyuan
  • 商品中心
    .yonicon-shangpinzhongxin
  • 1:1
    .yonicon-shijidaxiao
  • 系统设置
    .yonicon-xitongshezhi
  • 其它档案
    .yonicon-qitadangan
  • 用户及角色
    .yonicon-yonghujijiaose
  • 屏幕适用
    .yonicon-pingmushiyong
  • 联网
    .yonicon-lianwang
  • 库存云LOGO
    .yonicon-kucunyun
  • 替换
    .yonicon-tihuan
  • 大图
    .yonicon-datu
  • 感叹号
    .yonicon-gantanhao
  • 切换小写
    .yonicon-qiehuanxiaoxie
  • 切换大写
    .yonicon-qiehuandaxie
  • 暂停
    .yonicon-zanting
  • 播放
    .yonicon-bofang
  • 关闭
    .yonicon-guanbi3
  • 音乐
    .yonicon-yinle
  • 质量信息
    .yonicon-zhiliangxinxi
  • 组织单元
    .yonicon-zuzhidanyuan
  • 成本计算
    .yonicon-chengbenjisuan
  • 友零售
    .yonicon-youlingshou
  • 留言
    .yonicon-liuyan
  • 收起全屏
    .yonicon-shouqiquanping
  • 联动下级
    .yonicon-liandongxiaji
  • 减少数量
    .yonicon-jianshaoshuliang
  • 设备
    .yonicon-shebei
  • 添加数量
    .yonicon-tianjiashuliang
  • 定位
    .yonicon-dingwei
  • 零件
    .yonicon-lingjian
  • 右半圆
    .yonicon-youbanyuan
  • 编辑
    .yonicon-bianji
  • 左半圆
    .yonicon-zuobanyuan
  • 启用
    .yonicon-qiyong
  • 停用
    .yonicon-tingyong
  • 重置
    .yonicon-chongzhi1
  • 搜索
    .yonicon-sousuo
  • 删除一个数字
    .yonicon-shanchuyigeshuzi
  • 参照
    .yonicon-canzhao
  • 日期
    .yonicon-riqi
  • 加载 (2)
    .yonicon-jiazai2
  • 业务监管
    .yonicon-yewujianguan
  • 警示提示
    .yonicon-tishi
  • 失败提示
    .yonicon-cuowutishi
  • 常规提示
    .yonicon-xingzhuangbeifen
  • .yonicon-nan
  • 成功提示
    .yonicon-chenggongtishi
  • .yonicon-xin
  • .yonicon-xin1
  • .yonicon-jia
  • 星_虚
    .yonicon-xingxu
  • .yonicon-jian
  • 1
    .yonicon-icon-test
  • 修改密码
    .yonicon-xiugaimima
  • 3
    .yonicon-icon-test1
  • 退出登录
    .yonicon-tuichudenglu
  • 4
    .yonicon-icon-test2
  • 增加redline
    .yonicon-zengjiaredline
  • 个人信息
    .yonicon-gerenxinxi
  • 5
    .yonicon-icon-test3
  • 增加greyline
    .yonicon-zengjiagreyline
  • 删除
    .yonicon-biaogeshanchu
  • 2
    .yonicon-icon-test4
  • 购物车redline
    .yonicon-gouwucheredline
  • 购物车greyline
    .yonicon-gouwuchegreyline
  • 查询
    .yonicon-chaxun
  • 虚拟组织
    .yonicon-xunizuzhi
  • .yonicon-shanchucopy1
  • 下拉
    .yonicon-xiala
  • 版本变更
    .yonicon-lishibanben
  • .yonicon-shanchucopy2
  • 店内加工
    .yonicon-dianneijiagong
  • 问号 默认
    .yonicon-wenhaomoren
  • 向左
    .yonicon-left2
  • 复制
    .yonicon-fuzhi2
  • 向右
    .yonicon-right2
  • 多语言
    .yonicon-globe
  • 筛选
    .yonicon-shaixuan1
  • 笑脸
    .yonicon-xiaolian
  • 筛选
    .yonicon-shaixuan1-copy
  • 收起
    .yonicon-shouqi
  • 展开
    .yonicon-zhankai
  • 基础服务设置
    .yonicon-jichufuwushezhi
  • 关 闭
    .yonicon-guanbi4
  • 刷新
    .yonicon-shuaxin
  • 友零售logo
    .yonicon-youlingshoulogo
  • 通知信息
    .yonicon-tongzhixinxi
  • 返回
    .yonicon-fanhui1
  • logo
    .yonicon-logo
  • 选择商品
    .yonicon-xuanzeshangping
  • logo加文字
    .yonicon-logojiawenzi
  • .yonicon-self-jia
  • 表格删除悬停
    .yonicon-biaogeshanchuxuanting
  • .yonicon-self-jian
  • 表格删除
    .yonicon-shanchu1
  • 输入框删除
    .yonicon-qingkong
  • 解锁-确定
    .yonicon-jiesuo-queding
  • 向下
    .yonicon-xiangxia-copy
  • 业务档案
    .yonicon-yewudangan
  • 返回
    .yonicon-rollback
  • 浏览态-编辑-不可用
    .yonicon-edit-disabled
  • 浏览态-删除-不可用
    .yonicon-delete-disabled
  • 浏览态-新增-不可用
    .yonicon-plus-disabled
  • 浏览态-导出-不可用
    .yonicon-export-disabled
  • 浏览态-导入-不可用
    .yonicon-import-disabled
  • 浏览态-联查-不可用
    .yonicon-liancha-disabled
  • 浏览态-变更-不可用
    .yonicon-biangeng-disabled
  • 浏览态-打印-不可用
    .yonicon-dayin1-disabled
  • 冻结
    .yonicon-dongjie
  • 浏览态-提交-不可用
    .yonicon-review-disabled
  • 未冻结
    .yonicon-weidongjie
  • 浏览态-新增
    .yonicon-plus-copy
  • 返回
    .yonicon-gouwuchefanhui
  • 向左
    .yonicon-left-disabled
  • 向右
    .yonicon-right-disabled
  • .yonicon-shang
  • .yonicon-xia
  • 浏览态-恢复默认-不可用
    .yonicon-huifumoren-disabled
  • 预订管理
    .yonicon-yudingguanli
  • 浏览态-关闭
    .yonicon-guanbi2-disabled
  • 浏览态-入库
    .yonicon-ruku-disabled
  • 隐藏
    .yonicon-yincang
  • 显示图片
    .yonicon-xianshitupian
  • 可见
    .yonicon-kejian
  • 浏览态-保存业务对象-不可用
    .yonicon-baocun-disabled
  • 选中
    .yonicon-xuanzhong1
  • 浏览态-库存查询-不可用
    .yonicon-kucunchaxun-disabled
  • 浏览态-日报-不可用
    .yonicon-ribao-disabled
  • 浏览态-复核-不可用
    .yonicon-fuhe-disabled
  • 浏览态-复盘-不可用
    .yonicon-fupan-disabled
  • 拖动
    .yonicon-tuodong
  • 公告设置
    .yonicon-gonggaoshezhi
  • 浏览态-出库-不可用
    .yonicon-chuku-disabled
  • 浏览态-弃审-不可用
    .yonicon-qishen-disabled
  • 确定签名
    .yonicon-quedingqianming
  • 二维码
    .yonicon-erweima
  • 清除签名
    .yonicon-qingchuqianming
  • 快速
    .yonicon-kuaisu
  • 常用功能设置
    .yonicon-changyonggongnengshezhi
  • .yonicon-zuo
  • .yonicon-you
  • 键盘
    .yonicon-jianpan
  • 键盘
    .yonicon-jianpan-copy
  • 重置
    .yonicon-zhongzhi1
  • 撤销
    .yonicon-chexiao
  • 下 拉
    .yonicon-arrow-down
  • 智能外设
    .yonicon-zhinengwaishe
  • 系统设置
    .yonicon-xitongshezhi1
  • 营销流程
    .yonicon-yingxiaoliucheng
  • 客户管理
    .yonicon-kehuguanli
  • 客户运营
    .yonicon-kehuyunying
  • 寄存管理
    .yonicon-jicunguanli
  • 聊天
    .yonicon-liaotian
  • 最大化
    .yonicon-zuidahua
  • 最小化
    .yonicon-zuixiaohua1
  • 已审核
    .yonicon-yishenhe
  • 已驳回
    .yonicon-yibohui
  • 待审核
    .yonicon-daishenhe
  • 已提交
    .yonicon-yitijiao
  • 未提交
    .yonicon-weitijiao
  • 用药安全
    .yonicon-yongyaoanquan
  • 健康管理
    .yonicon-jiankangguanli
  • 慢病管理
    .yonicon-manbingguanli
  • 返回
    .yonicon-fanhui
  • 地址
    .yonicon-dizhi
  • 触屏更多
    .yonicon-qiehuan
  • 切换PC-灰色
    .yonicon-qiehuanPC-huise
  • 成功
    .yonicon-chenggong1
  • 失败
    .yonicon-shibai
  • 实盘录入
    .yonicon-shipanluru-disabled
  • 盘点计划
    .yonicon-pandianjihua-disabled
  • 盘点复核
    .yonicon-pandianfuhe-disabled
  • 表格删除悬停
    .yonicon-biaogeshanchuxuanting-1-copy
  • 进度箭头
    .yonicon-jindujiantou
  • 秒3
    .yonicon-miao
  • 秒1
    .yonicon-miao1
  • 智能POS
    .yonicon-zhinengPOS
  • 手机
    .yonicon-shouji
  • 机器人
    .yonicon-jiqiren
  • 电脑
    .yonicon-diannao
  • 返回顶部
    .yonicon-fanhuidingbu
  • 报表统计
    .yonicon-baobiaotongji
  • 生成快照
    .yonicon-shengchengkuaizhao-copy
  • 商品中心-规格
    .yonicon-shangpinzhongxinguige
  • 商品中心-单位
    .yonicon-shangpinzhongxindanwei
  • 商品中心-分类
    .yonicon-shangpinzhongxinfenlei
  • 商品中心-标签
    .yonicon-shangpinzhongxinbiaoqian
  • 前台分诊
    .yonicon-qiantaifenzhen
  • 商品中心-模板
    .yonicon-shangpinzhongxinmoban
  • 客服管理
    .yonicon-kefuguanli
  • 基础服务
    .yonicon-jichufuwu
  • 收银管理
    .yonicon-shouyinguanli
  • 商品中心-属性
    .yonicon-shangpinzhongxinshuxing
  • 订单管理
    .yonicon-dingdanguanli
  • 商品中心-商品列表
    .yonicon-shangpinzhongxinshangpinliebiao
  • 营销咨询
    .yonicon-yingxiaozixun
  • 商品中心-品牌
    .yonicon-shangpinzhongxinpinpai
  • 现场咨询
    .yonicon-xianchangzixun
  • 货品档案
    .yonicon-huopindangan
  • 科室消费
    .yonicon-keshixiaofei
  • 商品档案
    .yonicon-shangpindangan
  • 输入框删除
    .yonicon-shurukuangshanchu-copy
  • 最小化
    .yonicon-zuixiaohua2
  • 橡皮擦
    .yonicon-xiangpica
  • 回车确认
    .yonicon-huichequeren
  • 上传图片
    .yonicon-shangchuantupian
  • 向上
    .yonicon-xiangshang
  • 向下
    .yonicon-xiangxia1
  • 订单中心
    .yonicon-dingdanzhongxin
  • 更新日志
    .yonicon-gengxinrizhi
  • 订货中心
    .yonicon-dinghuozhongxin
  • 目标管理
    .yonicon-mubiaoguanli
  • 到首页
    .yonicon-daoshouye
  • 到末页
    .yonicon-daomoye
  • 星号
    .yonicon-star
  • 更多
    .yonicon-ellipsis
  • 上传
    .yonicon-uploadimg
  • 会员
    .yonicon-huiyuan
  • 参照
    .yonicon-canzhao1
  • 页面分栏-折叠
    .yonicon-yemianfenlan-zhedie
  • 页面分栏-展开
    .yonicon-yemianfenlan-zhankai
  • 切换触屏
    .yonicon-qiehuanchuping
  • 营销
    .yonicon-yingxiao
  • 选中
    .yonicon-xuanzhong1-copy
  • 问题反馈
    .yonicon-wentifankui
  • 关闭
    .yonicon-guanbi
  • 全屏
    .yonicon-quanping
  • 最小化
    .yonicon-zuixiaohua
  • 图片标签样式默认图
    .yonicon-tupianbiaoqianyangshimorentu
  • 表单搜索
    .yonicon-biaodansousuo
  • 离线单据
    .yonicon-lixiandanju
  • 向右
    .yonicon-right
  • 老板方案
    .yonicon-laobanfangan
  • 翻页收起
    .yonicon-fanyeshouqi
  • 箭头上
    .yonicon-jiantoushang
  • 区域经理方案
    .yonicon-quyujinglifangan
  • 翻页展开
    .yonicon-fanyezhankai
  • 箭头下
    .yonicon-jiantouxia
  • 管理端
    .yonicon-guanliduan
  • 向下
    .yonicon-xiangxia
  • 上锁高亮
    .yonicon-shangsuogaoliang
  • 向左
    .yonicon-left
  • 切换账号
    .yonicon-qiehuanzhanghao
  • 定位高亮
    .yonicon-dingweigaoliang
  • 关闭
    .yonicon-guanbi1
  • 物流公司
    .yonicon-wuliugongsi1
  • 开始高亮
    .yonicon-kaishigaoliang
  • 组织机构
    .yonicon-zuzhijigou
  • 公告管理
    .yonicon-gonggaoguanli1
  • 定价中心
    .yonicon-dingjiazhongxin1
  • 数据分析
    .yonicon-shujufenxi
  • 售后管理
    .yonicon-shouhouguanli1
  • 区域站点
    .yonicon-quyuzhandian
  • 促销中心
    .yonicon-cuxiaozhongxin1
  • 商城设置
    .yonicon-shangchengshezhi
  • 数据中心
    .yonicon-shujuzhongxin1
  • 商家管理
    .yonicon-shangjiaguanli

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="yonicon yonicon-xxx"></span>

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

  • 列表设置
    #yonicon-liebiaoshezhi
  • 附件
    #yonicon-fujian
  • works
    #yonicon-works
  • prod
    #yonicon-prod
  • quyu
    #yonicon-quyu
  • hanshu
    #yonicon-hanshu
  • 应付管理
    #yonicon-yingfuguanli
  • 字段变更
    #yonicon-ziduanbiangeng
  • 试机
    #yonicon-roomstatuseight
  • 基础设置
    #yonicon-jichushezhi1
  • 要货管理
    #yonicon-yaohuoguanli1
  • 帮 助
    #yonicon-bangzhu
  • 零售管理
    #yonicon-lingshouguanli1
  • U商城
    #yonicon-Ushangcheng
  • 库存管理
    #yonicon-kucunguanli
  • 会员管理
    #yonicon-huiyuanguanli
  • 商品管理
    #yonicon-shangpinguanli
  • 首页
    #yonicon-shouye
  • 客商档案
    #yonicon-keshangdangan
  • 浏览态-新增
    #yonicon-plus-copy-disabled
  • 机构人员
    #yonicon-jigourenyuan
  • 商品中心
    #yonicon-shangpinzhongxin
  • 1:1
    #yonicon-shijidaxiao
  • 系统设置
    #yonicon-xitongshezhi
  • 其它档案
    #yonicon-qitadangan
  • 用户及角色
    #yonicon-yonghujijiaose
  • 屏幕适用
    #yonicon-pingmushiyong
  • 联网
    #yonicon-lianwang
  • 库存云LOGO
    #yonicon-kucunyun
  • 替换
    #yonicon-tihuan
  • 大图
    #yonicon-datu
  • 感叹号
    #yonicon-gantanhao
  • 切换小写
    #yonicon-qiehuanxiaoxie
  • 切换大写
    #yonicon-qiehuandaxie
  • 暂停
    #yonicon-zanting
  • 播放
    #yonicon-bofang
  • 关闭
    #yonicon-guanbi3
  • 音乐
    #yonicon-yinle
  • 质量信息
    #yonicon-zhiliangxinxi
  • 组织单元
    #yonicon-zuzhidanyuan
  • 成本计算
    #yonicon-chengbenjisuan
  • 友零售
    #yonicon-youlingshou
  • 留言
    #yonicon-liuyan
  • 收起全屏
    #yonicon-shouqiquanping
  • 联动下级
    #yonicon-liandongxiaji
  • 减少数量
    #yonicon-jianshaoshuliang
  • 设备
    #yonicon-shebei
  • 添加数量
    #yonicon-tianjiashuliang
  • 定位
    #yonicon-dingwei
  • 零件
    #yonicon-lingjian
  • 右半圆
    #yonicon-youbanyuan
  • 编辑
    #yonicon-bianji
  • 左半圆
    #yonicon-zuobanyuan
  • 启用
    #yonicon-qiyong
  • 停用
    #yonicon-tingyong
  • 重置
    #yonicon-chongzhi1
  • 搜索
    #yonicon-sousuo
  • 删除一个数字
    #yonicon-shanchuyigeshuzi
  • 参照
    #yonicon-canzhao
  • 日期
    #yonicon-riqi
  • 加载 (2)
    #yonicon-jiazai2
  • 业务监管
    #yonicon-yewujianguan
  • 警示提示
    #yonicon-tishi
  • 失败提示
    #yonicon-cuowutishi
  • 常规提示
    #yonicon-xingzhuangbeifen
  • #yonicon-nan
  • 成功提示
    #yonicon-chenggongtishi
  • #yonicon-xin
  • #yonicon-xin1
  • #yonicon-jia
  • 星_虚
    #yonicon-xingxu
  • #yonicon-jian
  • 1
    #yonicon-icon-test
  • 修改密码
    #yonicon-xiugaimima
  • 3
    #yonicon-icon-test1
  • 退出登录
    #yonicon-tuichudenglu
  • 4
    #yonicon-icon-test2
  • 增加redline
    #yonicon-zengjiaredline
  • 个人信息
    #yonicon-gerenxinxi
  • 5
    #yonicon-icon-test3
  • 增加greyline
    #yonicon-zengjiagreyline
  • 删除
    #yonicon-biaogeshanchu
  • 2
    #yonicon-icon-test4
  • 购物车redline
    #yonicon-gouwucheredline
  • 购物车greyline
    #yonicon-gouwuchegreyline
  • 查询
    #yonicon-chaxun
  • 虚拟组织
    #yonicon-xunizuzhi
  • #yonicon-shanchucopy1
  • 下拉
    #yonicon-xiala
  • 版本变更
    #yonicon-lishibanben
  • #yonicon-shanchucopy2
  • 店内加工
    #yonicon-dianneijiagong
  • 问号 默认
    #yonicon-wenhaomoren
  • 向左
    #yonicon-left2
  • 复制
    #yonicon-fuzhi2
  • 向右
    #yonicon-right2
  • 多语言
    #yonicon-globe
  • 筛选
    #yonicon-shaixuan1
  • 笑脸
    #yonicon-xiaolian
  • 筛选
    #yonicon-shaixuan1-copy
  • 收起
    #yonicon-shouqi
  • 展开
    #yonicon-zhankai
  • 基础服务设置
    #yonicon-jichufuwushezhi
  • 关 闭
    #yonicon-guanbi4
  • 刷新
    #yonicon-shuaxin
  • 友零售logo
    #yonicon-youlingshoulogo
  • 通知信息
    #yonicon-tongzhixinxi
  • 返回
    #yonicon-fanhui1
  • logo
    #yonicon-logo
  • 选择商品
    #yonicon-xuanzeshangping
  • logo加文字
    #yonicon-logojiawenzi
  • #yonicon-self-jia
  • 表格删除悬停
    #yonicon-biaogeshanchuxuanting
  • #yonicon-self-jian
  • 表格删除
    #yonicon-shanchu1
  • 输入框删除
    #yonicon-qingkong
  • 解锁-确定
    #yonicon-jiesuo-queding
  • 向下
    #yonicon-xiangxia-copy
  • 业务档案
    #yonicon-yewudangan
  • 返回
    #yonicon-rollback
  • 浏览态-编辑-不可用
    #yonicon-edit-disabled
  • 浏览态-删除-不可用
    #yonicon-delete-disabled
  • 浏览态-新增-不可用
    #yonicon-plus-disabled
  • 浏览态-导出-不可用
    #yonicon-export-disabled
  • 浏览态-导入-不可用
    #yonicon-import-disabled
  • 浏览态-联查-不可用
    #yonicon-liancha-disabled
  • 浏览态-变更-不可用
    #yonicon-biangeng-disabled
  • 浏览态-打印-不可用
    #yonicon-dayin1-disabled
  • 冻结
    #yonicon-dongjie
  • 浏览态-提交-不可用
    #yonicon-review-disabled
  • 未冻结
    #yonicon-weidongjie
  • 浏览态-新增
    #yonicon-plus-copy
  • 返回
    #yonicon-gouwuchefanhui
  • 向左
    #yonicon-left-disabled
  • 向右
    #yonicon-right-disabled
  • #yonicon-shang
  • #yonicon-xia
  • 浏览态-恢复默认-不可用
    #yonicon-huifumoren-disabled
  • 预订管理
    #yonicon-yudingguanli
  • 浏览态-关闭
    #yonicon-guanbi2-disabled
  • 浏览态-入库
    #yonicon-ruku-disabled
  • 隐藏
    #yonicon-yincang
  • 显示图片
    #yonicon-xianshitupian
  • 可见
    #yonicon-kejian
  • 浏览态-保存业务对象-不可用
    #yonicon-baocun-disabled
  • 选中
    #yonicon-xuanzhong1
  • 浏览态-库存查询-不可用
    #yonicon-kucunchaxun-disabled
  • 浏览态-日报-不可用
    #yonicon-ribao-disabled
  • 浏览态-复核-不可用
    #yonicon-fuhe-disabled
  • 浏览态-复盘-不可用
    #yonicon-fupan-disabled
  • 拖动
    #yonicon-tuodong
  • 公告设置
    #yonicon-gonggaoshezhi
  • 浏览态-出库-不可用
    #yonicon-chuku-disabled
  • 浏览态-弃审-不可用
    #yonicon-qishen-disabled
  • 确定签名
    #yonicon-quedingqianming
  • 二维码
    #yonicon-erweima
  • 清除签名
    #yonicon-qingchuqianming
  • 快速
    #yonicon-kuaisu
  • 常用功能设置
    #yonicon-changyonggongnengshezhi
  • #yonicon-zuo
  • #yonicon-you
  • 键盘
    #yonicon-jianpan
  • 键盘
    #yonicon-jianpan-copy
  • 重置
    #yonicon-zhongzhi1
  • 撤销
    #yonicon-chexiao
  • 下 拉
    #yonicon-arrow-down
  • 智能外设
    #yonicon-zhinengwaishe
  • 系统设置
    #yonicon-xitongshezhi1
  • 营销流程
    #yonicon-yingxiaoliucheng
  • 客户管理
    #yonicon-kehuguanli
  • 客户运营
    #yonicon-kehuyunying
  • 寄存管理
    #yonicon-jicunguanli
  • 聊天
    #yonicon-liaotian
  • 最大化
    #yonicon-zuidahua
  • 最小化
    #yonicon-zuixiaohua1
  • 已审核
    #yonicon-yishenhe
  • 已驳回
    #yonicon-yibohui
  • 待审核
    #yonicon-daishenhe
  • 已提交
    #yonicon-yitijiao
  • 未提交
    #yonicon-weitijiao
  • 用药安全
    #yonicon-yongyaoanquan
  • 健康管理
    #yonicon-jiankangguanli
  • 慢病管理
    #yonicon-manbingguanli
  • 返回
    #yonicon-fanhui
  • 地址
    #yonicon-dizhi
  • 触屏更多
    #yonicon-qiehuan
  • 切换PC-灰色
    #yonicon-qiehuanPC-huise
  • 成功
    #yonicon-chenggong1
  • 失败
    #yonicon-shibai
  • 实盘录入
    #yonicon-shipanluru-disabled
  • 盘点计划
    #yonicon-pandianjihua-disabled
  • 盘点复核
    #yonicon-pandianfuhe-disabled
  • 表格删除悬停
    #yonicon-biaogeshanchuxuanting-1-copy
  • 进度箭头
    #yonicon-jindujiantou
  • 秒3
    #yonicon-miao
  • 秒1
    #yonicon-miao1
  • 智能POS
    #yonicon-zhinengPOS
  • 手机
    #yonicon-shouji
  • 机器人
    #yonicon-jiqiren
  • 电脑
    #yonicon-diannao
  • 返回顶部
    #yonicon-fanhuidingbu
  • 报表统计
    #yonicon-baobiaotongji
  • 生成快照
    #yonicon-shengchengkuaizhao-copy
  • 商品中心-规格
    #yonicon-shangpinzhongxinguige
  • 商品中心-单位
    #yonicon-shangpinzhongxindanwei
  • 商品中心-分类
    #yonicon-shangpinzhongxinfenlei
  • 商品中心-标签
    #yonicon-shangpinzhongxinbiaoqian
  • 前台分诊
    #yonicon-qiantaifenzhen
  • 商品中心-模板
    #yonicon-shangpinzhongxinmoban
  • 客服管理
    #yonicon-kefuguanli
  • 基础服务
    #yonicon-jichufuwu
  • 收银管理
    #yonicon-shouyinguanli
  • 商品中心-属性
    #yonicon-shangpinzhongxinshuxing
  • 订单管理
    #yonicon-dingdanguanli
  • 商品中心-商品列表
    #yonicon-shangpinzhongxinshangpinliebiao
  • 营销咨询
    #yonicon-yingxiaozixun
  • 商品中心-品牌
    #yonicon-shangpinzhongxinpinpai
  • 现场咨询
    #yonicon-xianchangzixun
  • 货品档案
    #yonicon-huopindangan
  • 科室消费
    #yonicon-keshixiaofei
  • 商品档案
    #yonicon-shangpindangan
  • 输入框删除
    #yonicon-shurukuangshanchu-copy
  • 最小化
    #yonicon-zuixiaohua2
  • 橡皮擦
    #yonicon-xiangpica
  • 回车确认
    #yonicon-huichequeren
  • 上传图片
    #yonicon-shangchuantupian
  • 向上
    #yonicon-xiangshang
  • 向下
    #yonicon-xiangxia1
  • 订单中心
    #yonicon-dingdanzhongxin
  • 更新日志
    #yonicon-gengxinrizhi
  • 订货中心
    #yonicon-dinghuozhongxin
  • 目标管理
    #yonicon-mubiaoguanli
  • 到首页
    #yonicon-daoshouye
  • 到末页
    #yonicon-daomoye
  • 星号
    #yonicon-star
  • 更多
    #yonicon-ellipsis
  • 上传
    #yonicon-uploadimg
  • 会员
    #yonicon-huiyuan
  • 参照
    #yonicon-canzhao1
  • 页面分栏-折叠
    #yonicon-yemianfenlan-zhedie
  • 页面分栏-展开
    #yonicon-yemianfenlan-zhankai
  • 切换触屏
    #yonicon-qiehuanchuping
  • 营销
    #yonicon-yingxiao
  • 选中
    #yonicon-xuanzhong1-copy
  • 问题反馈
    #yonicon-wentifankui
  • 关闭
    #yonicon-guanbi
  • 全屏
    #yonicon-quanping
  • 最小化
    #yonicon-zuixiaohua
  • 图片标签样式默认图
    #yonicon-tupianbiaoqianyangshimorentu
  • 表单搜索
    #yonicon-biaodansousuo
  • 离线单据
    #yonicon-lixiandanju
  • 向右
    #yonicon-right
  • 老板方案
    #yonicon-laobanfangan
  • 翻页收起
    #yonicon-fanyeshouqi
  • 箭头上
    #yonicon-jiantoushang
  • 区域经理方案
    #yonicon-quyujinglifangan
  • 翻页展开
    #yonicon-fanyezhankai
  • 箭头下
    #yonicon-jiantouxia
  • 管理端
    #yonicon-guanliduan
  • 向下
    #yonicon-xiangxia
  • 上锁高亮
    #yonicon-shangsuogaoliang
  • 向左
    #yonicon-left
  • 切换账号
    #yonicon-qiehuanzhanghao
  • 定位高亮
    #yonicon-dingweigaoliang
  • 关闭
    #yonicon-guanbi1
  • 物流公司
    #yonicon-wuliugongsi1
  • 开始高亮
    #yonicon-kaishigaoliang
  • 组织机构
    #yonicon-zuzhijigou
  • 公告管理
    #yonicon-gonggaoguanli1
  • 定价中心
    #yonicon-dingjiazhongxin1
  • 数据分析
    #yonicon-shujufenxi
  • 售后管理
    #yonicon-shouhouguanli1
  • 区域站点
    #yonicon-quyuzhandian
  • 促销中心
    #yonicon-cuxiaozhongxin1
  • 商城设置
    #yonicon-shangchengshezhi
  • 数据中心
    #yonicon-shujuzhongxin1
  • 商家管理
    #yonicon-shangjiaguanli

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>