• 新增 圆
    
  • 图片
    
  • 图层
    
  • 跳转
    
  • clock
    
  • 重点路段
    
  • user
    
  • 缺失
    
  • 请假
    
  • 出差
    
  • 修改密码
    
  • 清除
    
  • 模型管理
    
  • 修改
    
  • 不通过
    
  • 部门
    
  • 字典
    
  • 通知
    
  • 节假日
    
  • 热力图
    
  • 通过
    
  • 参数
    
  • 首页-首页
    
  • 设备
    
  • 注销
    
  • Excel文件
    
  • 密码
    
  • 地点
    
  • 提醒
    
  • 刷新
    
  • 确认方案
    
  • 链接
    
  • 用户组
    
  • 区域
    
  • 签到
    
  • 位置
    
  • 详情
    
  • 统计
    
  • 分组
    
  • 排班管理
    
  • 日历
    
  • 设备
    
  • 离线
    
  • 有车一族
    
  • 导出
    
  • 警察
    
  • icon 离开项目
    
  • 模块
    
  • 公路
    
  • 308上一页、后退、返回
    
  • 309下一页、前进、查看更多
    
  • 消息
    
  • 考勤
    
  • 复制
    
  • 导入 (3)
    
  • 值班安排
    
  • 清除
    
  • 
  • 缺勤
    
  • 预案管理
    
  • 公告
    
  • 查询
    
  • 排班考勤
    
  • 操作
    
  • 视频
    
  • 更多
    
  • 组队
    
  • 重新加载
    
  • 登录
    
  • 粘贴
    
  • 切换
    
  • 交通
    
  • 用户
    
  • 删 除
    
  • 车辆
    
  • 框选
    
  • 角色管理
    
  • 系统设置
    
  • 迟到
    
  • 外出
    
  • 公告变更
    
  • 休假管理
    
  • 早退检测
    
  • 审批
    
  • 权限
    
  • 全屏
    
  • 设置
    
  • 班次管理
    
  • 人员班次管理
    
  • 人员排班
    
  • 任务调度
    
  • 异常
    
  • 基础数据
    
  • 迟到
    
  • 早退
    
  • 旷工
    
  • 地图
    
  • 排班
    
  • 辅助决策
    
  • 时间
    
  • 城市治理
    
  • 已处理告警
    
  • 日志
    
  • 
  • 管理人员
    
  • 
  • 实时视频监控
    
  • 检查通报
    
  • 隐患-线
    
  • 预警
    
  • 查询业务
    
  • Icon - 待处理
    
  • 中心化
    
  • 考核
    
  • 数据,可视化
    
  • 隐患易发点
    
  • 知识库
    
  • 考核设置
    
  • 邀请机构管理
    
  • icon_road
    
  • 全屏
    
  • 退出全屏
    
  • 区域管理
    
  • 菜单
    
  • road-map-line
    
  • road-map-line
    
  • 地图新增
    
  • 模型
    
  • 分析
    
  • 流程
    
  • 用户申诉
    
  • 待处理合同
    
  • 违法
    
  • 考试
    
  • 车辆
    
  • 事故
    
  • 检验
    
  • 查验
    
  • 驾证
    
  • 换肤
    

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

  • 新增 圆
    .ico-xinzengyuan
  • 图片
    .ico-tupian
  • 图层
    .ico-tuceng
  • 跳转
    .ico-tiaozhuan
  • clock
    .ico-clock
  • 重点路段
    .ico-zhongdianluduan
  • user
    .ico-user
  • 缺失
    .ico-queka
  • 请假
    .ico-qingjia
  • 出差
    .ico-chuchai
  • 修改密码
    .ico-mima
  • 清除
    .ico-qingchu
  • 模型管理
    .ico-weibiaoti13
  • 修改
    .ico-xiugai
  • 不通过
    .ico-butongguo
  • 部门
    .ico-bumen
  • 字典
    .ico-zidian
  • 通知
    .ico-tongzhi
  • 节假日
    .ico-holiday
  • 热力图
    .ico-relitu
  • 通过
    .ico-tongguo
  • 参数
    .ico-canshu
  • 首页-首页
    .ico-shouye
  • 设备
    .ico-shebei25
  • 注销
    .ico-zhuxiao
  • Excel文件
    .ico-excelwenjian
  • 密码
    .ico-lock
  • 地点
    .ico-didian
  • 提醒
    .ico-tixing
  • 刷新
    .ico-shuaxin
  • 确认方案
    .ico-querenfangan
  • 链接
    .ico-link
  • 用户组
    .ico-yonghuzu
  • 区域
    .ico-quyu
  • 签到
    .ico-qiandao
  • 位置
    .ico-weizhi
  • 详情
    .ico-xiangqing
  • 统计
    .ico-tongji
  • 分组
    .ico-Grouping
  • 排班管理
    .ico-paibanguanli
  • 日历
    .ico-rili
  • 设备
    .ico-shebei
  • 离线
    .ico-lixian
  • 有车一族
    .ico-youche
  • 导出
    .ico-daochu
  • 警察
    .ico-jingcha
  • icon 离开项目
    .ico-likai
  • 模块
    .ico-mokuai
  • 公路
    .ico-gonglu
  • 308上一页、后退、返回
    .ico-left-angle
  • 309下一页、前进、查看更多
    .ico-right-angle
  • 消息
    .ico-ai-message
  • 考勤
    .ico-kaoqin
  • 复制
    .ico-fuzhi
  • 导入 (3)
    .ico-daoru
  • 值班安排
    .ico-zhibananpai
  • 清除
    .ico-qingchu1
  • .ico-che
  • 缺勤
    .ico-queqin
  • 预案管理
    .ico-yuanguanli
  • 公告
    .ico-gonggao
  • 查询
    .ico-chaxun
  • 排班考勤
    .ico-paibankaoqin
  • 操作
    .ico-caozuo
  • 视频
    .ico-shipin
  • 更多
    .ico-gengduo
  • 组队
    .ico-zudui
  • 重新加载
    .ico-chongxinjiazai
  • 登录
    .ico-denglu
  • 粘贴
    .ico-zhantie
  • 切换
    .ico-qiehuan
  • 交通
    .ico-jiaotong
  • 用户
    .ico-yonghu
  • 删 除
    .ico-shanchu
  • 车辆
    .ico-cheliang1
  • 框选
    .ico-region
  • 角色管理
    .ico-jiaoseguanli
  • 系统设置
    .ico-set
  • 迟到
    .ico-chidao
  • 外出
    .ico-waichu
  • 公告变更
    .ico-biangeng
  • 休假管理
    .ico-xiujia
  • 早退检测
    .ico-zaotui
  • 审批
    .ico-shenpi
  • 权限
    .ico-quanxian
  • 全屏
    .ico-quanping1
  • 设置
    .ico-shezhi
  • 班次管理
    .ico-banciguanli
  • 人员班次管理
    .ico-renyuanbanciguanli
  • 人员排班
    .ico-renyuanpaiban
  • 任务调度
    .ico-renwutiaodu
  • 异常
    .ico-yichang
  • 基础数据
    .ico-jichushuju
  • 迟到
    .ico-chidao1
  • 早退
    .ico-zaotui1
  • 旷工
    .ico-kuanggong
  • 地图
    .ico-map
  • 排班
    .ico-paiban
  • 辅助决策
    .ico-gaiicon-
  • 时间
    .ico-ico_home_committed
  • 城市治理
    .ico-chengshizhili
  • 已处理告警
    .ico-yichuligaojing
  • 日志
    .ico-rizhi
  • .ico-jia
  • 管理人员
    .ico-guanlirenyuan
  • .ico-dian
  • 实时视频监控
    .ico-shishishipinjiankong
  • 检查通报
    .ico-huaban
  • 隐患-线
    .ico-yinhuan-xian-
  • 预警
    .ico-yujing
  • 查询业务
    .ico-chaxunyewu
  • Icon - 待处理
    .ico-Icon-daichuli
  • 中心化
    .ico-ico
  • 考核
    .ico-kaohe
  • 数据,可视化
    .ico-icon-
  • 隐患易发点
    .ico-yinhuanyifadian
  • 知识库
    .ico-zhishi
  • 考核设置
    .ico-kaoheshezhi
  • 邀请机构管理
    .ico-jigouguanli
  • icon_road
    .ico-icon_road
  • 全屏
    .ico-quanping
  • 退出全屏
    .ico-tuichuquanping
  • 区域管理
    .ico-quyuguanli
  • 菜单
    .ico-caidan
  • road-map-line
    .ico-road-map-line
  • road-map-line
    .ico-road-map-line1
  • 地图新增
    .ico-dituxinzeng
  • 模型
    .ico-moxing___
  • 分析
    .ico-fenxi
  • 流程
    .ico-liucheng
  • 用户申诉
    .ico-yonghushensu
  • 待处理合同
    .ico-daichulihetong
  • 违法
    .ico-weifa
  • 考试
    .ico-kaoshi
  • 车辆
    .ico-cheliang
  • 事故
    .ico-shigu
  • 检验
    .ico-jianyan
  • 查验
    .ico-chayan
  • 驾证
    .ico-jiazheng
  • 换肤
    .ico-huanfu

font-class 引用


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

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

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

使用步骤如下:

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

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

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

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

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

  • 新增 圆
    #ico-xinzengyuan
  • 图片
    #ico-tupian
  • 图层
    #ico-tuceng
  • 跳转
    #ico-tiaozhuan
  • clock
    #ico-clock
  • 重点路段
    #ico-zhongdianluduan
  • user
    #ico-user
  • 缺失
    #ico-queka
  • 请假
    #ico-qingjia
  • 出差
    #ico-chuchai
  • 修改密码
    #ico-mima
  • 清除
    #ico-qingchu
  • 模型管理
    #ico-weibiaoti13
  • 修改
    #ico-xiugai
  • 不通过
    #ico-butongguo
  • 部门
    #ico-bumen
  • 字典
    #ico-zidian
  • 通知
    #ico-tongzhi
  • 节假日
    #ico-holiday
  • 热力图
    #ico-relitu
  • 通过
    #ico-tongguo
  • 参数
    #ico-canshu
  • 首页-首页
    #ico-shouye
  • 设备
    #ico-shebei25
  • 注销
    #ico-zhuxiao
  • Excel文件
    #ico-excelwenjian
  • 密码
    #ico-lock
  • 地点
    #ico-didian
  • 提醒
    #ico-tixing
  • 刷新
    #ico-shuaxin
  • 确认方案
    #ico-querenfangan
  • 链接
    #ico-link
  • 用户组
    #ico-yonghuzu
  • 区域
    #ico-quyu
  • 签到
    #ico-qiandao
  • 位置
    #ico-weizhi
  • 详情
    #ico-xiangqing
  • 统计
    #ico-tongji
  • 分组
    #ico-Grouping
  • 排班管理
    #ico-paibanguanli
  • 日历
    #ico-rili
  • 设备
    #ico-shebei
  • 离线
    #ico-lixian
  • 有车一族
    #ico-youche
  • 导出
    #ico-daochu
  • 警察
    #ico-jingcha
  • icon 离开项目
    #ico-likai
  • 模块
    #ico-mokuai
  • 公路
    #ico-gonglu
  • 308上一页、后退、返回
    #ico-left-angle
  • 309下一页、前进、查看更多
    #ico-right-angle
  • 消息
    #ico-ai-message
  • 考勤
    #ico-kaoqin
  • 复制
    #ico-fuzhi
  • 导入 (3)
    #ico-daoru
  • 值班安排
    #ico-zhibananpai
  • 清除
    #ico-qingchu1
  • #ico-che
  • 缺勤
    #ico-queqin
  • 预案管理
    #ico-yuanguanli
  • 公告
    #ico-gonggao
  • 查询
    #ico-chaxun
  • 排班考勤
    #ico-paibankaoqin
  • 操作
    #ico-caozuo
  • 视频
    #ico-shipin
  • 更多
    #ico-gengduo
  • 组队
    #ico-zudui
  • 重新加载
    #ico-chongxinjiazai
  • 登录
    #ico-denglu
  • 粘贴
    #ico-zhantie
  • 切换
    #ico-qiehuan
  • 交通
    #ico-jiaotong
  • 用户
    #ico-yonghu
  • 删 除
    #ico-shanchu
  • 车辆
    #ico-cheliang1
  • 框选
    #ico-region
  • 角色管理
    #ico-jiaoseguanli
  • 系统设置
    #ico-set
  • 迟到
    #ico-chidao
  • 外出
    #ico-waichu
  • 公告变更
    #ico-biangeng
  • 休假管理
    #ico-xiujia
  • 早退检测
    #ico-zaotui
  • 审批
    #ico-shenpi
  • 权限
    #ico-quanxian
  • 全屏
    #ico-quanping1
  • 设置
    #ico-shezhi
  • 班次管理
    #ico-banciguanli
  • 人员班次管理
    #ico-renyuanbanciguanli
  • 人员排班
    #ico-renyuanpaiban
  • 任务调度
    #ico-renwutiaodu
  • 异常
    #ico-yichang
  • 基础数据
    #ico-jichushuju
  • 迟到
    #ico-chidao1
  • 早退
    #ico-zaotui1
  • 旷工
    #ico-kuanggong
  • 地图
    #ico-map
  • 排班
    #ico-paiban
  • 辅助决策
    #ico-gaiicon-
  • 时间
    #ico-ico_home_committed
  • 城市治理
    #ico-chengshizhili
  • 已处理告警
    #ico-yichuligaojing
  • 日志
    #ico-rizhi
  • #ico-jia
  • 管理人员
    #ico-guanlirenyuan
  • #ico-dian
  • 实时视频监控
    #ico-shishishipinjiankong
  • 检查通报
    #ico-huaban
  • 隐患-线
    #ico-yinhuan-xian-
  • 预警
    #ico-yujing
  • 查询业务
    #ico-chaxunyewu
  • Icon - 待处理
    #ico-Icon-daichuli
  • 中心化
    #ico-ico
  • 考核
    #ico-kaohe
  • 数据,可视化
    #ico-icon-
  • 隐患易发点
    #ico-yinhuanyifadian
  • 知识库
    #ico-zhishi
  • 考核设置
    #ico-kaoheshezhi
  • 邀请机构管理
    #ico-jigouguanli
  • icon_road
    #ico-icon_road
  • 全屏
    #ico-quanping
  • 退出全屏
    #ico-tuichuquanping
  • 区域管理
    #ico-quyuguanli
  • 菜单
    #ico-caidan
  • road-map-line
    #ico-road-map-line
  • road-map-line
    #ico-road-map-line1
  • 地图新增
    #ico-dituxinzeng
  • 模型
    #ico-moxing___
  • 分析
    #ico-fenxi
  • 流程
    #ico-liucheng
  • 用户申诉
    #ico-yonghushensu
  • 待处理合同
    #ico-daichulihetong
  • 违法
    #ico-weifa
  • 考试
    #ico-kaoshi
  • 车辆
    #ico-cheliang
  • 事故
    #ico-shigu
  • 检验
    #ico-jianyan
  • 查验
    #ico-chayan
  • 驾证
    #ico-jiazheng
  • 换肤
    #ico-huanfu

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>