• 通知
    
  • 监察分析
    
  • 人力资源
    
  • 资产计划
    
  • 法律法规
    
  • 回执
    
  • clock
    
  • 我的会议室
    
  • 栏目
    
  • 信息发布
    
  • WORD
    
  • 信息类型
    
  • 档案
    
  • 发文
    
  • 收文
    
  • 任务
    
  • 对号
    
  • 工程管理
    
  • 车辆信息
    
  • 发文拟稿
    
  • 用车申请
    
  • 会议室使用情况
    
  • 库存
    
  • 收文登记
    
  • 入库
    
  • 申请
    
  • 已办收文
    
  • 已办发文
    
  • 申请
    
  • 日程列表
    
  • 系统
    
  • 任务分解-01
    
  • 单人
    
  • 车辆管理
    
  • 制造业-重资产运营
    
  • 耗材-1
    
  • 日程管理
    
  • 公文管理
    
  • 我的发文
    
  • 我的收文
    
  • 人事
    
  • 违章事故记录
    
  • 薪酬
    
  • 日程查询
    
  • 日程类别
    
  • 查看
    
  • 用印申请
    
  • 耗材柜
    
  • 
  • 资产信息
    
  • 多人
    
  • 放大
    
  • 耗材
    
  • 议题管理
    
  • 车辆保险
    
  • 信息查询
    
  • 资产
    
  • 作废
    
  • 计量单位
    
  • 出车还车
    
  • 用车查询
    
  • 机动车年检站查询
    
  • 议题排序
    
  • 议题上报
    
  • 会议日历
    
  • 重要任务
    
  • 人力资源
    
  • 领用
    
  • 入库
    
  • 系统管理
    
  • 信息维护
    
  • 栏目
    
  • 用车申请
    
  • 我的日程
    
  • 分仓收发存汇总表
    
  • 公文统计
    
  • 印章管理
    
  • 日程_列表_导航_切换
    
  • 会议类型
    
  • 归档
    
  • 统计查询
    
  • 会议室
    
  • 退库
    
  • 日程计划
    
  • 公文交换
    
  • 我的加油卡号
    
  • 组件管理
    
  • 资产调拨
    
  • 统计
    
  • 台账
    
  • 缩小
    
  • 新闻
    
  • Excel.
    
  • 会议任务
    
  • 变更
    
  • pdf
    
  • 议题管理
    
  • 信息发布
    
  • 汽车维修
    
  • 固定资产
    
  • 合同
    
  • 仓库管理
    
  • 通讯录
    
  • 正文套红
    
  • 日历
    
  • 日志
    
  • 资产类别
    
  • 报表
    
  • 信息发布
    
  • 培训
    
  • 个人-主题
    
  • 公务接待
    
  • 目标任务
    
  • 空间管理
    
  • 印章统计
    
  • 信息查询
    
  • 会议通知
    
  • 综合办公
    
  • 办公用品
    
  • 会议室使用情况
    
  • 云下载
    
  • 云上传
    
  • 上传
    
  • 下载
    
  • 相机
    
  • 提交
    
  • 保存
    
  • 打印
    
  • 印章
    
  • 下箭头
    
  • 上箭头
    
  • 左箭头
    
  • 右箭头
    
  • 前进
    
  • 后退
    
  • 下双箭头
    
  • 上双箭头
    
  • 左双箭头
    
  • 右双箭头
    
  • 书本
    
  • 缺省
    
  • 格式
    
  • 过车查询
    
  • 议题信息
    
  • 工作汇报
    
  • 待办发文
    
  • 待办收文
    
  • 公文监控
    

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-tongzhi
  • 监察分析
    .icon-msnui-report-sec
  • 人力资源
    .icon-renliziyuan
  • 资产计划
    .icon-zichanjihua
  • 法律法规
    .icon-falvfagui
  • 回执
    .icon-huizhi
  • clock
    .icon-clock
  • 我的会议室
    .icon-5
  • 栏目
    .icon-lanmu
  • 信息发布
    .icon-xinxifabu
  • WORD
    .icon-WORD
  • 信息类型
    .icon-xinxileixing
  • 档案
    .icon-archives
  • 发文
    .icon-fawen
  • 收文
    .icon-shouwen
  • 任务
    .icon-renwu
  • 对号
    .icon-duihao
  • 工程管理
    .icon-gongchengguanli
  • 车辆信息
    .icon-cheliangxinxi
  • 发文拟稿
    .icon-fawennigao
  • 用车申请
    .icon-yongcheshenqing
  • 会议室使用情况
    .icon-huiyishishiyongqingkuang
  • 库存
    .icon-kucun
  • 收文登记
    .icon-shouwendengji
  • 入库
    .icon-ruku
  • 申请
    .icon-shenqing
  • 已办收文
    .icon-yibanshouwen
  • 已办发文
    .icon-yibanfawen
  • 申请
    .icon-shenqing1
  • 日程列表
    .icon-richengliebiao
  • 系统
    .icon-system
  • 任务分解-01
    .icon-renwufenjie-
  • 单人
    .icon-user
  • 车辆管理
    .icon-cheliangguanli
  • 制造业-重资产运营
    .icon-zhizaoye-zhongzichanyunying
  • 耗材-1
    .icon-haocai-
  • 日程管理
    .icon-schedule
  • 公文管理
    .icon-worldSystem
  • 我的发文
    .icon-wodefawen
  • 我的收文
    .icon-wodeshouwen
  • 人事
    .icon-renshi
  • 违章事故记录
    .icon-weizhangshigujilu
  • 薪酬
    .icon-xinchou
  • 日程查询
    .icon-richengchaxun
  • 日程类别
    .icon-richengleibie
  • 查看
    .icon-check
  • 用印申请
    .icon-yongyinshenqing
  • 耗材柜
    .icon-haocaigui
  • .icon-che1
  • 资产信息
    .icon-zichanxinxi
  • 多人
    .icon-manyuser
  • 放大
    .icon-pluscircle
  • 耗材
    .icon-haocai
  • 议题管理
    .icon-yitiguanli
  • 车辆保险
    .icon-cheliangbaoxian
  • 信息查询
    .icon-xinxichaxun
  • 资产
    .icon-zichan
  • 作废
    .icon-zuofei
  • 计量单位
    .icon-jiliangdanwei
  • 出车还车
    .icon-chuchehuanche
  • 用车查询
    .icon-yongchechaxun
  • 机动车年检站查询
    .icon-jidongchenianjianzhanchaxun-
  • 议题排序
    .icon-yitipaixu
  • 议题上报
    .icon-yitishangbao
  • 会议日历
    .icon-jihua
  • 重要任务
    .icon-zhongyaorenwu
  • 人力资源
    .icon-renliziyuan1
  • 领用
    .icon-lingyong
  • 入库
    .icon-ruku1
  • 系统管理
    .icon-dianpu
  • 信息维护
    .icon-xinxiweihu
  • 栏目
    .icon-lanmu1
  • 用车申请
    .icon-yongcheshenqing1
  • 我的日程
    .icon-wodericheng
  • 分仓收发存汇总表
    .icon-fencangshoufacunhuizongbiao
  • 公文统计
    .icon-gongwentongji
  • 印章管理
    .icon-Seal
  • 日程_列表_导航_切换
    .icon-nac_ic_view
  • 会议类型
    .icon-huiyileixing
  • 归档
    .icon-guidang
  • 统计查询
    .icon-tongjichaxun
  • 会议室
    .icon-meeting
  • 退库
    .icon-tuiku
  • 日程计划
    .icon-richengjihua
  • 公文交换
    .icon-gwjh
  • 我的加油卡号
    .icon-wodejiayouqiahao
  • 组件管理
    .icon-zujianguanli
  • 资产调拨
    .icon-zichantiaobo
  • 统计
    .icon-statistics
  • 台账
    .icon-taizhang
  • 缩小
    .icon-delete
  • 新闻
    .icon-news
  • Excel.
    .icon-EXCEL
  • 会议任务
    .icon-huiyirenwu1
  • 变更
    .icon-biangeng
  • pdf
    .icon-PDF
  • 议题管理
    .icon-wsdzb_zzgzt_zzsh_zzshh_ytgl
  • 信息发布
    .icon-xinxifabu1
  • 汽车维修
    .icon-qicheweixiu
  • 固定资产
    .icon-gudingzichan
  • 合同
    .icon-hetong
  • 仓库管理
    .icon-cangkuguanli1
  • 通讯录
    .icon-tongxunlu
  • 正文套红
    .icon-caidan
  • 日历
    .icon-calendarfull
  • 日志
    .icon-rizhi
  • 资产类别
    .icon-zichanleibie1
  • 报表
    .icon-report
  • 信息发布
    .icon-xinxifabu2
  • 培训
    .icon-peixun
  • 个人-主题
    .icon-lujing
  • 公务接待
    .icon-gongwujiedai
  • 目标任务
    .icon-mubiaorenwu
  • 空间管理
    .icon-kongjianguanli
  • 印章统计
    .icon-yinzhangtongji
  • 信息查询
    .icon-xinxichaxun1
  • 会议通知
    .icon-huiyitongzhi
  • 综合办公
    .icon-zonghebangong
  • 办公用品
    .icon-bangongyongpin
  • 会议室使用情况
    .icon-second-menu-706
  • 云下载
    .icon-download1
  • 云上传
    .icon-upload1
  • 上传
    .icon-upload
  • 下载
    .icon-download
  • 相机
    .icon-camera
  • 提交
    .icon-location
  • 保存
    .icon-save
  • 打印
    .icon-printer
  • 印章
    .icon-Seal1
  • 下箭头
    .icon-arrowdowncircle
  • 上箭头
    .icon-arrowupcircle
  • 左箭头
    .icon-arrowleftcircle
  • 右箭头
    .icon-arrowrightcircle
  • 前进
    .icon-go
  • 后退
    .icon-back
  • 下双箭头
    .icon-arrowdowndl
  • 上双箭头
    .icon-arrowupdl
  • 左双箭头
    .icon-arrowleftdl
  • 右双箭头
    .icon-arrowrightdl
  • 书本
    .icon-book
  • 缺省
    .icon-default
  • 格式
    .icon-format
  • 过车查询
    .icon-fenleitubiaodaotu-
  • 议题信息
    .icon-yitixinxi
  • 工作汇报
    .icon-gongzuohuibao
  • 待办发文
    .icon-daibanfawen
  • 待办收文
    .icon-daibanshouwen
  • 公文监控
    .icon-m_liuzhuangongwenjiankong

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-tongzhi
  • 监察分析
    #icon-msnui-report-sec
  • 人力资源
    #icon-renliziyuan
  • 资产计划
    #icon-zichanjihua
  • 法律法规
    #icon-falvfagui
  • 回执
    #icon-huizhi
  • clock
    #icon-clock
  • 我的会议室
    #icon-5
  • 栏目
    #icon-lanmu
  • 信息发布
    #icon-xinxifabu
  • WORD
    #icon-WORD
  • 信息类型
    #icon-xinxileixing
  • 档案
    #icon-archives
  • 发文
    #icon-fawen
  • 收文
    #icon-shouwen
  • 任务
    #icon-renwu
  • 对号
    #icon-duihao
  • 工程管理
    #icon-gongchengguanli
  • 车辆信息
    #icon-cheliangxinxi
  • 发文拟稿
    #icon-fawennigao
  • 用车申请
    #icon-yongcheshenqing
  • 会议室使用情况
    #icon-huiyishishiyongqingkuang
  • 库存
    #icon-kucun
  • 收文登记
    #icon-shouwendengji
  • 入库
    #icon-ruku
  • 申请
    #icon-shenqing
  • 已办收文
    #icon-yibanshouwen
  • 已办发文
    #icon-yibanfawen
  • 申请
    #icon-shenqing1
  • 日程列表
    #icon-richengliebiao
  • 系统
    #icon-system
  • 任务分解-01
    #icon-renwufenjie-
  • 单人
    #icon-user
  • 车辆管理
    #icon-cheliangguanli
  • 制造业-重资产运营
    #icon-zhizaoye-zhongzichanyunying
  • 耗材-1
    #icon-haocai-
  • 日程管理
    #icon-schedule
  • 公文管理
    #icon-worldSystem
  • 我的发文
    #icon-wodefawen
  • 我的收文
    #icon-wodeshouwen
  • 人事
    #icon-renshi
  • 违章事故记录
    #icon-weizhangshigujilu
  • 薪酬
    #icon-xinchou
  • 日程查询
    #icon-richengchaxun
  • 日程类别
    #icon-richengleibie
  • 查看
    #icon-check
  • 用印申请
    #icon-yongyinshenqing
  • 耗材柜
    #icon-haocaigui
  • #icon-che1
  • 资产信息
    #icon-zichanxinxi
  • 多人
    #icon-manyuser
  • 放大
    #icon-pluscircle
  • 耗材
    #icon-haocai
  • 议题管理
    #icon-yitiguanli
  • 车辆保险
    #icon-cheliangbaoxian
  • 信息查询
    #icon-xinxichaxun
  • 资产
    #icon-zichan
  • 作废
    #icon-zuofei
  • 计量单位
    #icon-jiliangdanwei
  • 出车还车
    #icon-chuchehuanche
  • 用车查询
    #icon-yongchechaxun
  • 机动车年检站查询
    #icon-jidongchenianjianzhanchaxun-
  • 议题排序
    #icon-yitipaixu
  • 议题上报
    #icon-yitishangbao
  • 会议日历
    #icon-jihua
  • 重要任务
    #icon-zhongyaorenwu
  • 人力资源
    #icon-renliziyuan1
  • 领用
    #icon-lingyong
  • 入库
    #icon-ruku1
  • 系统管理
    #icon-dianpu
  • 信息维护
    #icon-xinxiweihu
  • 栏目
    #icon-lanmu1
  • 用车申请
    #icon-yongcheshenqing1
  • 我的日程
    #icon-wodericheng
  • 分仓收发存汇总表
    #icon-fencangshoufacunhuizongbiao
  • 公文统计
    #icon-gongwentongji
  • 印章管理
    #icon-Seal
  • 日程_列表_导航_切换
    #icon-nac_ic_view
  • 会议类型
    #icon-huiyileixing
  • 归档
    #icon-guidang
  • 统计查询
    #icon-tongjichaxun
  • 会议室
    #icon-meeting
  • 退库
    #icon-tuiku
  • 日程计划
    #icon-richengjihua
  • 公文交换
    #icon-gwjh
  • 我的加油卡号
    #icon-wodejiayouqiahao
  • 组件管理
    #icon-zujianguanli
  • 资产调拨
    #icon-zichantiaobo
  • 统计
    #icon-statistics
  • 台账
    #icon-taizhang
  • 缩小
    #icon-delete
  • 新闻
    #icon-news
  • Excel.
    #icon-EXCEL
  • 会议任务
    #icon-huiyirenwu1
  • 变更
    #icon-biangeng
  • pdf
    #icon-PDF
  • 议题管理
    #icon-wsdzb_zzgzt_zzsh_zzshh_ytgl
  • 信息发布
    #icon-xinxifabu1
  • 汽车维修
    #icon-qicheweixiu
  • 固定资产
    #icon-gudingzichan
  • 合同
    #icon-hetong
  • 仓库管理
    #icon-cangkuguanli1
  • 通讯录
    #icon-tongxunlu
  • 正文套红
    #icon-caidan
  • 日历
    #icon-calendarfull
  • 日志
    #icon-rizhi
  • 资产类别
    #icon-zichanleibie1
  • 报表
    #icon-report
  • 信息发布
    #icon-xinxifabu2
  • 培训
    #icon-peixun
  • 个人-主题
    #icon-lujing
  • 公务接待
    #icon-gongwujiedai
  • 目标任务
    #icon-mubiaorenwu
  • 空间管理
    #icon-kongjianguanli
  • 印章统计
    #icon-yinzhangtongji
  • 信息查询
    #icon-xinxichaxun1
  • 会议通知
    #icon-huiyitongzhi
  • 综合办公
    #icon-zonghebangong
  • 办公用品
    #icon-bangongyongpin
  • 会议室使用情况
    #icon-second-menu-706
  • 云下载
    #icon-download1
  • 云上传
    #icon-upload1
  • 上传
    #icon-upload
  • 下载
    #icon-download
  • 相机
    #icon-camera
  • 提交
    #icon-location
  • 保存
    #icon-save
  • 打印
    #icon-printer
  • 印章
    #icon-Seal1
  • 下箭头
    #icon-arrowdowncircle
  • 上箭头
    #icon-arrowupcircle
  • 左箭头
    #icon-arrowleftcircle
  • 右箭头
    #icon-arrowrightcircle
  • 前进
    #icon-go
  • 后退
    #icon-back
  • 下双箭头
    #icon-arrowdowndl
  • 上双箭头
    #icon-arrowupdl
  • 左双箭头
    #icon-arrowleftdl
  • 右双箭头
    #icon-arrowrightdl
  • 书本
    #icon-book
  • 缺省
    #icon-default
  • 格式
    #icon-format
  • 过车查询
    #icon-fenleitubiaodaotu-
  • 议题信息
    #icon-yitixinxi
  • 工作汇报
    #icon-gongzuohuibao
  • 待办发文
    #icon-daibanfawen
  • 待办收文
    #icon-daibanshouwen
  • 公文监控
    #icon-m_liuzhuangongwenjiankong

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>