• 已过期-已逾期-01
    
  • 已过期-已逾期-04
    
  • 项目保函申请
    
  • 成本统计分析
    
  • 指标资金
    
  • 财务分析
    
  • 财务分析
    
  • 财务统计
    
  • 预算编制
    
  • 预算编制查询
    
  • 工资条
    
  • 周报
    
  • 工作周报
    
  • 党建_学习轨迹
    
  • 停车场
    
  • 智管平台大屏
    
  • 论坛选择
    
  • urgent
    
  • 访问,卡片,表格
    
  • 经营分析
    
  • 上升
    
  • 下降
    
  • 招待管理
    
  • 用户反馈
    
  • 应急演练
    
  • 分红方式
    
  • 17企业、园区、物业
    
  • 股权出质
    
  • 董监高持股信息维护
    
  • 分红
    
  • 提款
    
  • 会议案例管理
    
  • 股东分红
    
  • 企业增资
    
  • 增资扩股
    
  • 加油登记
    
  • 信息发布
    
  • 加班
    
  • 补卡
    
  • 外出申请
    
  • workIcon1
    
  • workIcon3
    
  • 发票信息
    
  • 附件信息
    
  • 转待办-列表
    
  • 待办任务_o
    
  • 待办
    
  • 待办
    
  • 设计管理
    
  • 施工管理
    
  • 证照办理
    
  • 文件-方案
    
  • 项目基本信息
    
  • 工程项目立项
    
  • 项目前期
    
  • 项目决策
    
  • 工程竣工验收申请表
    
  • 进度管理
    
  • 监管风控
    
  • 更多
    
  • 更多
    
  • 更多
    
  • refresh
    
  • 股权
    
  • 投中管理
    
  • 基金管理人
    
  • 基金项目管理
    
  • 招标
    
  • 个人自助
    
  • 融资
    
  • 火车查询
    
  • 百度文库
    
  • 在线翻译
    
  • 计算机 算数
    
  • 天气预报
    
  • 航班查询
    
  • return
    
  • 用户,男,头像
    
  • 用户,女,头像
    
  • icon_address
    
  • 盘点
    
  • 日记账
    
  • 财务管理
    
  • 应交税费表
    
  • 薪酬福利
    
  • 资产计划
    
  • 资产
    
  • 供应商预付款
    
  • 扣除质保金
    
  • 收取质保金
    
  • 销户
    
  • 开户
    
  • all
    
  • 文件-计划
    
  • 授信管理
    
  • 食堂
    
  • 投资
    
  • home
    
  • 工程建设
    
  • 融资
    
  • 九宫格9 palaces
    
  • 会计核算
    
  • 租赁中心
    
  • 合同
    
  • 费用
    
  • 差旅费用报销
    
  • 还款
    
  • 借款
    
  • 流程
    
  • 目标任务
    
  • 信息查询
    
  • 信息类型
    
  • 库存
    
  • 用印申请
    
  • 领用
    
  • 入库
    
  • 栏目
    
  • 分仓收发存汇总表
    
  • 变更
    
  • delete2
    
  • edit-2
    
  • 查看流程
    
  • add
    
  • detail
    
  • 无数据
    
  • 无数据
    
  • 无数据
    
  • 已读
    
  • 未读
    
  • search
    
  • oa
    
  • theme
    
  • 附件
    
  • add
    
  • 收藏
    
  • select
    
  • email
    
  • address
    
  • call
    
  • computer
    
  • mobile
    
  • Reply-All
    
  • 转发
    
  • 抄送
    
  • 会议
    
  • xiaoxi
    
  • 云盘
    
  • 人事分析
    
  • 省略号
    
  • more
    
  • working
    
  • 公文
    
  • 出差申请
    
  • 会议
    
  • 请假
    
  • 感叹号_icon
    
  • 通过
    
  • 感叹号
    
  • 说明
    
  • 法律法规
    
  • 监察分析
    
  • 人力资源
    
  • 正文套红
    
  • 归档
    
  • 工程管理
    
  • 车辆管理
    
  • 日程管理
    
  • 印章管理
    
  • 会议室
    
  • 办公用品
    
  • 公文管理
    
  • 人力资源
    
  • 系统管理
    
  • 统计查询
    
  • 个人-主题
    
  • 综合办公
    
  • 云下载
    
  • 云上传
    
  • 上传
    
  • 下载
    
  • 相机
    
  • 提交
    
  • 保存
    
  • 打印
    
  • 印章
    
  • 下箭头
    
  • 上箭头
    
  • 左箭头
    
  • 右箭头
    
  • 前进
    
  • 后退
    
  • 下双箭头
    
  • 上双箭头
    
  • 左双箭头
    
  • 右双箭头
    
  • 书本
    
  • 缺省
    
  • 格式
    
  • 新闻
    
  • 查看
    
  • 缩小
    
  • 放大
    
  • 报表
    
  • 统计
    
  • 档案
    
  • 系统
    
  • 单人
    
  • 多人
    
  • 日历
    
  • clock
    
  • 人事
    
  • 薪酬
    
  • 培训
    
  • 发文
    
  • 收文
    
  • 公文交换
    
  • 工作汇报
    
  • WORD
    
  • Excel.
    
  • pdf
    
  • 已办收文
    
  • 已办发文
    
  • 我的发文
    
  • 我的收文
    
  • 发文拟稿
    
  • 收文登记
    
  • 待办发文
    
  • 待办收文
    
  • 公文统计
    
  • 公文监控
    
  • 议题管理
    
  • 会议通知
    
  • 回执
    
  • 我的会议室
    
  • 会议室使用情况
    
  • 申请
    
  • 议题排序
    
  • 议题上报
    
  • 会议日历
    
  • 信息维护
    
  • 会议类型
    
  • 会议室使用情况
    
  • 议题信息
    
  • 栏目
    
  • 用车申请
    
  • 违章事故记录
    
  • 
  • 车辆保险
    
  • 信息查询
    
  • 出车还车
    
  • 用车查询
    
  • 机动车年检站查询
    
  • 用车申请
    
  • 我的加油卡号
    
  • 汽车维修
    
  • 过车查询
    
  • 日程列表
    
  • 耗材-1
    
  • 日程查询
    
  • 耗材柜
    
  • 资产信息
    
  • 耗材
    
  • 日程计划
    
  • 组件管理
    
  • 资产调拨
    
  • 固定资产
    
  • 仓库管理
    
  • 资产类别
    
  • 空间管理
    
  • 公务接待
    
  • 通讯录
    
  • 对号
    
  • 通知
    
  • 任务
    
  • 车辆信息
    
  • 入库
    
  • 任务分解-01
    
  • 日程类别
    
  • 计量单位
    
  • 我的日程
    
  • 日程_列表_导航_切换
    
  • 退库
    
  • 台账
    
  • 日志
    
  • 信息发布
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • 已过期-已逾期-01
    .icon-yiguoqi-yiyuqi-01
  • 已过期-已逾期-04
    .icon-yiguoqi-yiyuqi-04
  • 项目保函申请
    .icon-baohan
  • 成本统计分析
    .icon-chengbentongjifenxi
  • 指标资金
    .icon-zhibiaozijin
  • 财务分析
    .icon-caiwufenxi
  • 财务分析
    .icon-RectangleCopy
  • 财务统计
    .icon-tubiao_caiwutongji
  • 预算编制
    .icon-yusuanbianzhi
  • 预算编制查询
    .icon-yusuanchaxun
  • 工资条
    .icon-gongzitiao
  • 周报
    .icon-zhoubao
  • 工作周报
    .icon-gongzuozhoubao
  • 党建_学习轨迹
    .icon-dangjian_xuexiguiji
  • 停车场
    .icon-tingchechang
  • 智管平台大屏
    .icon-yunyingjiankong
  • 论坛选择
    .icon-luntan
  • urgent
    .icon-urgent
  • 访问,卡片,表格
    .icon-cardvisitingpa
  • 经营分析
    .icon-jingyingfenxi
  • 上升
    .icon-shangsheng
  • 下降
    .icon-xiajiang
  • 招待管理
    .icon-zhaodaiguanli
  • 用户反馈
    .icon-yonghufankui
  • 应急演练
    .icon-yingjiyanlian
  • 分红方式
    .icon-fenhongfangshi
  • 17企业、园区、物业
    .icon-qiyeyuanquwuye
  • 股权出质
    .icon-guquanchuzhi
  • 董监高持股信息维护
    .icon-gudongxinxi
  • 分红
    .icon-fenhong
  • 提款
    .icon-tikuan
  • 会议案例管理
    .icon-huiyianliguanli
  • 股东分红
    .icon-gudongfenhong
  • 企业增资
    .icon-qiyezengzi
  • 增资扩股
    .icon-zengzikuogu
  • 加油登记
    .icon-jiayoudengji
  • 信息发布
    .icon-xinxifabu1
  • 加班
    .icon-jiaban
  • 补卡
    .icon-buka
  • 外出申请
    .icon-waichushenqing
  • workIcon1
    .icon-workIcon1
  • workIcon3
    .icon-workIcon3
  • 发票信息
    .icon-fapiaoxinxi
  • 附件信息
    .icon-fujianxinxi
  • 转待办-列表
    .icon-daiban
  • 待办任务_o
    .icon-daibanrenwu_o
  • 待办
    .icon-daiban1
  • 待办
    .icon-daiban2
  • 设计管理
    .icon-shejiguanli
  • 施工管理
    .icon-shigongguanli
  • 证照办理
    .icon-zhengzhaobanli
  • 文件-方案
    .icon-wj-fa
  • 项目基本信息
    .icon-xiangmuxinxi
  • 工程项目立项
    .icon-gongchengxiangmulixiang
  • 项目前期
    .icon-14px-09
  • 项目决策
    .icon-xiangmujuece
  • 工程竣工验收申请表
    .icon-gongchengjungongyanshoushenqingbiao
  • 进度管理
    .icon-jinduguanli
  • 监管风控
    .icon-fengkong
  • 更多
    .icon-gengduo
  • 更多
    .icon-ai221
  • 更多
    .icon-ai222
  • refresh
    .icon-refresh
  • 股权
    .icon-guquan
  • 投中管理
    .icon-touzhongguanli
  • 基金管理人
    .icon-jijinguanliren
  • 基金项目管理
    .icon-jijinxiangmu
  • 招标
    .icon-kaibiao
  • 个人自助
    .icon-zizhu
  • 融资
    .icon-rongzi1
  • 火车查询
    .icon-huochechaxun
  • 百度文库
    .icon-baiduwenku
  • 在线翻译
    .icon-language-online-translation
  • 计算机 算数
    .icon-jisuanjisuanshu
  • 天气预报
    .icon-tianqiyubao
  • 航班查询
    .icon-hangbanchaxun
  • return
    .icon-return
  • 用户,男,头像
    .icon-user-man
  • 用户,女,头像
    .icon-user-women
  • icon_address
    .icon-icon_address
  • 盘点
    .icon-pandian
  • 日记账
    .icon-rijizhang
  • 财务管理
    .icon-caiwuguanli
  • 应交税费表
    .icon-shuifei
  • 薪酬福利
    .icon-xinchoufuli
  • 资产计划
    .icon-zichanjihua
  • 资产
    .icon-zichan
  • 供应商预付款
    .icon-yufukuan
  • 扣除质保金
    .icon-kouchuzhibaojin
  • 收取质保金
    .icon-shouquzhibaojin
  • 销户
    .icon-xiaohu
  • 开户
    .icon-kaihu
  • all
    .icon-all
  • 文件-计划
    .icon-gongzuojihua
  • 授信管理
    .icon-shouxin
  • 食堂
    .icon-shitang
  • 投资
    .icon-touzi
  • home
    .icon-home
  • 工程建设
    .icon-gongchengjianshe
  • 融资
    .icon-rongzi
  • 九宫格9 palaces
    .icon-jiugongge
  • 会计核算
    .icon-kuaijihesuan
  • 租赁中心
    .icon-zulinzhongxin
  • 合同
    .icon-hetong
  • 费用
    .icon-feiyong
  • 差旅费用报销
    .icon-chailvbaoxiao
  • 还款
    .icon-huankuan
  • 借款
    .icon-jiekuan
  • 流程
    .icon-liucheng
  • 目标任务
    .icon-mubiaorenwu
  • 信息查询
    .icon-xinxichaxun1
  • 信息类型
    .icon-xinxileixing
  • 库存
    .icon-kucun
  • 用印申请
    .icon-yongyinshenqing
  • 领用
    .icon-lingyong
  • 入库
    .icon-ruku1
  • 栏目
    .icon-lanmu1
  • 分仓收发存汇总表
    .icon-cangkutongji
  • 变更
    .icon-biangeng
  • delete2
    .icon-del
  • edit-2
    .icon-edit
  • 查看流程
    .icon-view-flow
  • add
    .icon-add
  • detail
    .icon-detail
  • 无数据
    .icon-wushuju
  • 无数据
    .icon-wushuju1
  • 无数据
    .icon-wushuju2
  • 已读
    .icon-yidu
  • 未读
    .icon-unreadmsg
  • search
    .icon-search
  • oa
    .icon-oa
  • theme
    .icon-theme
  • 附件
    .icon-fujian
  • add
    .icon-add1
  • 收藏
    .icon-fav
  • select
    .icon-select
  • email
    .icon-email
  • address
    .icon-address
  • call
    .icon-call
  • computer
    .icon-computer
  • mobile
    .icon-mobile
  • Reply-All
    .icon-Reply-All
  • 转发
    .icon-zhuanfa
  • 抄送
    .icon-chaosong
  • 会议
    .icon-huiyi
  • xiaoxi
    .icon-xiaoxi
  • 云盘
    .icon-yunpan
  • 人事分析
    .icon-renshifenxi
  • 省略号
    .icon-shenglvehao
  • more
    .icon-more
  • working
    .icon-working
  • 公文
    .icon-gongwen
  • 出差申请
    .icon-chuchashenqing
  • 会议
    .icon-huiyi1
  • 请假
    .icon-qingjia
  • 感叹号_icon
    .icon-gantanhao_icon
  • 通过
    .icon-tongguo
  • 感叹号
    .icon-gantanhao
  • 说明
    .icon-ziyuan
  • 法律法规
    .icon-falvfagui
  • 监察分析
    .icon-msnui-report-sec
  • 人力资源
    .icon-renliziyuan
  • 正文套红
    .icon-caidan
  • 归档
    .icon-guidang
  • 工程管理
    .icon-gongchengguanli
  • 车辆管理
    .icon-cheliangguanli
  • 日程管理
    .icon-schedule
  • 印章管理
    .icon-Seal
  • 会议室
    .icon-meeting
  • 办公用品
    .icon-bangongyongpin
  • 公文管理
    .icon-worldSystem
  • 人力资源
    .icon-renliziyuan1
  • 系统管理
    .icon-dianpu
  • 统计查询
    .icon-tongjichaxun
  • 个人-主题
    .icon-lujing
  • 综合办公
    .icon-zonghebangong
  • 云下载
    .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-news
  • 查看
    .icon-check
  • 缩小
    .icon-delete
  • 放大
    .icon-pluscircle
  • 报表
    .icon-report
  • 统计
    .icon-statistics
  • 档案
    .icon-archives
  • 系统
    .icon-system
  • 单人
    .icon-user
  • 多人
    .icon-manyuser
  • 日历
    .icon-calendarfull
  • clock
    .icon-clock
  • 人事
    .icon-renshi
  • 薪酬
    .icon-xinchou
  • 培训
    .icon-peixun
  • 发文
    .icon-fawen
  • 收文
    .icon-shouwen
  • 公文交换
    .icon-gwjh
  • 工作汇报
    .icon-gongzuohuibao
  • WORD
    .icon-WORD
  • Excel.
    .icon-EXCEL
  • pdf
    .icon-PDF
  • 已办收文
    .icon-yibanshouwen
  • 已办发文
    .icon-yibanfawen
  • 我的发文
    .icon-wodefawen
  • 我的收文
    .icon-wodeshouwen
  • 发文拟稿
    .icon-fawennigao
  • 收文登记
    .icon-shouwendengji
  • 待办发文
    .icon-daibanfawen
  • 待办收文
    .icon-daibanshouwen
  • 公文统计
    .icon-gongwentongji
  • 公文监控
    .icon-m_gongwenjiankong
  • 议题管理
    .icon-yitiguanli
  • 会议通知
    .icon-huiyitongzhi
  • 回执
    .icon-huizhi
  • 我的会议室
    .icon-5
  • 会议室使用情况
    .icon-huiyishisy
  • 申请
    .icon-shenqing
  • 议题排序
    .icon-yitipaixu
  • 议题上报
    .icon-yitishangbao
  • 会议日历
    .icon-jihua
  • 信息维护
    .icon-xinxiweihu
  • 会议类型
    .icon-huiyileixing
  • 会议室使用情况
    .icon-second-menu-706
  • 议题信息
    .icon-yitixinxi
  • 栏目
    .icon-lanmu
  • 用车申请
    .icon-yongcheshenqing
  • 违章事故记录
    .icon-weizhangshigujilu
  • .icon-che1
  • 车辆保险
    .icon-cheliangbaoxian
  • 信息查询
    .icon-xinxichaxun
  • 出车还车
    .icon-chuchehuanche
  • 用车查询
    .icon-yongchechaxun
  • 机动车年检站查询
    .icon-cheliangnianjian
  • 用车申请
    .icon-yongcheshenqing1
  • 我的加油卡号
    .icon-wodejiayouqiahao
  • 汽车维修
    .icon-qicheweixiu
  • 过车查询
    .icon-fenleitubiaodaotu-
  • 日程列表
    .icon-richengliebiao
  • 耗材-1
    .icon-haocai-
  • 日程查询
    .icon-richengchaxun
  • 耗材柜
    .icon-haocaigui
  • 资产信息
    .icon-zichanxinxi
  • 耗材
    .icon-haocai
  • 日程计划
    .icon-richengjihua
  • 组件管理
    .icon-zujianguanli
  • 资产调拨
    .icon-zichantiaobo
  • 固定资产
    .icon-gudingzichan
  • 仓库管理
    .icon-cangkuguanli
  • 资产类别
    .icon-zichanleibie
  • 空间管理
    .icon-kongjianguanli
  • 公务接待
    .icon-gongwujiedai
  • 通讯录
    .icon-tongxunlu
  • 对号
    .icon-duihao
  • 通知
    .icon-tongzhi
  • 任务
    .icon-renwu
  • 车辆信息
    .icon-cheliangxinxi
  • 入库
    .icon-ruku
  • 任务分解-01
    .icon-renwufenjie
  • 日程类别
    .icon-richengleibie
  • 计量单位
    .icon-jiliangdanwei
  • 我的日程
    .icon-wodericheng
  • 日程_列表_导航_切换
    .icon-nac_ic_view
  • 退库
    .icon-tuiku
  • 台账
    .icon-taizhang
  • 日志
    .icon-rizhi
  • 信息发布
    .icon-xinxifabu

font-class 引用


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

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

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

使用步骤如下:

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

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

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

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

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

  • 已过期-已逾期-01
    #icon-yiguoqi-yiyuqi-01
  • 已过期-已逾期-04
    #icon-yiguoqi-yiyuqi-04
  • 项目保函申请
    #icon-baohan
  • 成本统计分析
    #icon-chengbentongjifenxi
  • 指标资金
    #icon-zhibiaozijin
  • 财务分析
    #icon-caiwufenxi
  • 财务分析
    #icon-RectangleCopy
  • 财务统计
    #icon-tubiao_caiwutongji
  • 预算编制
    #icon-yusuanbianzhi
  • 预算编制查询
    #icon-yusuanchaxun
  • 工资条
    #icon-gongzitiao
  • 周报
    #icon-zhoubao
  • 工作周报
    #icon-gongzuozhoubao
  • 党建_学习轨迹
    #icon-dangjian_xuexiguiji
  • 停车场
    #icon-tingchechang
  • 智管平台大屏
    #icon-yunyingjiankong
  • 论坛选择
    #icon-luntan
  • urgent
    #icon-urgent
  • 访问,卡片,表格
    #icon-cardvisitingpa
  • 经营分析
    #icon-jingyingfenxi
  • 上升
    #icon-shangsheng
  • 下降
    #icon-xiajiang
  • 招待管理
    #icon-zhaodaiguanli
  • 用户反馈
    #icon-yonghufankui
  • 应急演练
    #icon-yingjiyanlian
  • 分红方式
    #icon-fenhongfangshi
  • 17企业、园区、物业
    #icon-qiyeyuanquwuye
  • 股权出质
    #icon-guquanchuzhi
  • 董监高持股信息维护
    #icon-gudongxinxi
  • 分红
    #icon-fenhong
  • 提款
    #icon-tikuan
  • 会议案例管理
    #icon-huiyianliguanli
  • 股东分红
    #icon-gudongfenhong
  • 企业增资
    #icon-qiyezengzi
  • 增资扩股
    #icon-zengzikuogu
  • 加油登记
    #icon-jiayoudengji
  • 信息发布
    #icon-xinxifabu1
  • 加班
    #icon-jiaban
  • 补卡
    #icon-buka
  • 外出申请
    #icon-waichushenqing
  • workIcon1
    #icon-workIcon1
  • workIcon3
    #icon-workIcon3
  • 发票信息
    #icon-fapiaoxinxi
  • 附件信息
    #icon-fujianxinxi
  • 转待办-列表
    #icon-daiban
  • 待办任务_o
    #icon-daibanrenwu_o
  • 待办
    #icon-daiban1
  • 待办
    #icon-daiban2
  • 设计管理
    #icon-shejiguanli
  • 施工管理
    #icon-shigongguanli
  • 证照办理
    #icon-zhengzhaobanli
  • 文件-方案
    #icon-wj-fa
  • 项目基本信息
    #icon-xiangmuxinxi
  • 工程项目立项
    #icon-gongchengxiangmulixiang
  • 项目前期
    #icon-14px-09
  • 项目决策
    #icon-xiangmujuece
  • 工程竣工验收申请表
    #icon-gongchengjungongyanshoushenqingbiao
  • 进度管理
    #icon-jinduguanli
  • 监管风控
    #icon-fengkong
  • 更多
    #icon-gengduo
  • 更多
    #icon-ai221
  • 更多
    #icon-ai222
  • refresh
    #icon-refresh
  • 股权
    #icon-guquan
  • 投中管理
    #icon-touzhongguanli
  • 基金管理人
    #icon-jijinguanliren
  • 基金项目管理
    #icon-jijinxiangmu
  • 招标
    #icon-kaibiao
  • 个人自助
    #icon-zizhu
  • 融资
    #icon-rongzi1
  • 火车查询
    #icon-huochechaxun
  • 百度文库
    #icon-baiduwenku
  • 在线翻译
    #icon-language-online-translation
  • 计算机 算数
    #icon-jisuanjisuanshu
  • 天气预报
    #icon-tianqiyubao
  • 航班查询
    #icon-hangbanchaxun
  • return
    #icon-return
  • 用户,男,头像
    #icon-user-man
  • 用户,女,头像
    #icon-user-women
  • icon_address
    #icon-icon_address
  • 盘点
    #icon-pandian
  • 日记账
    #icon-rijizhang
  • 财务管理
    #icon-caiwuguanli
  • 应交税费表
    #icon-shuifei
  • 薪酬福利
    #icon-xinchoufuli
  • 资产计划
    #icon-zichanjihua
  • 资产
    #icon-zichan
  • 供应商预付款
    #icon-yufukuan
  • 扣除质保金
    #icon-kouchuzhibaojin
  • 收取质保金
    #icon-shouquzhibaojin
  • 销户
    #icon-xiaohu
  • 开户
    #icon-kaihu
  • all
    #icon-all
  • 文件-计划
    #icon-gongzuojihua
  • 授信管理
    #icon-shouxin
  • 食堂
    #icon-shitang
  • 投资
    #icon-touzi
  • home
    #icon-home
  • 工程建设
    #icon-gongchengjianshe
  • 融资
    #icon-rongzi
  • 九宫格9 palaces
    #icon-jiugongge
  • 会计核算
    #icon-kuaijihesuan
  • 租赁中心
    #icon-zulinzhongxin
  • 合同
    #icon-hetong
  • 费用
    #icon-feiyong
  • 差旅费用报销
    #icon-chailvbaoxiao
  • 还款
    #icon-huankuan
  • 借款
    #icon-jiekuan
  • 流程
    #icon-liucheng
  • 目标任务
    #icon-mubiaorenwu
  • 信息查询
    #icon-xinxichaxun1
  • 信息类型
    #icon-xinxileixing
  • 库存
    #icon-kucun
  • 用印申请
    #icon-yongyinshenqing
  • 领用
    #icon-lingyong
  • 入库
    #icon-ruku1
  • 栏目
    #icon-lanmu1
  • 分仓收发存汇总表
    #icon-cangkutongji
  • 变更
    #icon-biangeng
  • delete2
    #icon-del
  • edit-2
    #icon-edit
  • 查看流程
    #icon-view-flow
  • add
    #icon-add
  • detail
    #icon-detail
  • 无数据
    #icon-wushuju
  • 无数据
    #icon-wushuju1
  • 无数据
    #icon-wushuju2
  • 已读
    #icon-yidu
  • 未读
    #icon-unreadmsg
  • search
    #icon-search
  • oa
    #icon-oa
  • theme
    #icon-theme
  • 附件
    #icon-fujian
  • add
    #icon-add1
  • 收藏
    #icon-fav
  • select
    #icon-select
  • email
    #icon-email
  • address
    #icon-address
  • call
    #icon-call
  • computer
    #icon-computer
  • mobile
    #icon-mobile
  • Reply-All
    #icon-Reply-All
  • 转发
    #icon-zhuanfa
  • 抄送
    #icon-chaosong
  • 会议
    #icon-huiyi
  • xiaoxi
    #icon-xiaoxi
  • 云盘
    #icon-yunpan
  • 人事分析
    #icon-renshifenxi
  • 省略号
    #icon-shenglvehao
  • more
    #icon-more
  • working
    #icon-working
  • 公文
    #icon-gongwen
  • 出差申请
    #icon-chuchashenqing
  • 会议
    #icon-huiyi1
  • 请假
    #icon-qingjia
  • 感叹号_icon
    #icon-gantanhao_icon
  • 通过
    #icon-tongguo
  • 感叹号
    #icon-gantanhao
  • 说明
    #icon-ziyuan
  • 法律法规
    #icon-falvfagui
  • 监察分析
    #icon-msnui-report-sec
  • 人力资源
    #icon-renliziyuan
  • 正文套红
    #icon-caidan
  • 归档
    #icon-guidang
  • 工程管理
    #icon-gongchengguanli
  • 车辆管理
    #icon-cheliangguanli
  • 日程管理
    #icon-schedule
  • 印章管理
    #icon-Seal
  • 会议室
    #icon-meeting
  • 办公用品
    #icon-bangongyongpin
  • 公文管理
    #icon-worldSystem
  • 人力资源
    #icon-renliziyuan1
  • 系统管理
    #icon-dianpu
  • 统计查询
    #icon-tongjichaxun
  • 个人-主题
    #icon-lujing
  • 综合办公
    #icon-zonghebangong
  • 云下载
    #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-news
  • 查看
    #icon-check
  • 缩小
    #icon-delete
  • 放大
    #icon-pluscircle
  • 报表
    #icon-report
  • 统计
    #icon-statistics
  • 档案
    #icon-archives
  • 系统
    #icon-system
  • 单人
    #icon-user
  • 多人
    #icon-manyuser
  • 日历
    #icon-calendarfull
  • clock
    #icon-clock
  • 人事
    #icon-renshi
  • 薪酬
    #icon-xinchou
  • 培训
    #icon-peixun
  • 发文
    #icon-fawen
  • 收文
    #icon-shouwen
  • 公文交换
    #icon-gwjh
  • 工作汇报
    #icon-gongzuohuibao
  • WORD
    #icon-WORD
  • Excel.
    #icon-EXCEL
  • pdf
    #icon-PDF
  • 已办收文
    #icon-yibanshouwen
  • 已办发文
    #icon-yibanfawen
  • 我的发文
    #icon-wodefawen
  • 我的收文
    #icon-wodeshouwen
  • 发文拟稿
    #icon-fawennigao
  • 收文登记
    #icon-shouwendengji
  • 待办发文
    #icon-daibanfawen
  • 待办收文
    #icon-daibanshouwen
  • 公文统计
    #icon-gongwentongji
  • 公文监控
    #icon-m_gongwenjiankong
  • 议题管理
    #icon-yitiguanli
  • 会议通知
    #icon-huiyitongzhi
  • 回执
    #icon-huizhi
  • 我的会议室
    #icon-5
  • 会议室使用情况
    #icon-huiyishisy
  • 申请
    #icon-shenqing
  • 议题排序
    #icon-yitipaixu
  • 议题上报
    #icon-yitishangbao
  • 会议日历
    #icon-jihua
  • 信息维护
    #icon-xinxiweihu
  • 会议类型
    #icon-huiyileixing
  • 会议室使用情况
    #icon-second-menu-706
  • 议题信息
    #icon-yitixinxi
  • 栏目
    #icon-lanmu
  • 用车申请
    #icon-yongcheshenqing
  • 违章事故记录
    #icon-weizhangshigujilu
  • #icon-che1
  • 车辆保险
    #icon-cheliangbaoxian
  • 信息查询
    #icon-xinxichaxun
  • 出车还车
    #icon-chuchehuanche
  • 用车查询
    #icon-yongchechaxun
  • 机动车年检站查询
    #icon-cheliangnianjian
  • 用车申请
    #icon-yongcheshenqing1
  • 我的加油卡号
    #icon-wodejiayouqiahao
  • 汽车维修
    #icon-qicheweixiu
  • 过车查询
    #icon-fenleitubiaodaotu-
  • 日程列表
    #icon-richengliebiao
  • 耗材-1
    #icon-haocai-
  • 日程查询
    #icon-richengchaxun
  • 耗材柜
    #icon-haocaigui
  • 资产信息
    #icon-zichanxinxi
  • 耗材
    #icon-haocai
  • 日程计划
    #icon-richengjihua
  • 组件管理
    #icon-zujianguanli
  • 资产调拨
    #icon-zichantiaobo
  • 固定资产
    #icon-gudingzichan
  • 仓库管理
    #icon-cangkuguanli
  • 资产类别
    #icon-zichanleibie
  • 空间管理
    #icon-kongjianguanli
  • 公务接待
    #icon-gongwujiedai
  • 通讯录
    #icon-tongxunlu
  • 对号
    #icon-duihao
  • 通知
    #icon-tongzhi
  • 任务
    #icon-renwu
  • 车辆信息
    #icon-cheliangxinxi
  • 入库
    #icon-ruku
  • 任务分解-01
    #icon-renwufenjie
  • 日程类别
    #icon-richengleibie
  • 计量单位
    #icon-jiliangdanwei
  • 我的日程
    #icon-wodericheng
  • 日程_列表_导航_切换
    #icon-nac_ic_view
  • 退库
    #icon-tuiku
  • 台账
    #icon-taizhang
  • 日志
    #icon-rizhi
  • 信息发布
    #icon-xinxifabu

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>