• 终止
    
  • 路由器
    
  • 保存
    
  • 闪电1
    
  • 闪电
    
  • 登录
    
  • 艾特
    
  • 导出
    
  • 复制
    
  • 切换
    
  • 全屏
    
  • 关闭全屏
    
  • 链接
    
  • 列表
    
  • 列表
    
  • 节点帮助
    
  • 模型
    
  • 保存布局
    
  • 节点-结束
    
  • 类目 品类 分类 类别
    
  • 流程
    
  • 公司
    
  • 部门
    
  • 
  • 撤销
    
  • 帮助
    
  • 移动设备手机
    
  • 计划
    
  • 角色管理
    
  • 13-配置SQL
    
  • 职务管理
    
  • 组织机构
    
  • 国际化
    
  • 组管理
    
  • 员工管理
    
  • 数据分析
    
  • 异常条件设置
    
  • 登录日志
    
  • 异常管理
    
  • 分析
    
  • 图表 上升趋势
    
  • 图表
    
  • 图表 柱状图
    
  • 图表 多维柱状图
    
  • 信息维护
    
  • 日志
    
  • 角色权限
    
  • 激活
    
  • 职位岗位
    
  • 数据权限
    
  • 待办
    
  • 岗位授权管理
    
  • 归档
    
  • 配置
    
  • 菜单
    
  • 分组
    
  • 回收站
    
  • 表单配置
    
  • 组织架构
    
  • 权限
    
  • 业务报表
    
  • 权限修改
    
  • 业务
    
  • 数字顺序
    
  • 角色授权
    
  • 节点管理
    
  • 失效
    
  • 查看
    
  • 催办
    
  • 传阅
    
  • 文件-传阅
    
  • 搜索
    
  • 搜索
    
  • 搜索
    
  • 审批
    
  • 我的申请
    
  • 类型
    
  • 流程图
    
  • 我的申请
    
  • 类型
    
  • 我的申请
    
  • 审批
    
  • 我的申请
    
  • 任务
    
  • 数据字典
    
  • 中心
    
  • 任务
    
  • 模版
    
  • 授权
    
  • 模版
    
  • 版本
    
  • 数据字典
    
  • 任务
    
  • 查找
    
  • 到货退回单
    
  • 授权
    
  • 传阅
    
  • 数据字典
    
  • 授权
    
  • 查找
    
  • 授权
    
  • 查找
    
  • 版本
    
  • 审批类型
    
  • 草稿箱
    
  • 我的收藏
    
  • 申请
    
  • 类型配置@3x
    
  • 已审批列表
    
  • 授权
    
  • 类型配置
    
  • 版本
    
  • Icon - 我的申请
    
  • 传阅
    
  • 在途跟踪
    
  • 节点类型-3
    
  • 中心
    
  • 中心
    

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-finish
  • 路由器
    .icon-luyouqi
  • 保存
    .icon-gongdanguanli-gongda
  • 闪电1
    .icon-shandian1
  • 闪电
    .icon-shandian2
  • 登录
    .icon-denglu
  • 艾特
    .icon-aite
  • 导出
    .icon-daochu
  • 复制
    .icon-copy
  • 切换
    .icon-web-icon-
  • 全屏
    .icon-quanping
  • 关闭全屏
    .icon-guanbiquanping
  • 链接
    .icon-lianjie
  • 列表
    .icon-liebiao
  • 列表
    .icon-liebiao1
  • 节点帮助
    .icon-jiedianbangzhu
  • 模型
    .icon-moxing___
  • 保存布局
    .icon-baocunbuju
  • 节点-结束
    .icon-jiedianjieshu
  • 类目 品类 分类 类别
    .icon-leimupinleifenleileibie
  • 流程
    .icon-liucheng
  • 公司
    .icon-gongsi
  • 部门
    .icon-bumen
  • .icon-gou
  • 撤销
    .icon-weibiaoti545
  • 帮助
    .icon-bangzhu
  • 移动设备手机
    .icon-yidongshebei
  • 计划
    .icon-jihua
  • 角色管理
    .icon-jiaoseguanli
  • 13-配置SQL
    .icon--peizhiSQL
  • 职务管理
    .icon-zhiwuguanli
  • 组织机构
    .icon-organ
  • 国际化
    .icon-world
  • 组管理
    .icon-zuguanli
  • 员工管理
    .icon-yuangongguanli
  • 数据分析
    .icon-shujufenxi1
  • 异常条件设置
    .icon-yichangtiaojianshezhi
  • 登录日志
    .icon-denglurizhi-
  • 异常管理
    .icon-yichangguanli
  • 分析
    .icon-icon1
  • 图表 上升趋势
    .icon-tubiaoshangshengqushi
  • 图表
    .icon-tubiao
  • 图表 柱状图
    .icon-tubiaozhuzhuangtu
  • 图表 多维柱状图
    .icon-tubiaozhuzhuangtu1
  • 信息维护
    .icon-navicon-xxwh
  • 日志
    .icon-zhuanxierizhi
  • 角色权限
    .icon-jiaosequanxian
  • 激活
    .icon-activation
  • 职位岗位
    .icon-drxx12
  • 数据权限
    .icon-shujuquanxian
  • 待办
    .icon-daiban
  • 岗位授权管理
    .icon-RectangleCopy
  • 归档
    .icon-guidang
  • 配置
    .icon-icon-test
  • 菜单
    .icon-menu
  • 分组
    .icon-fenzu
  • 回收站
    .icon-huishouzhan
  • 表单配置
    .icon-biaodanpeizhi
  • 组织架构
    .icon-zuzhijiagou
  • 权限
    .icon-quanxian
  • 业务报表
    .icon-yewubaobiao
  • 权限修改
    .icon-icon-quanxianxg
  • 业务
    .icon-yewu
  • 数字顺序
    .icon-shuzishunxu
  • 角色授权
    .icon-jiaoseshouquan
  • 节点管理
    .icon-jiedianguanli
  • 失效
    .icon-shixiao
  • 查看
    .icon-check-line
  • 催办
    .icon-cuiban
  • 传阅
    .icon-chuanyue2
  • 文件-传阅
    .icon-wj-cy
  • 搜索
    .icon-sousuo
  • 搜索
    .icon-sousuo1
  • 搜索
    .icon-sousuo2
  • 审批
    .icon-639
  • 我的申请
    .icon-wodeshenqing-
  • 类型
    .icon-leixing
  • 流程图
    .icon-liuchengtu
  • 我的申请
    .icon-wodeshenqing
  • 类型
    .icon-leixing1
  • 我的申请
    .icon-wodeshenqing1
  • 审批
    .icon-shenpi
  • 我的申请
    .icon-wodeshenqing2
  • 任务
    .icon-renwu
  • 数据字典
    .icon-shujuzidian
  • 中心
    .icon-zhongxin
  • 任务
    .icon-renwu1
  • 模版
    .icon-moban
  • 授权
    .icon-shouquan
  • 模版
    .icon-moban1
  • 版本
    .icon-banben
  • 数据字典
    .icon-shujuzidian1
  • 任务
    .icon-task
  • 查找
    .icon-chazhao
  • 到货退回单
    .icon-navicon-dhthd
  • 授权
    .icon-iot-sq
  • 传阅
    .icon-chuanyue
  • 数据字典
    .icon-shujuzidian2
  • 授权
    .icon-shouquan1
  • 查找
    .icon-chazhao1
  • 授权
    .icon-shouquan2
  • 查找
    .icon-chazhao2
  • 版本
    .icon-banben1
  • 审批类型
    .icon-shenpileixing
  • 草稿箱
    .icon-caogaoxiang
  • 我的收藏
    .icon-wodeshoucang
  • 申请
    .icon-shenqing
  • 类型配置@3x
    .icon-leixingpeizhix
  • 已审批列表
    .icon-yishenpiliebiao-
  • 授权
    .icon-shouquan3
  • 类型配置
    .icon-leixingpeizhi
  • 版本
    .icon-banben2
  • Icon - 我的申请
    .icon-Icon-wodeshenqing
  • 传阅
    .icon-chuanyue1
  • 在途跟踪
    .icon-zaitugenzong
  • 节点类型-3
    .icon-jiedianleixing-
  • 中心
    .icon-zhongxin1
  • 中心
    .icon-zhongxin2

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-finish
  • 路由器
    #icon-luyouqi
  • 保存
    #icon-gongdanguanli-gongda
  • 闪电1
    #icon-shandian1
  • 闪电
    #icon-shandian2
  • 登录
    #icon-denglu
  • 艾特
    #icon-aite
  • 导出
    #icon-daochu
  • 复制
    #icon-copy
  • 切换
    #icon-web-icon-
  • 全屏
    #icon-quanping
  • 关闭全屏
    #icon-guanbiquanping
  • 链接
    #icon-lianjie
  • 列表
    #icon-liebiao
  • 列表
    #icon-liebiao1
  • 节点帮助
    #icon-jiedianbangzhu
  • 模型
    #icon-moxing___
  • 保存布局
    #icon-baocunbuju
  • 节点-结束
    #icon-jiedianjieshu
  • 类目 品类 分类 类别
    #icon-leimupinleifenleileibie
  • 流程
    #icon-liucheng
  • 公司
    #icon-gongsi
  • 部门
    #icon-bumen
  • #icon-gou
  • 撤销
    #icon-weibiaoti545
  • 帮助
    #icon-bangzhu
  • 移动设备手机
    #icon-yidongshebei
  • 计划
    #icon-jihua
  • 角色管理
    #icon-jiaoseguanli
  • 13-配置SQL
    #icon--peizhiSQL
  • 职务管理
    #icon-zhiwuguanli
  • 组织机构
    #icon-organ
  • 国际化
    #icon-world
  • 组管理
    #icon-zuguanli
  • 员工管理
    #icon-yuangongguanli
  • 数据分析
    #icon-shujufenxi1
  • 异常条件设置
    #icon-yichangtiaojianshezhi
  • 登录日志
    #icon-denglurizhi-
  • 异常管理
    #icon-yichangguanli
  • 分析
    #icon-icon1
  • 图表 上升趋势
    #icon-tubiaoshangshengqushi
  • 图表
    #icon-tubiao
  • 图表 柱状图
    #icon-tubiaozhuzhuangtu
  • 图表 多维柱状图
    #icon-tubiaozhuzhuangtu1
  • 信息维护
    #icon-navicon-xxwh
  • 日志
    #icon-zhuanxierizhi
  • 角色权限
    #icon-jiaosequanxian
  • 激活
    #icon-activation
  • 职位岗位
    #icon-drxx12
  • 数据权限
    #icon-shujuquanxian
  • 待办
    #icon-daiban
  • 岗位授权管理
    #icon-RectangleCopy
  • 归档
    #icon-guidang
  • 配置
    #icon-icon-test
  • 菜单
    #icon-menu
  • 分组
    #icon-fenzu
  • 回收站
    #icon-huishouzhan
  • 表单配置
    #icon-biaodanpeizhi
  • 组织架构
    #icon-zuzhijiagou
  • 权限
    #icon-quanxian
  • 业务报表
    #icon-yewubaobiao
  • 权限修改
    #icon-icon-quanxianxg
  • 业务
    #icon-yewu
  • 数字顺序
    #icon-shuzishunxu
  • 角色授权
    #icon-jiaoseshouquan
  • 节点管理
    #icon-jiedianguanli
  • 失效
    #icon-shixiao
  • 查看
    #icon-check-line
  • 催办
    #icon-cuiban
  • 传阅
    #icon-chuanyue2
  • 文件-传阅
    #icon-wj-cy
  • 搜索
    #icon-sousuo
  • 搜索
    #icon-sousuo1
  • 搜索
    #icon-sousuo2
  • 审批
    #icon-639
  • 我的申请
    #icon-wodeshenqing-
  • 类型
    #icon-leixing
  • 流程图
    #icon-liuchengtu
  • 我的申请
    #icon-wodeshenqing
  • 类型
    #icon-leixing1
  • 我的申请
    #icon-wodeshenqing1
  • 审批
    #icon-shenpi
  • 我的申请
    #icon-wodeshenqing2
  • 任务
    #icon-renwu
  • 数据字典
    #icon-shujuzidian
  • 中心
    #icon-zhongxin
  • 任务
    #icon-renwu1
  • 模版
    #icon-moban
  • 授权
    #icon-shouquan
  • 模版
    #icon-moban1
  • 版本
    #icon-banben
  • 数据字典
    #icon-shujuzidian1
  • 任务
    #icon-task
  • 查找
    #icon-chazhao
  • 到货退回单
    #icon-navicon-dhthd
  • 授权
    #icon-iot-sq
  • 传阅
    #icon-chuanyue
  • 数据字典
    #icon-shujuzidian2
  • 授权
    #icon-shouquan1
  • 查找
    #icon-chazhao1
  • 授权
    #icon-shouquan2
  • 查找
    #icon-chazhao2
  • 版本
    #icon-banben1
  • 审批类型
    #icon-shenpileixing
  • 草稿箱
    #icon-caogaoxiang
  • 我的收藏
    #icon-wodeshoucang
  • 申请
    #icon-shenqing
  • 类型配置@3x
    #icon-leixingpeizhix
  • 已审批列表
    #icon-yishenpiliebiao-
  • 授权
    #icon-shouquan3
  • 类型配置
    #icon-leixingpeizhi
  • 版本
    #icon-banben2
  • Icon - 我的申请
    #icon-Icon-wodeshenqing
  • 传阅
    #icon-chuanyue1
  • 在途跟踪
    #icon-zaitugenzong
  • 节点类型-3
    #icon-jiedianleixing-
  • 中心
    #icon-zhongxin1
  • 中心
    #icon-zhongxin2

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>