• 新增换车单
    
  • 换车管理
    
  • 503
    
  • 新增电池巡检
    
  • 电池巡检
    
  • 电量
    
  • 无数据
    
  • 返回
    
  • 电话
    
  • 草稿箱
    
  • 锁定
    
  • 坑洞保护
    
  • 通讯信号
    
  • 启动
    
  • 新增快捷合同
    
  • 定位信号
    
  • 新增框架合同
    
  • 下 拉
    
  • qrcode
    
  • share
    
  • 附件
    
  • 列表导出
    
  • 新增交机
    
  • 服务接机
    
  • 交机列表
    
  • 接机列表
    
  • 新增接机
    
  • 服务交机
    
  • 进退场补录
    
  • 新增个人客户
    
  • 新增退款单
    
  • 新增进退场补录
    
  • 新增服务报停
    
  • 设备维修
    
  • 营收
    
  • 实收
    
  • 应收
    
  • 报停管理
    
  • 设备保养
    
  • 新增保养
    
  • 新增业务报停
    
  • 新增检修
    
  • 设备巡检
    
  • 新增巡检
    
  • 新增补液
    
  • 新增业务索赔
    
  • 新增维修
    
  • 新增服务索赔
    
  • add-func
    
  • 收款管理
    
  • 退款管理
    
  • 索赔管理
    
  • 签署记录
    
  • 我方物流
    
  • 退场管理
    
  • 认证管理
    
  • 新增企业客户
    
  • 新增进场单
    
  • 物流应付
    
  • 折旧成本
    
  • 转租公司
    
  • 转租报停
    
  • 新增退场单
    
  • 物流公司
    
  • 融资管理
    
  • 新增发票
    
  • 转租应付
    
  • 新增收款
    
  • 转租设备
    
  • 物流记录
    
  • 客户管理
    
  • 配件管理
    
  • 发票管理
    
  • 设备控制
    
  • 任务记录
    
  • 待办任务
    
  • 待下发任务
    
  • 附加合同
    
  • 设备补液
    
  • 新增合同
    
  • 设备检修
    
  • 设备采购
    
  • 合同列表
    
  • 新增附加合同
    
  • 新增合同变更
    
  • 进场管理
    
  • 已办任务
    
  • 合同变更
    
  • 设备分布
    
  • 设备调拨
    
  • 设备档案
    
  • 设备监控
    
  • 电池管理
    
  • 设备保险
    
  • 盾牌
    
  • 预览
    
  • zcgl
    
  • 电池管理
    
  • lg-all-99-01
    
  • lg-98-gkc-01
    
  • woderenwu
    
  • yiban
    
  • lianluojilu
    
  • renwuguanli
    
  • renwuxiafa
    
  • zl-94-kc-01
    
  • zl-95-cc-01
    
  • zl-96-zzj-01
    
  • zl-97-wj-01
    
  • xunjian
    
  • yingfushenhe
    
  • 保险单
    
  • 设备型号
    
  • 品牌
    
  • 企业
    
  • 关 闭
    
  • 职位
    
  • 用户
    
  • 报停申请
    
  • 退款
    
  • 对账单
    
  • 添加合同
    
  • 发票
    
  • 变更
    
  • 收款
    
  • 设备维护
    
  • 分布
    
  • 设备管理
    
  • 合同管理
    
  • 合同执行
    
  • 其他
    
  • 结算管理
    
  • xuanzhong
    
  • 警告
    
  • 警告
    
  • 通知
    
  • zl-90-未签
    
  • zl-89-待签-01
    
  • zl-91-已签
    
  • zl-92-待审批
    
  • zl-93-拒签
    
  • zl-88-铜牌-01
    
  • zl-86-金牌-01
    
  • zl-87-银牌-01
    
  • 多图对比
    
  • 开发中
    
  • 表格
    
  • renshu
    
  • 新增
    
  • 合同
    
  • 客户
    
  • 账款
    
  • 图标_营收
    
  • 柱状图
    
  • 企业
    
  • zl-82-word-01
    
  • zl-83-ppt-01
    
  • zl-84-text-01
    
  • zl-85-xlsx-01
    
  • zl-81-pdf
    
  • 叉车
    
  • 挖掘机-01
    
  • 装载机
    
  • 卡车
    
  • 吨位
    
  • 叉车
    
  • 双箭头-右
    
  • 双箭头-右
    
  • cc
    
  • wjj
    
  • zzj
    
  • kc
    
  • jian
    
  • peijianguanli
    
  • 报表
    
  • tiaobodan
    
  • 采购
    
  • zl-36-logo
    
  • prepare-model
    
  • 金钱袋
    
  • tongxunlu
    
  • caogaoxiang
    
  • 
  • 撤回
    
  • zl-78-转租
    
  • zl-77-控制
    
  • zl-76-保养
    
  • zl-65-补液
    
  • zl-75-物流记录
    
  • zl-74-通用审批
    
  • zl-73-电子围栏
    
  • zl-72-客户管理-01-01
    
  • zl-71-物流公司
    
  • 附件
    
  • iconzhengli_zuzhijiagou
    
  • add
    
  • zl-70-退款
    
  • zl-69-巡检-01
    
  • zl-68-展开
    
  • zl-67-全部
    
  • zl-66-维修
    
  • zl-63-倒序-01
    
  • zl-64-正序-01
    
  • zl-61-驱动-01
    
  • zl-62-高度
    
  • zl-60-当前位置
    
  • zl-59-GPS
    
  • zl-58-离线
    
  • zl-56-定位信号
    
  • zl-57-通讯信号
    
  • meiguo
    
  • china
    
  • No_date
    
  • zl-55-直臂车
    
  • zl-54-剪叉车
    
  • zl-53-曲臂车
    
  • zl-52-档案
    
  • zl-51-监控
    
  • zl-44-快链接
    
  • zl-50-禁用
    
  • zl-49-开启
    
  • zl-48-出场
    
  • zl-47-入场
    
  • zl-46-调度
    
  • zl-45-收起
    
  • zl-43-直臂车
    
  • zl-42-剪叉车
    
  • zl-41-清除
    
  • zl-40-故障
    
  • zl-39-剪叉车
    
  • zl-38-LOGO2
    
  • arrow-right
    
  • arrow-right
    
  • arrow-right
    
  • zl-37-索赔
    
  • zl-36-LOGO1
    
  • zl-35-注释
    
  • zl-33-错误
    
  • zl-34-正确
    
  • zl-32-拍照
    
  • zl-31-图片
    
  • zl-30-提醒
    
  • zl-29-等待
    
  • zl-28-时间
    
  • zl-27-小屏
    
  • zl-26-全屏
    
  • zl-25-无络
    
  • zl-24-网络
    
  • zl-23-注意
    
  • zl-22-备注
    
  • zl-21-疑问
    
  • zl-20-报警
    
  • zl-19-账户
    
  • zl-18-合同
    
  • zl-17-坐标
    
  • zl-16-刷新
    
  • zl-15-发票
    
  • zl-14-设置
    
  • zl-13-扫码
    
  • zl-12-搜索
    
  • zl-11-地图
    
  • zl-10-消息
    
  • zl-08-可见
    
  • zl-09-不可见
    
  • zl-07-删除
    
  • zl-06-编辑
    
  • zl-04-锁车
    
  • zl-05-解锁
    
  • zl-03-日历
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • 新增换车单
    .iconxinzenghuanchedan
  • 换车管理
    .iconhuancheguanli
  • 503
    .iconservice-unavailable
  • 新增电池巡检
    .iconxinzengdianchixunjian
  • 电池巡检
    .icondianchixunjian
  • 电量
    .icondianliang
  • 无数据
    .iconwushuju
  • 返回
    .iconfanhui
  • 电话
    .icondianhua
  • 草稿箱
    .iconcaogaoxiang
  • 锁定
    .iconsuoding
  • 坑洞保护
    .iconkengdongbaohu
  • 通讯信号
    .icontongxunxinhao
  • 启动
    .iconqidong
  • 新增快捷合同
    .iconxinzengkuaijiehetong
  • 定位信号
    .icondingweixinhao
  • 新增框架合同
    .iconxinzengkuangjiahetong
  • 下 拉
    .iconxiala1
  • qrcode
    .iconqrcode
  • share
    .iconshare
  • 附件
    .iconicon-
  • 列表导出
    .iconliebiaodaochu
  • 新增交机
    .iconxinzengjiaoji
  • 服务接机
    .iconfuwujieji
  • 交机列表
    .iconjiaojiliebiao
  • 接机列表
    .iconjiejiliebiao
  • 新增接机
    .iconxinzengjieji
  • 服务交机
    .iconfuwujiaoji
  • 进退场补录
    .iconjintuichangbulu
  • 新增个人客户
    .iconxinzenggerenkehu
  • 新增退款单
    .iconxinzengtuikuandan
  • 新增进退场补录
    .iconxinzengjintuichangbulu
  • 新增服务报停
    .iconxinzengfuwubaoting
  • 设备维修
    .iconshebeiweixiu
  • 营收
    .iconyingshou
  • 实收
    .iconshishou
  • 应收
    .iconyingshou1
  • 报停管理
    .iconbaotingguanli
  • 设备保养
    .iconshebeibaoyang
  • 新增保养
    .iconxinzengbaoyang
  • 新增业务报停
    .iconxinzengyewubaoting
  • 新增检修
    .iconxinzengjianxiu
  • 设备巡检
    .iconshebeixunjian
  • 新增巡检
    .iconxinzengxunjian
  • 新增补液
    .iconxinzengbuye
  • 新增业务索赔
    .iconxinzengyewusuopei
  • 新增维修
    .iconxinzengweixiu
  • 新增服务索赔
    .iconxinzengfuwusuopei
  • add-func
    .iconadd-func
  • 收款管理
    .iconshoukuanguanli
  • 退款管理
    .icontuikuanguanli
  • 索赔管理
    .iconsuopeiguanli
  • 签署记录
    .iconqianshujilu
  • 我方物流
    .iconwofangwuliu
  • 退场管理
    .icontuichangguanli
  • 认证管理
    .iconrenzhengguanli
  • 新增企业客户
    .iconxinzengqiyekehu
  • 新增进场单
    .iconxinzengjinchangdan
  • 物流应付
    .iconwuliuyingfu
  • 折旧成本
    .iconzhejiuchengben
  • 转租公司
    .iconzhuanzugongsi
  • 转租报停
    .iconzhuanzubaoting
  • 新增退场单
    .iconxinzengtuichangdan
  • 物流公司
    .iconwuliugongsi
  • 融资管理
    .iconrongziguanli
  • 新增发票
    .iconxinzengfapiao
  • 转租应付
    .iconzhuanzuyingfu
  • 新增收款
    .iconxinzengshoukuan
  • 转租设备
    .iconzhuanzushebei
  • 物流记录
    .iconwuliujilu
  • 客户管理
    .iconkehuguanli
  • 配件管理
    .iconpeijianguanli1
  • 发票管理
    .iconfapiaoguanli
  • 设备控制
    .iconshebeikongzhi
  • 任务记录
    .iconrenwujilu
  • 待办任务
    .icondaibanrenwu
  • 待下发任务
    .icondaixiafarenwu
  • 附加合同
    .iconfujiahetong
  • 设备补液
    .iconshebeibuye
  • 新增合同
    .iconxinzenghetong
  • 设备检修
    .iconshebeijianxiu
  • 设备采购
    .iconshebeicaigou
  • 合同列表
    .iconhetongliebiao
  • 新增附加合同
    .iconxinzengfujiahetong
  • 新增合同变更
    .iconxinzenghetongbiangeng
  • 进场管理
    .iconjinchangguanli
  • 已办任务
    .iconyibanrenwu
  • 合同变更
    .iconhetongbiangeng
  • 设备分布
    .iconshebeifenbu
  • 设备调拨
    .iconshebeitiaobo
  • 设备档案
    .iconshebeidangan
  • 设备监控
    .iconshebeijiankong
  • 电池管理
    .icondianchiguanli1
  • 设备保险
    .iconshebeibaoxian
  • 盾牌
    .icondunpai
  • 预览
    .iconyulan
  • zcgl
    .iconzcgl
  • 电池管理
    .icondianchiguanli
  • lg-all-99-01
    .iconlg-all-99-01
  • lg-98-gkc-01
    .iconlg-98-gkc-01
  • woderenwu
    .iconwoderenwu
  • yiban
    .iconyiban
  • lianluojilu
    .iconlianluojilu
  • renwuguanli
    .iconrenwuguanli
  • renwuxiafa
    .iconrenwuxiafa
  • zl-94-kc-01
    .iconzl-94-kc-01
  • zl-95-cc-01
    .iconzl-95-cc-01
  • zl-96-zzj-01
    .iconzl-96-zzj-01
  • zl-97-wj-01
    .iconzl-97-wj-01
  • xunjian
    .iconxunjian
  • yingfushenhe
    .iconyingfushenhe
  • 保险单
    .iconbaoxiandan-
  • 设备型号
    .iconicon_device_shebeixinghao
  • 品牌
    .iconpinpai
  • 企业
    .iconqiye1
  • 关 闭
    .iconguanbi
  • 职位
    .iconzhiwei
  • 用户
    .iconyonghu
  • 报停申请
    .iconbaotingshenqing
  • 退款
    .icontuikuan
  • 对账单
    .iconduizhangdan
  • 添加合同
    .iconzu
  • 发票
    .iconfapiao
  • 变更
    .iconbiangeng
  • 收款
    .iconshoukuan
  • 设备维护
    .iconshebeiweihu
  • 分布
    .iconfenbu
  • 设备管理
    .iconshebeiguanli
  • 合同管理
    .iconhetongguanli
  • 合同执行
    .iconhetongzhihang
  • 其他
    .iconqita
  • 结算管理
    .iconziyuan
  • xuanzhong
    .iconxuanzhong
  • 警告
    .iconjinggao6
  • 警告
    .iconjinggao
  • 通知
    .icontongzhi
  • zl-90-未签
    .iconzl-90-weiqian
  • zl-89-待签-01
    .iconzl-89-daiqian-01
  • zl-91-已签
    .iconzl-91-yiqian
  • zl-92-待审批
    .iconzl-92-daishenpi
  • zl-93-拒签
    .iconzl-93-juqian
  • zl-88-铜牌-01
    .iconzl-88-tongpai-01
  • zl-86-金牌-01
    .iconzl-86-jinpai-01
  • zl-87-银牌-01
    .iconzl-87-yinpai-01
  • 多图对比
    .iconduotuduibi
  • 开发中
    .iconkaifazhong1
  • 表格
    .iconbiaoge
  • renshu
    .iconrenshu
  • 新增
    .iconxinzeng
  • 合同
    .iconhetong
  • 客户
    .iconkehu
  • 账款
    .iconzhangkuan
  • 图标_营收
    .iconrevenue-copy
  • 柱状图
    .iconzhuzhuangtu
  • 企业
    .iconqiye
  • zl-82-word-01
    .iconzl-word
  • zl-83-ppt-01
    .iconzl-ppt
  • zl-84-text-01
    .iconzl-text
  • zl-85-xlsx-01
    .iconzl-xlsx
  • zl-81-pdf
    .iconzl-pdf
  • 叉车
    .iconchache1
  • 挖掘机-01
    .iconwajueji01
  • 装载机
    .iconnongji
  • 卡车
    .iconkache
  • 吨位
    .icondunwei
  • 叉车
    .iconchache
  • 双箭头-右
    .icondouble-up
  • 双箭头-右
    .icondouble-arrow-left
  • cc
    .iconlixianchache1
  • wjj
    .iconwaji1
  • zzj
    .iconzhuangzaiji11
  • kc
    .iconkuangche11
  • jian
    .iconjian
  • peijianguanli
    .iconpeijianguanli
  • 报表
    .iconbaobiao
  • tiaobodan
    .icontiaobodan
  • 采购
    .iconcaigou
  • zl-36-logo
    .iconzl--logo
  • prepare-model
    .iconprepare-model
  • 金钱袋
    .iconico_home_obligation
  • tongxunlu
    .icontongxunlu
  • caogaoxiang
    .iconcaogaoxiang-
  • .iconjia
  • 撤回
    .iconchehui
  • zl-78-转租
    .iconzl--zhuanzu1
  • zl-77-控制
    .iconzl--kongzhi
  • zl-76-保养
    .iconzl--baoyang
  • zl-65-补液
    .iconzl--buye
  • zl-75-物流记录
    .iconzl--wuliujilu
  • zl-74-通用审批
    .iconzl--tongyongshenpi
  • zl-73-电子围栏
    .iconzl--dianziweilan
  • zl-72-客户管理-01-01
    .iconzl--kehuguanli--
  • zl-71-物流公司
    .iconzl--wuliugongsi
  • 附件
    .iconfujian
  • iconzhengli_zuzhijiagou
    .iconiconzhengli_zuzhijiagou
  • add
    .iconadd
  • zl-70-退款
    .iconzl--tuikuan
  • zl-69-巡检-01
    .iconzl--xunjian-
  • zl-68-展开
    .iconzl--zhankai
  • zl-67-全部
    .iconzl--quanbu
  • zl-66-维修
    .iconzl--weixiu
  • zl-63-倒序-01
    .iconzl--daoxu-
  • zl-64-正序-01
    .iconzl--zhengxu-
  • zl-61-驱动-01
    .iconzl--qudong-
  • zl-62-高度
    .iconzl--gaodu
  • zl-60-当前位置
    .iconzl--dangqianweizhi
  • zl-59-GPS
    .iconzl--GPS
  • zl-58-离线
    .iconzl--lixian
  • zl-56-定位信号
    .iconzl--dingweixinhao
  • zl-57-通讯信号
    .iconzl--tongxunxinhao
  • meiguo
    .iconmeiguo
  • china
    .iconzhongguo1
  • No_date
    .iconNo_date
  • zl-55-直臂车
    .iconzl--zhibiche1
  • zl-54-剪叉车
    .iconzl--jianchache2
  • zl-53-曲臂车
    .iconzl--qubiche
  • zl-52-档案
    .iconzl--dangan
  • zl-51-监控
    .iconzl--jiankong
  • zl-44-快链接
    .iconzl--kuailianjie
  • zl-50-禁用
    .iconzl--jinyong
  • zl-49-开启
    .iconzl--kaiqi
  • zl-48-出场
    .iconzl--chuchang
  • zl-47-入场
    .iconzl--ruchang
  • zl-46-调度
    .iconzl--tiaodu
  • zl-45-收起
    .iconzl--shouqi
  • zl-43-直臂车
    .iconzl--zhibiche
  • zl-42-剪叉车
    .iconzl--jianchache1
  • zl-41-清除
    .iconzl--qingchu
  • zl-40-故障
    .iconzl--guzhang
  • zl-39-剪叉车
    .iconzl--jianchache
  • zl-38-LOGO2
    .iconzl--LOGO1
  • arrow-right
    .iconarrow-up
  • arrow-right
    .iconarrow-down
  • arrow-right
    .iconarrow-right
  • zl-37-索赔
    .iconzl--suopei
  • zl-36-LOGO1
    .iconzl--LOGO
  • zl-35-注释
    .iconzl--zhushi
  • zl-33-错误
    .iconzl--cuowu
  • zl-34-正确
    .iconzl--zhengque
  • zl-32-拍照
    .iconzl--paizhao
  • zl-31-图片
    .iconzl--tupian
  • zl-30-提醒
    .iconzl--tixing
  • zl-29-等待
    .iconzl--dengdai
  • zl-28-时间
    .iconzl--shijian
  • zl-27-小屏
    .iconzl--xiaoping
  • zl-26-全屏
    .iconzl--quanping
  • zl-25-无络
    .iconzl--wuluo
  • zl-24-网络
    .iconzl--wangluo
  • zl-23-注意
    .iconzl--zhuyi
  • zl-22-备注
    .iconzl--beizhu
  • zl-21-疑问
    .iconzl--yiwen
  • zl-20-报警
    .iconzl--baojing
  • zl-19-账户
    .iconzl--zhanghu
  • zl-18-合同
    .iconzl--hetong
  • zl-17-坐标
    .iconzl--zuobiao
  • zl-16-刷新
    .iconzl--shuaxin
  • zl-15-发票
    .iconzl--fapiao
  • zl-14-设置
    .iconzl--shezhi
  • zl-13-扫码
    .iconzl--saoma
  • zl-12-搜索
    .iconzl--sousuo
  • zl-11-地图
    .iconzl--ditu
  • zl-10-消息
    .iconzl--xiaoxi
  • zl-08-可见
    .iconzl--kejian
  • zl-09-不可见
    .iconzl--bukejian
  • zl-07-删除
    .iconzl--shanchu
  • zl-06-编辑
    .iconzl--bianji
  • zl-04-锁车
    .iconzl--suoche
  • zl-05-解锁
    .iconzl--jiesuo
  • zl-03-日历
    .iconzl--rili

font-class 引用


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

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

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

使用步骤如下:

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

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

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

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

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

  • 新增换车单
    #iconxinzenghuanchedan
  • 换车管理
    #iconhuancheguanli
  • 503
    #iconservice-unavailable
  • 新增电池巡检
    #iconxinzengdianchixunjian
  • 电池巡检
    #icondianchixunjian
  • 电量
    #icondianliang
  • 无数据
    #iconwushuju
  • 返回
    #iconfanhui
  • 电话
    #icondianhua
  • 草稿箱
    #iconcaogaoxiang
  • 锁定
    #iconsuoding
  • 坑洞保护
    #iconkengdongbaohu
  • 通讯信号
    #icontongxunxinhao
  • 启动
    #iconqidong
  • 新增快捷合同
    #iconxinzengkuaijiehetong
  • 定位信号
    #icondingweixinhao
  • 新增框架合同
    #iconxinzengkuangjiahetong
  • 下 拉
    #iconxiala1
  • qrcode
    #iconqrcode
  • share
    #iconshare
  • 附件
    #iconicon-
  • 列表导出
    #iconliebiaodaochu
  • 新增交机
    #iconxinzengjiaoji
  • 服务接机
    #iconfuwujieji
  • 交机列表
    #iconjiaojiliebiao
  • 接机列表
    #iconjiejiliebiao
  • 新增接机
    #iconxinzengjieji
  • 服务交机
    #iconfuwujiaoji
  • 进退场补录
    #iconjintuichangbulu
  • 新增个人客户
    #iconxinzenggerenkehu
  • 新增退款单
    #iconxinzengtuikuandan
  • 新增进退场补录
    #iconxinzengjintuichangbulu
  • 新增服务报停
    #iconxinzengfuwubaoting
  • 设备维修
    #iconshebeiweixiu
  • 营收
    #iconyingshou
  • 实收
    #iconshishou
  • 应收
    #iconyingshou1
  • 报停管理
    #iconbaotingguanli
  • 设备保养
    #iconshebeibaoyang
  • 新增保养
    #iconxinzengbaoyang
  • 新增业务报停
    #iconxinzengyewubaoting
  • 新增检修
    #iconxinzengjianxiu
  • 设备巡检
    #iconshebeixunjian
  • 新增巡检
    #iconxinzengxunjian
  • 新增补液
    #iconxinzengbuye
  • 新增业务索赔
    #iconxinzengyewusuopei
  • 新增维修
    #iconxinzengweixiu
  • 新增服务索赔
    #iconxinzengfuwusuopei
  • add-func
    #iconadd-func
  • 收款管理
    #iconshoukuanguanli
  • 退款管理
    #icontuikuanguanli
  • 索赔管理
    #iconsuopeiguanli
  • 签署记录
    #iconqianshujilu
  • 我方物流
    #iconwofangwuliu
  • 退场管理
    #icontuichangguanli
  • 认证管理
    #iconrenzhengguanli
  • 新增企业客户
    #iconxinzengqiyekehu
  • 新增进场单
    #iconxinzengjinchangdan
  • 物流应付
    #iconwuliuyingfu
  • 折旧成本
    #iconzhejiuchengben
  • 转租公司
    #iconzhuanzugongsi
  • 转租报停
    #iconzhuanzubaoting
  • 新增退场单
    #iconxinzengtuichangdan
  • 物流公司
    #iconwuliugongsi
  • 融资管理
    #iconrongziguanli
  • 新增发票
    #iconxinzengfapiao
  • 转租应付
    #iconzhuanzuyingfu
  • 新增收款
    #iconxinzengshoukuan
  • 转租设备
    #iconzhuanzushebei
  • 物流记录
    #iconwuliujilu
  • 客户管理
    #iconkehuguanli
  • 配件管理
    #iconpeijianguanli1
  • 发票管理
    #iconfapiaoguanli
  • 设备控制
    #iconshebeikongzhi
  • 任务记录
    #iconrenwujilu
  • 待办任务
    #icondaibanrenwu
  • 待下发任务
    #icondaixiafarenwu
  • 附加合同
    #iconfujiahetong
  • 设备补液
    #iconshebeibuye
  • 新增合同
    #iconxinzenghetong
  • 设备检修
    #iconshebeijianxiu
  • 设备采购
    #iconshebeicaigou
  • 合同列表
    #iconhetongliebiao
  • 新增附加合同
    #iconxinzengfujiahetong
  • 新增合同变更
    #iconxinzenghetongbiangeng
  • 进场管理
    #iconjinchangguanli
  • 已办任务
    #iconyibanrenwu
  • 合同变更
    #iconhetongbiangeng
  • 设备分布
    #iconshebeifenbu
  • 设备调拨
    #iconshebeitiaobo
  • 设备档案
    #iconshebeidangan
  • 设备监控
    #iconshebeijiankong
  • 电池管理
    #icondianchiguanli1
  • 设备保险
    #iconshebeibaoxian
  • 盾牌
    #icondunpai
  • 预览
    #iconyulan
  • zcgl
    #iconzcgl
  • 电池管理
    #icondianchiguanli
  • lg-all-99-01
    #iconlg-all-99-01
  • lg-98-gkc-01
    #iconlg-98-gkc-01
  • woderenwu
    #iconwoderenwu
  • yiban
    #iconyiban
  • lianluojilu
    #iconlianluojilu
  • renwuguanli
    #iconrenwuguanli
  • renwuxiafa
    #iconrenwuxiafa
  • zl-94-kc-01
    #iconzl-94-kc-01
  • zl-95-cc-01
    #iconzl-95-cc-01
  • zl-96-zzj-01
    #iconzl-96-zzj-01
  • zl-97-wj-01
    #iconzl-97-wj-01
  • xunjian
    #iconxunjian
  • yingfushenhe
    #iconyingfushenhe
  • 保险单
    #iconbaoxiandan-
  • 设备型号
    #iconicon_device_shebeixinghao
  • 品牌
    #iconpinpai
  • 企业
    #iconqiye1
  • 关 闭
    #iconguanbi
  • 职位
    #iconzhiwei
  • 用户
    #iconyonghu
  • 报停申请
    #iconbaotingshenqing
  • 退款
    #icontuikuan
  • 对账单
    #iconduizhangdan
  • 添加合同
    #iconzu
  • 发票
    #iconfapiao
  • 变更
    #iconbiangeng
  • 收款
    #iconshoukuan
  • 设备维护
    #iconshebeiweihu
  • 分布
    #iconfenbu
  • 设备管理
    #iconshebeiguanli
  • 合同管理
    #iconhetongguanli
  • 合同执行
    #iconhetongzhihang
  • 其他
    #iconqita
  • 结算管理
    #iconziyuan
  • xuanzhong
    #iconxuanzhong
  • 警告
    #iconjinggao6
  • 警告
    #iconjinggao
  • 通知
    #icontongzhi
  • zl-90-未签
    #iconzl-90-weiqian
  • zl-89-待签-01
    #iconzl-89-daiqian-01
  • zl-91-已签
    #iconzl-91-yiqian
  • zl-92-待审批
    #iconzl-92-daishenpi
  • zl-93-拒签
    #iconzl-93-juqian
  • zl-88-铜牌-01
    #iconzl-88-tongpai-01
  • zl-86-金牌-01
    #iconzl-86-jinpai-01
  • zl-87-银牌-01
    #iconzl-87-yinpai-01
  • 多图对比
    #iconduotuduibi
  • 开发中
    #iconkaifazhong1
  • 表格
    #iconbiaoge
  • renshu
    #iconrenshu
  • 新增
    #iconxinzeng
  • 合同
    #iconhetong
  • 客户
    #iconkehu
  • 账款
    #iconzhangkuan
  • 图标_营收
    #iconrevenue-copy
  • 柱状图
    #iconzhuzhuangtu
  • 企业
    #iconqiye
  • zl-82-word-01
    #iconzl-word
  • zl-83-ppt-01
    #iconzl-ppt
  • zl-84-text-01
    #iconzl-text
  • zl-85-xlsx-01
    #iconzl-xlsx
  • zl-81-pdf
    #iconzl-pdf
  • 叉车
    #iconchache1
  • 挖掘机-01
    #iconwajueji01
  • 装载机
    #iconnongji
  • 卡车
    #iconkache
  • 吨位
    #icondunwei
  • 叉车
    #iconchache
  • 双箭头-右
    #icondouble-up
  • 双箭头-右
    #icondouble-arrow-left
  • cc
    #iconlixianchache1
  • wjj
    #iconwaji1
  • zzj
    #iconzhuangzaiji11
  • kc
    #iconkuangche11
  • jian
    #iconjian
  • peijianguanli
    #iconpeijianguanli
  • 报表
    #iconbaobiao
  • tiaobodan
    #icontiaobodan
  • 采购
    #iconcaigou
  • zl-36-logo
    #iconzl--logo
  • prepare-model
    #iconprepare-model
  • 金钱袋
    #iconico_home_obligation
  • tongxunlu
    #icontongxunlu
  • caogaoxiang
    #iconcaogaoxiang-
  • #iconjia
  • 撤回
    #iconchehui
  • zl-78-转租
    #iconzl--zhuanzu1
  • zl-77-控制
    #iconzl--kongzhi
  • zl-76-保养
    #iconzl--baoyang
  • zl-65-补液
    #iconzl--buye
  • zl-75-物流记录
    #iconzl--wuliujilu
  • zl-74-通用审批
    #iconzl--tongyongshenpi
  • zl-73-电子围栏
    #iconzl--dianziweilan
  • zl-72-客户管理-01-01
    #iconzl--kehuguanli--
  • zl-71-物流公司
    #iconzl--wuliugongsi
  • 附件
    #iconfujian
  • iconzhengli_zuzhijiagou
    #iconiconzhengli_zuzhijiagou
  • add
    #iconadd
  • zl-70-退款
    #iconzl--tuikuan
  • zl-69-巡检-01
    #iconzl--xunjian-
  • zl-68-展开
    #iconzl--zhankai
  • zl-67-全部
    #iconzl--quanbu
  • zl-66-维修
    #iconzl--weixiu
  • zl-63-倒序-01
    #iconzl--daoxu-
  • zl-64-正序-01
    #iconzl--zhengxu-
  • zl-61-驱动-01
    #iconzl--qudong-
  • zl-62-高度
    #iconzl--gaodu
  • zl-60-当前位置
    #iconzl--dangqianweizhi
  • zl-59-GPS
    #iconzl--GPS
  • zl-58-离线
    #iconzl--lixian
  • zl-56-定位信号
    #iconzl--dingweixinhao
  • zl-57-通讯信号
    #iconzl--tongxunxinhao
  • meiguo
    #iconmeiguo
  • china
    #iconzhongguo1
  • No_date
    #iconNo_date
  • zl-55-直臂车
    #iconzl--zhibiche1
  • zl-54-剪叉车
    #iconzl--jianchache2
  • zl-53-曲臂车
    #iconzl--qubiche
  • zl-52-档案
    #iconzl--dangan
  • zl-51-监控
    #iconzl--jiankong
  • zl-44-快链接
    #iconzl--kuailianjie
  • zl-50-禁用
    #iconzl--jinyong
  • zl-49-开启
    #iconzl--kaiqi
  • zl-48-出场
    #iconzl--chuchang
  • zl-47-入场
    #iconzl--ruchang
  • zl-46-调度
    #iconzl--tiaodu
  • zl-45-收起
    #iconzl--shouqi
  • zl-43-直臂车
    #iconzl--zhibiche
  • zl-42-剪叉车
    #iconzl--jianchache1
  • zl-41-清除
    #iconzl--qingchu
  • zl-40-故障
    #iconzl--guzhang
  • zl-39-剪叉车
    #iconzl--jianchache
  • zl-38-LOGO2
    #iconzl--LOGO1
  • arrow-right
    #iconarrow-up
  • arrow-right
    #iconarrow-down
  • arrow-right
    #iconarrow-right
  • zl-37-索赔
    #iconzl--suopei
  • zl-36-LOGO1
    #iconzl--LOGO
  • zl-35-注释
    #iconzl--zhushi
  • zl-33-错误
    #iconzl--cuowu
  • zl-34-正确
    #iconzl--zhengque
  • zl-32-拍照
    #iconzl--paizhao
  • zl-31-图片
    #iconzl--tupian
  • zl-30-提醒
    #iconzl--tixing
  • zl-29-等待
    #iconzl--dengdai
  • zl-28-时间
    #iconzl--shijian
  • zl-27-小屏
    #iconzl--xiaoping
  • zl-26-全屏
    #iconzl--quanping
  • zl-25-无络
    #iconzl--wuluo
  • zl-24-网络
    #iconzl--wangluo
  • zl-23-注意
    #iconzl--zhuyi
  • zl-22-备注
    #iconzl--beizhu
  • zl-21-疑问
    #iconzl--yiwen
  • zl-20-报警
    #iconzl--baojing
  • zl-19-账户
    #iconzl--zhanghu
  • zl-18-合同
    #iconzl--hetong
  • zl-17-坐标
    #iconzl--zuobiao
  • zl-16-刷新
    #iconzl--shuaxin
  • zl-15-发票
    #iconzl--fapiao
  • zl-14-设置
    #iconzl--shezhi
  • zl-13-扫码
    #iconzl--saoma
  • zl-12-搜索
    #iconzl--sousuo
  • zl-11-地图
    #iconzl--ditu
  • zl-10-消息
    #iconzl--xiaoxi
  • zl-08-可见
    #iconzl--kejian
  • zl-09-不可见
    #iconzl--bukejian
  • zl-07-删除
    #iconzl--shanchu
  • zl-06-编辑
    #iconzl--bianji
  • zl-04-锁车
    #iconzl--suoche
  • zl-05-解锁
    #iconzl--jiesuo
  • zl-03-日历
    #iconzl--rili

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>