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

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

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