• 搬迁补偿
    
  • 软件服务费
    
  • 任务池监控
    
  • 融资类其他业务
    
  • 取消挂起
    
  • 确认坏账
    
  • 取得内部借款
    
  • 清算结算退款
    
  • 其他营业外收入
    
  • 商检费
    
  • 可供出售金融资产-宣告分配股利
    
  • 内部背书(支付)
    
  • 劳动保护费
    
  • 绿化费
    
  • 内部费用分摊
    
  • 内部借款计息-债权方
    
  • 票据到期承兑
    
  • 内部借款收息
    
  • 票据提前解押
    
  • 能源费
    
  • 内部往来挂账
    
  • 票据贴现
    
  • 内部银行账户划转
    
  • 培训费
    
  • 票据质押
    
  • 票据开立
    
  • 内部借款计息-债务方
    
  • 其他日常费用
    
  • 内部借款利息收入
    
  • 其他调整
    
  • 经营性应付付款申请
    
  • 可供出售金融资产-出售
    
  • 可供出售金融资产-公允价值调整
    
  • 可供出售金融资产-计提股利所得税
    
  • 可供出售金融资产-收到股利
    
  • 可供出售金融资产-购买
    
  • 经营性政府补助
    
  • 可供出售金融资产-发放股利
    
  • 紧急挂起
    
  • 紧急支付
    
  • 出差申请查询统计
    
  • 待扫描查询
    
  • 固定资产盘盈
    
  • 付款准备明细查询
    
  • 促销费
    
  • 耗用品费用
    
  • 偿还内部借款
    
  • 会计在岗设置
    
  • 会议费
    
  • 发放内部借款
    
  • 购汇
    
  • 福利费计提
    
  • 会议费收入
    
  • 非货币性福利
    
  • 计提资金归集利息收入
    
  • 计提资金归集利息支出
    
  • 工程待摊支出
    
  • 存货跌价准备转回
    
  • 交通费
    
  • 奖励收入
    
  • 缴纳扣款
    
  • 差旅费
    
  • 保险费
    
  • 仓储费
    
  • 备用金借款
    
  • 经营性预付款申请
    
  • 差旅事前申请
    
  • 短期借款
    
  • 保险赔款收入
    
  • 非经营性应付付款申请
    
  • 待审批
    
  • 办公用品费
    
  • 存货盘点-盘盈 2
    
  • 非审计费
    
  • 报关费
    
  • 偿还长期借款-银行自动扣款
    
  • 分组设置
    
  • 付款申请审核
    
  • 补充商业保险
    
  • 工作日历
    
  • 报销单综合查询
    
  • 供应商预付款
    
  • 偿还短期借款-银行自动扣款
    
  • 公积金及其他计提
    
  • 福利费
    
  • 坏账准备
    
  • 保证金押金付款
    
  • 差旅费明细查询
    
  • 非经营性预付款申请
    
  • 存货盘点-盘亏
    
  • 个人垫款退款
    
  • 办公行政费
    
  • 广告宣传费
    
  • 会计不在岗设置
    
  • 代理费
    
  • 结汇
    
  • 车辆费
    
  • 津贴或补贴
    
  • 已审批
    
  • 银行手续费
    
  • 存货跌价准备
    
  • 污水处理费
    
  • 社团费
    
  • 审计费
    
  • 现金折扣(销售)
    
  • 试验检验费
    
  • 小组工作范围
    
  • 物业管理费
    
  • 社保计提
    
  • 差旅报销授权
    
  • 手续费返还
    
  • 信息服务收入
    
  • 已扫描查询
    
  • 投资-购买
    
  • 外部借款计息
    
  • 收到票据
    
  • 样品费
    
  • 业务招待费
    
  • 违约赔偿收入
    
  • 投资-支付股利
    
  • 税费计提
    
  • 无形资产盘盈
    
  • 生物资产盘盈
    
  • 维修保养费
    
  • 移动通讯费
    
  • 收到保证金及押金
    
  • 行政收费
    
  • 我的申请
    
  • 市场推广费
    
  • 物流仓储收入
    
  • 生成发票监控
    
  • 业务招待事前申请
    
  • 收回坏账
    
  • 银行存款利息收入
    
  • 委托授权
    
  • 现金流调整
    
  • 影像待办
    
  • 应付差错更正
    
  • 应付职工薪酬计提
    
  • 应收差错更正
    
  • 员工差旅借款
    
  • 在建工程转固
    
  • 在建工程支出
    
  • 员工现金还款
    
  • 长期股权投资-计提减值
    
  • 员工其他借款
    
  • 长期股权投资-宣告分配股利
    
  • 长期股权投资-收到股利
    
  • 职工教育经费
    
  • 长期借款
    
  • 滞纳金收入
    
  • 装卸驳运费
    
  • 咨询服务收入
    
  • 资本性政府补助
    
  • 准备付款
    
  • 资产采购新增
    
  • 资产差错更正
    
  • 资产出售/报废/盘亏
    
  • 资产技改
    
  • 资产减值
    
  • 资产调拨
    
  • 资产盘点
    
  • 总账差错更正
    
  • 总账凭证处理
    
  • 租赁费
    
  • 员工转账还款
    
  • 运输费
    
  • 招标费
    
  • 长期股权投资-出售
    
  • 资金审核
    
  • 租赁服务收入
    
  • 支付外部借款利息
    
  • 预收款退款
    
  • 支付内部借款利息
    
  • 运输费收入
    
  • 收回内部借款
    
  • ABS/ABN手续费
    
  • 保理手续费
    
  • 办公行政报账
    
  • 保证金押金
    
  • 报销单综合查询
    
  • 报销事前申请
    
  • 报账申请
    
  • 本地收款分类工作台
    
  • 本地出纳代办
    
  • 查询统计
    
  • 财务费用
    
  • 查询发票监控
    
  • 查询小组工作范围
    
  • 导入失败收款工作台查询
    
  • 待审批收款
    
  • 对私支付
    
  • 罚赔款支出
    
  • 发送数据报送
    
  • 非经营性付款
    
  • 付款工作台
    
  • 付款申请
    
  • 福利成本报账
    
  • 工单
    
  • 共享收款分类工作台
    
  • 供应商收款
    
  • 供应商报账申请
    
  • 供应商收款复核
    
  • 供应商费用预付款
    
  • 供应商收款退回
    
  • 供应商收款认领
    
  • 合同工单(经营性)
    
  • 合同工单
    
  • 会计处理
    
  • 接受数据报送
    
  • 接口数据
    
  • 缴纳税费
    
  • 借还款凭证
    
  • 经营性付款
    
  • 借款/还款申请
    
  • 捐赠利得
    
  • 可供出售金融资产-宣告发放股利
    
  • 捐赠支出
    
  • 客户类收款复核
    
  • 客户类收款退回
    
  • 客户类收款认领
    
  • 客户收款
    
  • 批量审批
    
  • 盘点工单
    
  • 票据管理工单
    
  • 其他费用报账
    
  • 其他
    
  • 其他类收款复核
    
  • 其他类收款退回
    
  • 其他类收款认领
    
  • 其他收款
    
  • 其他业务收入工单
    
  • 其他营业外支出
    
  • 商务成本报账
    
  • 审批流程
    
  • 收款分类
    
  • 收款工作台
    
  • 收款复核分类工作台
    
  • 收款工作台查询
    
  • 收款认领
    
  • 手续费导入
    
  • 手工增加收款
    
  • 特殊收款工单
    
  • 特殊退款工单
    
  • 所有后台功能icon
    
  • 特殊支付工单
    
  • 投资
    
  • 完成收款工作台
    
  • 新增收款
    
  • 预付款借款明细查询
    
  • 员工报销申请
    
  • 员工福利报销
    
  • 员工借还款
    
  • 长期股权投资-宣告发放股利
    
  • 招待费报销授权
    
  • 员工商务报销
    
  • 资本性支出报账
    
  • 资产报账
    
  • 资产卡片处置其他
    
  • 资产卡片新增/变动
    
  • 资产其他新增
    
  • 资产盘点
    
  • 总账处理及调整工单
    
  • 总账及其他
    
  • 营业外收支
    

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-banqianbuchang
  • 软件服务费
    .icon-ruanjianfuwufei
  • 任务池监控
    .icon-renwuchijiankong
  • 融资类其他业务
    .icon-rongzileiqitayewu
  • 取消挂起
    .icon-quxiaoguaqi
  • 确认坏账
    .icon-querenhuaizhang
  • 取得内部借款
    .icon-qudeneibujiekuan
  • 清算结算退款
    .icon-qingsuanjiesuantuikuan
  • 其他营业外收入
    .icon-qitayingyewaishouru
  • 商检费
    .icon-shangjianfei
  • 可供出售金融资产-宣告分配股利
    .icon-kegongchushoujinrongzichan-xuangaofenpeiguli
  • 内部背书(支付)
    .icon-neibubeishuzhifu
  • 劳动保护费
    .icon-laodongbaohufei
  • 绿化费
    .icon-lvhuafei
  • 内部费用分摊
    .icon-neibufeiyongfentan
  • 内部借款计息-债权方
    .icon-neibujiekuanjixi-zhaiquanfang
  • 票据到期承兑
    .icon-piaojudaoqichengdui
  • 内部借款收息
    .icon-neibujiekuanshouxi
  • 票据提前解押
    .icon-piaojutiqianjieya
  • 能源费
    .icon-nengyuanfei
  • 内部往来挂账
    .icon-neibuwanglaiguazhang
  • 票据贴现
    .icon-piaojutiexian
  • 内部银行账户划转
    .icon-neibuyinhangzhanghuhuazhuan
  • 培训费
    .icon-peixunfei
  • 票据质押
    .icon-piaojuzhiya
  • 票据开立
    .icon-piaojukaili
  • 内部借款计息-债务方
    .icon-neibujiekuanjixi-zhaiwufang
  • 其他日常费用
    .icon-qitarichangfeiyong
  • 内部借款利息收入
    .icon-neibujiekuanlixishouru
  • 其他调整
    .icon-qitatiaozheng
  • 经营性应付付款申请
    .icon-jingyingxingyingfufukuanshenqing
  • 可供出售金融资产-出售
    .icon-kegongchushoujinrongzichan-chushou
  • 可供出售金融资产-公允价值调整
    .icon-kegongchushoujinrongzichan-gongyunjiazhitiaozheng
  • 可供出售金融资产-计提股利所得税
    .icon-kegongchushoujinrongzichan-jitigulisuodeshui
  • 可供出售金融资产-收到股利
    .icon-kegongchushoujinrongzichan-shoudaoguli
  • 可供出售金融资产-购买
    .icon-kegongchushoujinrongzichan-goumai
  • 经营性政府补助
    .icon-jingyingxingzhengfubuzhu
  • 可供出售金融资产-发放股利
    .icon-kegongchushoujinrongzichan-fafangguli
  • 紧急挂起
    .icon-jinjiguaqi
  • 紧急支付
    .icon-jinjizhifu
  • 出差申请查询统计
    .icon-chuchashenqingchaxuntongji
  • 待扫描查询
    .icon-daisaomiaochaxun
  • 固定资产盘盈
    .icon-gudingzichanpanying
  • 付款准备明细查询
    .icon-fukuanzhunbeimingxichaxun
  • 促销费
    .icon-cuxiaofei
  • 耗用品费用
    .icon-haoyongpinfeiyong
  • 偿还内部借款
    .icon-changhuanneibujiekuan
  • 会计在岗设置
    .icon-huijizaigangshezhi
  • 会议费
    .icon-huiyifei
  • 发放内部借款
    .icon-fafangneibujiekuan
  • 购汇
    .icon-gouhui
  • 福利费计提
    .icon-fulifeijiti
  • 会议费收入
    .icon-huiyifeishouru
  • 非货币性福利
    .icon-feihuobixingfuli
  • 计提资金归集利息收入
    .icon-jitizijinguijilixishouru
  • 计提资金归集利息支出
    .icon-jitizijinguijilixizhichu
  • 工程待摊支出
    .icon-gongchengdaitanzhichu
  • 存货跌价准备转回
    .icon-cunhuodiejiazhunbeizhuanhui
  • 交通费
    .icon-jiaotongfei
  • 奖励收入
    .icon-jianglishouru
  • 缴纳扣款
    .icon-jiaonakoukuan
  • 差旅费
    .icon-chalvfei
  • 保险费
    .icon-baoxianfei
  • 仓储费
    .icon-cangchufei
  • 备用金借款
    .icon-beiyongjinjiekuan
  • 经营性预付款申请
    .icon-jingyingxingyufukuanshenqing
  • 差旅事前申请
    .icon-chalvshiqianshenqing
  • 短期借款
    .icon-duanqijiekuan
  • 保险赔款收入
    .icon-baoxianpeikuanshouru
  • 非经营性应付付款申请
    .icon-feijingyingxingyingfufukuanshenqing
  • 待审批
    .icon-daishenpi
  • 办公用品费
    .icon-bangongyongpinfei
  • 存货盘点-盘盈 2
    .icon-cunhuopandian-panying
  • 非审计费
    .icon-feishenjifei
  • 报关费
    .icon-baoguanfei
  • 偿还长期借款-银行自动扣款
    .icon-changhuanchangqijiekuan-yinhangzidongkoukuan
  • 分组设置
    .icon-fenzushezhi
  • 付款申请审核
    .icon-fukuanshenqingshenhe
  • 补充商业保险
    .icon-buchongshangyebaoxian
  • 工作日历
    .icon-gongzuorili
  • 报销单综合查询
    .icon-baoxiaodanzonghechaxun
  • 供应商预付款
    .icon-gongyingshangyufukuan
  • 偿还短期借款-银行自动扣款
    .icon-changhuanduanqijiekuan-yinhangzidongkoukuan
  • 公积金及其他计提
    .icon-gongjijinjiqitajiti
  • 福利费
    .icon-fulifei
  • 坏账准备
    .icon-huaizhangzhunbei
  • 保证金押金付款
    .icon-baozhengjinyajinfukuan
  • 差旅费明细查询
    .icon-chalvfeimingxichaxun
  • 非经营性预付款申请
    .icon-feijingyingxingyufukuanshenqing
  • 存货盘点-盘亏
    .icon-cunhuopandian-pankui
  • 个人垫款退款
    .icon-gerendiankuantuikuan
  • 办公行政费
    .icon-bangonghangzhengfei
  • 广告宣传费
    .icon-guanggaoxuanchuanfei
  • 会计不在岗设置
    .icon-huijibuzaigangshezhi
  • 代理费
    .icon-dailifei
  • 结汇
    .icon-jiehui
  • 车辆费
    .icon-cheliangfei
  • 津贴或补贴
    .icon-jintiehuobutie
  • 已审批
    .icon-yishenpi
  • 银行手续费
    .icon-yinhangshouxufei
  • 存货跌价准备
    .icon-cunhuodiejiazhunbei
  • 污水处理费
    .icon-wushuichulifei
  • 社团费
    .icon-shetuanfei
  • 审计费
    .icon-shenjifei
  • 现金折扣(销售)
    .icon-xianjinzhekouxiaoshou
  • 试验检验费
    .icon-shiyanjianyanfei
  • 小组工作范围
    .icon-xiaozugongzuofanwei
  • 物业管理费
    .icon-wuyeguanlifei
  • 社保计提
    .icon-shebaojiti
  • 差旅报销授权
    .icon-chalvbaoxiaoshouquan
  • 手续费返还
    .icon-shouxufeifanhuan
  • 信息服务收入
    .icon-xinxifuwushouru
  • 已扫描查询
    .icon-yisaomiaochaxun
  • 投资-购买
    .icon-touzi-goumai
  • 外部借款计息
    .icon-waibujiekuanjixi
  • 收到票据
    .icon-shoudaopiaoju
  • 样品费
    .icon-yangpinfei
  • 业务招待费
    .icon-yewuzhaodaifei
  • 违约赔偿收入
    .icon-weiyuepeichangshouru
  • 投资-支付股利
    .icon-touzi-zhifuguli
  • 税费计提
    .icon-shuifeijiti
  • 无形资产盘盈
    .icon-wuxingzichanpanying
  • 生物资产盘盈
    .icon-shengwuzichanpanying
  • 维修保养费
    .icon-weixiubaoyangfei
  • 移动通讯费
    .icon-yidongtongxunfei
  • 收到保证金及押金
    .icon-shoudaobaozhengjinjiyajin
  • 行政收费
    .icon-hangzhengshoufei
  • 我的申请
    .icon-wodeshenqing
  • 市场推广费
    .icon-shichangtuiguangfei
  • 物流仓储收入
    .icon-wuliucangchushouru
  • 生成发票监控
    .icon-shengchengfapiaojiankong
  • 业务招待事前申请
    .icon-yewuzhaodaishiqianshenqing
  • 收回坏账
    .icon-shouhuihuaizhang
  • 银行存款利息收入
    .icon-yinhangcunkuanlixishouru
  • 委托授权
    .icon-weituoshouquan
  • 现金流调整
    .icon-xianjinliutiaozheng
  • 影像待办
    .icon-yingxiangdaiban
  • 应付差错更正
    .icon-yingfuchacuogengzheng
  • 应付职工薪酬计提
    .icon-yingfuzhigongxinchoujiti
  • 应收差错更正
    .icon-yingshouchacuogengzheng
  • 员工差旅借款
    .icon-yuangongchalvjiekuan
  • 在建工程转固
    .icon-zaijiangongchengzhuangu
  • 在建工程支出
    .icon-zaijiangongchengzhichu
  • 员工现金还款
    .icon-yuangongxianjinhuankuan
  • 长期股权投资-计提减值
    .icon-changqiguquantouzi-jitijianzhi
  • 员工其他借款
    .icon-yuangongqitajiekuan
  • 长期股权投资-宣告分配股利
    .icon-changqiguquantouzi-xuangaofenpeiguli
  • 长期股权投资-收到股利
    .icon-changqiguquantouzi-shoudaoguli
  • 职工教育经费
    .icon-zhigongjiaoyujingfei
  • 长期借款
    .icon-changqijiekuan
  • 滞纳金收入
    .icon-zhinajinshouru
  • 装卸驳运费
    .icon-zhuangxieboyunfei
  • 咨询服务收入
    .icon-zixunfuwushouru
  • 资本性政府补助
    .icon-zibenxingzhengfubuzhu
  • 准备付款
    .icon-zhunbeifukuan
  • 资产采购新增
    .icon-zichancaigouxinzeng
  • 资产差错更正
    .icon-zichanchacuogengzheng
  • 资产出售/报废/盘亏
    .icon-zichanchushoubaofeipankui
  • 资产技改
    .icon-zichanjigai
  • 资产减值
    .icon-zichanjianzhi
  • 资产调拨
    .icon-zichantiaobo
  • 资产盘点
    .icon-zichanpandian
  • 总账差错更正
    .icon-zongzhangchacuogengzheng
  • 总账凭证处理
    .icon-zongzhangpingzhengchuli
  • 租赁费
    .icon-zulinfei
  • 员工转账还款
    .icon-yuangongzhuanzhanghuankuan
  • 运输费
    .icon-yunshufei
  • 招标费
    .icon-zhaobiaofei
  • 长期股权投资-出售
    .icon-changqiguquantouzi-chushou
  • 资金审核
    .icon-zijinshenhe
  • 租赁服务收入
    .icon-zulinfuwushouru
  • 支付外部借款利息
    .icon-zhifuwaibujiekuanlixi
  • 预收款退款
    .icon-yushoukuantuikuan
  • 支付内部借款利息
    .icon-zhifuneibujiekuanlixi
  • 运输费收入
    .icon-yunshufeishouru
  • 收回内部借款
    .icon-shouhuineibujiekuan
  • ABS/ABN手续费
    .icon-ABSABNshouxufei
  • 保理手续费
    .icon-baolishouxufei
  • 办公行政报账
    .icon-bangonghangzhengbaozhang
  • 保证金押金
    .icon-baozhengjinyajin
  • 报销单综合查询
    .icon-baoxiaodanzonghechaxun1
  • 报销事前申请
    .icon-baoxiaoshiqianshenqing
  • 报账申请
    .icon-baozhangshenqing
  • 本地收款分类工作台
    .icon-bendishoukuanfenleigongzuotai
  • 本地出纳代办
    .icon-bendichunadaiban
  • 查询统计
    .icon-chaxuntongji
  • 财务费用
    .icon-caiwufeiyong
  • 查询发票监控
    .icon-chaxunfapiaojiankong
  • 查询小组工作范围
    .icon-chaxunxiaozugongzuofanwei
  • 导入失败收款工作台查询
    .icon-daorushibaishoukuangongzuotaichaxun
  • 待审批收款
    .icon-daishenpishoukuan
  • 对私支付
    .icon-duisizhifu
  • 罚赔款支出
    .icon-fapeikuanzhichu
  • 发送数据报送
    .icon-fasongshujubaosong
  • 非经营性付款
    .icon-feijingyingxingfukuan
  • 付款工作台
    .icon-fukuangongzuotai
  • 付款申请
    .icon-fukuanshenqing
  • 福利成本报账
    .icon-fulichengbenbaozhang
  • 工单
    .icon-gongdan
  • 共享收款分类工作台
    .icon-gongxiangshoukuanfenleigongzuotai
  • 供应商收款
    .icon-gongyingshangshoukuan
  • 供应商报账申请
    .icon-gongyingshangbaozhangshenqing
  • 供应商收款复核
    .icon-gongyingshangshoukuanfuhe
  • 供应商费用预付款
    .icon-gongyingshangfeiyongyufukuan
  • 供应商收款退回
    .icon-gongyingshangshoukuantuihui
  • 供应商收款认领
    .icon-gongyingshangshoukuanrenling
  • 合同工单(经营性)
    .icon-hetonggongdanjingyingxing
  • 合同工单
    .icon-hetonggongdan
  • 会计处理
    .icon-huijichuli
  • 接受数据报送
    .icon-jieshoushujubaosong
  • 接口数据
    .icon-jiekoushuju
  • 缴纳税费
    .icon-jiaonashuifei
  • 借还款凭证
    .icon-jiehuankuanpingzheng
  • 经营性付款
    .icon-jingyingxingfukuan
  • 借款/还款申请
    .icon-jiekuanhuankuanshenqing
  • 捐赠利得
    .icon-juanzenglide
  • 可供出售金融资产-宣告发放股利
    .icon-kegongchushoujinrongzichan-xuangaofafangguli
  • 捐赠支出
    .icon-juanzengzhichu
  • 客户类收款复核
    .icon-kehuleishoukuanfuhe
  • 客户类收款退回
    .icon-kehuleishoukuantuihui
  • 客户类收款认领
    .icon-kehuleishoukuanrenling
  • 客户收款
    .icon-kehushoukuan
  • 批量审批
    .icon-piliangshenpi
  • 盘点工单
    .icon-pandiangongdan
  • 票据管理工单
    .icon-piaojuguanligongdan
  • 其他费用报账
    .icon-qitafeiyongbaozhang
  • 其他
    .icon-qita
  • 其他类收款复核
    .icon-qitaleishoukuanfuhe
  • 其他类收款退回
    .icon-qitaleishoukuantuihui
  • 其他类收款认领
    .icon-qitaleishoukuanrenling
  • 其他收款
    .icon-qitashoukuan
  • 其他业务收入工单
    .icon-qitayewushourugongdan
  • 其他营业外支出
    .icon-qitayingyewaizhichu
  • 商务成本报账
    .icon-shangwuchengbenbaozhang
  • 审批流程
    .icon-shenpiliucheng
  • 收款分类
    .icon-shoukuanfenlei
  • 收款工作台
    .icon-shoukuangongzuotai
  • 收款复核分类工作台
    .icon-shoukuanfuhefenleigongzuotai
  • 收款工作台查询
    .icon-shoukuangongzuotaichaxun
  • 收款认领
    .icon-shoukuanrenling
  • 手续费导入
    .icon-shouxufeidaoru
  • 手工增加收款
    .icon-shougongzengjiashoukuan
  • 特殊收款工单
    .icon-teshushoukuangongdan
  • 特殊退款工单
    .icon-teshutuikuangongdan
  • 所有后台功能icon
    .icon-suoyouhoutaigongnengicon
  • 特殊支付工单
    .icon-teshuzhifugongdan
  • 投资
    .icon-touzi
  • 完成收款工作台
    .icon-wanchengshoukuangongzuotai
  • 新增收款
    .icon-xinzengshoukuan
  • 预付款借款明细查询
    .icon-yufukuanjiekuanmingxichaxun
  • 员工报销申请
    .icon-yuangongbaoxiaoshenqing
  • 员工福利报销
    .icon-yuangongfulibaoxiao
  • 员工借还款
    .icon-yuangongjiehuankuan
  • 长期股权投资-宣告发放股利
    .icon-changqiguquantouzi-xuangaofafangguli
  • 招待费报销授权
    .icon-zhaodaifeibaoxiaoshouquan
  • 员工商务报销
    .icon-yuangongshangwubaoxiao
  • 资本性支出报账
    .icon-zibenxingzhichubaozhang
  • 资产报账
    .icon-zichanbaozhang
  • 资产卡片处置其他
    .icon-zichanqiapianchuzhiqita
  • 资产卡片新增/变动
    .icon-zichanqiapianxinzengbiandong
  • 资产其他新增
    .icon-zichanqitaxinzeng
  • 资产盘点
    .icon-zichanpandian1
  • 总账处理及调整工单
    .icon-zongzhangchulijitiaozhenggongdan
  • 总账及其他
    .icon-zongzhangjiqita
  • 营业外收支
    .icon-yingyewaishouzhi

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-banqianbuchang
  • 软件服务费
    #icon-ruanjianfuwufei
  • 任务池监控
    #icon-renwuchijiankong
  • 融资类其他业务
    #icon-rongzileiqitayewu
  • 取消挂起
    #icon-quxiaoguaqi
  • 确认坏账
    #icon-querenhuaizhang
  • 取得内部借款
    #icon-qudeneibujiekuan
  • 清算结算退款
    #icon-qingsuanjiesuantuikuan
  • 其他营业外收入
    #icon-qitayingyewaishouru
  • 商检费
    #icon-shangjianfei
  • 可供出售金融资产-宣告分配股利
    #icon-kegongchushoujinrongzichan-xuangaofenpeiguli
  • 内部背书(支付)
    #icon-neibubeishuzhifu
  • 劳动保护费
    #icon-laodongbaohufei
  • 绿化费
    #icon-lvhuafei
  • 内部费用分摊
    #icon-neibufeiyongfentan
  • 内部借款计息-债权方
    #icon-neibujiekuanjixi-zhaiquanfang
  • 票据到期承兑
    #icon-piaojudaoqichengdui
  • 内部借款收息
    #icon-neibujiekuanshouxi
  • 票据提前解押
    #icon-piaojutiqianjieya
  • 能源费
    #icon-nengyuanfei
  • 内部往来挂账
    #icon-neibuwanglaiguazhang
  • 票据贴现
    #icon-piaojutiexian
  • 内部银行账户划转
    #icon-neibuyinhangzhanghuhuazhuan
  • 培训费
    #icon-peixunfei
  • 票据质押
    #icon-piaojuzhiya
  • 票据开立
    #icon-piaojukaili
  • 内部借款计息-债务方
    #icon-neibujiekuanjixi-zhaiwufang
  • 其他日常费用
    #icon-qitarichangfeiyong
  • 内部借款利息收入
    #icon-neibujiekuanlixishouru
  • 其他调整
    #icon-qitatiaozheng
  • 经营性应付付款申请
    #icon-jingyingxingyingfufukuanshenqing
  • 可供出售金融资产-出售
    #icon-kegongchushoujinrongzichan-chushou
  • 可供出售金融资产-公允价值调整
    #icon-kegongchushoujinrongzichan-gongyunjiazhitiaozheng
  • 可供出售金融资产-计提股利所得税
    #icon-kegongchushoujinrongzichan-jitigulisuodeshui
  • 可供出售金融资产-收到股利
    #icon-kegongchushoujinrongzichan-shoudaoguli
  • 可供出售金融资产-购买
    #icon-kegongchushoujinrongzichan-goumai
  • 经营性政府补助
    #icon-jingyingxingzhengfubuzhu
  • 可供出售金融资产-发放股利
    #icon-kegongchushoujinrongzichan-fafangguli
  • 紧急挂起
    #icon-jinjiguaqi
  • 紧急支付
    #icon-jinjizhifu
  • 出差申请查询统计
    #icon-chuchashenqingchaxuntongji
  • 待扫描查询
    #icon-daisaomiaochaxun
  • 固定资产盘盈
    #icon-gudingzichanpanying
  • 付款准备明细查询
    #icon-fukuanzhunbeimingxichaxun
  • 促销费
    #icon-cuxiaofei
  • 耗用品费用
    #icon-haoyongpinfeiyong
  • 偿还内部借款
    #icon-changhuanneibujiekuan
  • 会计在岗设置
    #icon-huijizaigangshezhi
  • 会议费
    #icon-huiyifei
  • 发放内部借款
    #icon-fafangneibujiekuan
  • 购汇
    #icon-gouhui
  • 福利费计提
    #icon-fulifeijiti
  • 会议费收入
    #icon-huiyifeishouru
  • 非货币性福利
    #icon-feihuobixingfuli
  • 计提资金归集利息收入
    #icon-jitizijinguijilixishouru
  • 计提资金归集利息支出
    #icon-jitizijinguijilixizhichu
  • 工程待摊支出
    #icon-gongchengdaitanzhichu
  • 存货跌价准备转回
    #icon-cunhuodiejiazhunbeizhuanhui
  • 交通费
    #icon-jiaotongfei
  • 奖励收入
    #icon-jianglishouru
  • 缴纳扣款
    #icon-jiaonakoukuan
  • 差旅费
    #icon-chalvfei
  • 保险费
    #icon-baoxianfei
  • 仓储费
    #icon-cangchufei
  • 备用金借款
    #icon-beiyongjinjiekuan
  • 经营性预付款申请
    #icon-jingyingxingyufukuanshenqing
  • 差旅事前申请
    #icon-chalvshiqianshenqing
  • 短期借款
    #icon-duanqijiekuan
  • 保险赔款收入
    #icon-baoxianpeikuanshouru
  • 非经营性应付付款申请
    #icon-feijingyingxingyingfufukuanshenqing
  • 待审批
    #icon-daishenpi
  • 办公用品费
    #icon-bangongyongpinfei
  • 存货盘点-盘盈 2
    #icon-cunhuopandian-panying
  • 非审计费
    #icon-feishenjifei
  • 报关费
    #icon-baoguanfei
  • 偿还长期借款-银行自动扣款
    #icon-changhuanchangqijiekuan-yinhangzidongkoukuan
  • 分组设置
    #icon-fenzushezhi
  • 付款申请审核
    #icon-fukuanshenqingshenhe
  • 补充商业保险
    #icon-buchongshangyebaoxian
  • 工作日历
    #icon-gongzuorili
  • 报销单综合查询
    #icon-baoxiaodanzonghechaxun
  • 供应商预付款
    #icon-gongyingshangyufukuan
  • 偿还短期借款-银行自动扣款
    #icon-changhuanduanqijiekuan-yinhangzidongkoukuan
  • 公积金及其他计提
    #icon-gongjijinjiqitajiti
  • 福利费
    #icon-fulifei
  • 坏账准备
    #icon-huaizhangzhunbei
  • 保证金押金付款
    #icon-baozhengjinyajinfukuan
  • 差旅费明细查询
    #icon-chalvfeimingxichaxun
  • 非经营性预付款申请
    #icon-feijingyingxingyufukuanshenqing
  • 存货盘点-盘亏
    #icon-cunhuopandian-pankui
  • 个人垫款退款
    #icon-gerendiankuantuikuan
  • 办公行政费
    #icon-bangonghangzhengfei
  • 广告宣传费
    #icon-guanggaoxuanchuanfei
  • 会计不在岗设置
    #icon-huijibuzaigangshezhi
  • 代理费
    #icon-dailifei
  • 结汇
    #icon-jiehui
  • 车辆费
    #icon-cheliangfei
  • 津贴或补贴
    #icon-jintiehuobutie
  • 已审批
    #icon-yishenpi
  • 银行手续费
    #icon-yinhangshouxufei
  • 存货跌价准备
    #icon-cunhuodiejiazhunbei
  • 污水处理费
    #icon-wushuichulifei
  • 社团费
    #icon-shetuanfei
  • 审计费
    #icon-shenjifei
  • 现金折扣(销售)
    #icon-xianjinzhekouxiaoshou
  • 试验检验费
    #icon-shiyanjianyanfei
  • 小组工作范围
    #icon-xiaozugongzuofanwei
  • 物业管理费
    #icon-wuyeguanlifei
  • 社保计提
    #icon-shebaojiti
  • 差旅报销授权
    #icon-chalvbaoxiaoshouquan
  • 手续费返还
    #icon-shouxufeifanhuan
  • 信息服务收入
    #icon-xinxifuwushouru
  • 已扫描查询
    #icon-yisaomiaochaxun
  • 投资-购买
    #icon-touzi-goumai
  • 外部借款计息
    #icon-waibujiekuanjixi
  • 收到票据
    #icon-shoudaopiaoju
  • 样品费
    #icon-yangpinfei
  • 业务招待费
    #icon-yewuzhaodaifei
  • 违约赔偿收入
    #icon-weiyuepeichangshouru
  • 投资-支付股利
    #icon-touzi-zhifuguli
  • 税费计提
    #icon-shuifeijiti
  • 无形资产盘盈
    #icon-wuxingzichanpanying
  • 生物资产盘盈
    #icon-shengwuzichanpanying
  • 维修保养费
    #icon-weixiubaoyangfei
  • 移动通讯费
    #icon-yidongtongxunfei
  • 收到保证金及押金
    #icon-shoudaobaozhengjinjiyajin
  • 行政收费
    #icon-hangzhengshoufei
  • 我的申请
    #icon-wodeshenqing
  • 市场推广费
    #icon-shichangtuiguangfei
  • 物流仓储收入
    #icon-wuliucangchushouru
  • 生成发票监控
    #icon-shengchengfapiaojiankong
  • 业务招待事前申请
    #icon-yewuzhaodaishiqianshenqing
  • 收回坏账
    #icon-shouhuihuaizhang
  • 银行存款利息收入
    #icon-yinhangcunkuanlixishouru
  • 委托授权
    #icon-weituoshouquan
  • 现金流调整
    #icon-xianjinliutiaozheng
  • 影像待办
    #icon-yingxiangdaiban
  • 应付差错更正
    #icon-yingfuchacuogengzheng
  • 应付职工薪酬计提
    #icon-yingfuzhigongxinchoujiti
  • 应收差错更正
    #icon-yingshouchacuogengzheng
  • 员工差旅借款
    #icon-yuangongchalvjiekuan
  • 在建工程转固
    #icon-zaijiangongchengzhuangu
  • 在建工程支出
    #icon-zaijiangongchengzhichu
  • 员工现金还款
    #icon-yuangongxianjinhuankuan
  • 长期股权投资-计提减值
    #icon-changqiguquantouzi-jitijianzhi
  • 员工其他借款
    #icon-yuangongqitajiekuan
  • 长期股权投资-宣告分配股利
    #icon-changqiguquantouzi-xuangaofenpeiguli
  • 长期股权投资-收到股利
    #icon-changqiguquantouzi-shoudaoguli
  • 职工教育经费
    #icon-zhigongjiaoyujingfei
  • 长期借款
    #icon-changqijiekuan
  • 滞纳金收入
    #icon-zhinajinshouru
  • 装卸驳运费
    #icon-zhuangxieboyunfei
  • 咨询服务收入
    #icon-zixunfuwushouru
  • 资本性政府补助
    #icon-zibenxingzhengfubuzhu
  • 准备付款
    #icon-zhunbeifukuan
  • 资产采购新增
    #icon-zichancaigouxinzeng
  • 资产差错更正
    #icon-zichanchacuogengzheng
  • 资产出售/报废/盘亏
    #icon-zichanchushoubaofeipankui
  • 资产技改
    #icon-zichanjigai
  • 资产减值
    #icon-zichanjianzhi
  • 资产调拨
    #icon-zichantiaobo
  • 资产盘点
    #icon-zichanpandian
  • 总账差错更正
    #icon-zongzhangchacuogengzheng
  • 总账凭证处理
    #icon-zongzhangpingzhengchuli
  • 租赁费
    #icon-zulinfei
  • 员工转账还款
    #icon-yuangongzhuanzhanghuankuan
  • 运输费
    #icon-yunshufei
  • 招标费
    #icon-zhaobiaofei
  • 长期股权投资-出售
    #icon-changqiguquantouzi-chushou
  • 资金审核
    #icon-zijinshenhe
  • 租赁服务收入
    #icon-zulinfuwushouru
  • 支付外部借款利息
    #icon-zhifuwaibujiekuanlixi
  • 预收款退款
    #icon-yushoukuantuikuan
  • 支付内部借款利息
    #icon-zhifuneibujiekuanlixi
  • 运输费收入
    #icon-yunshufeishouru
  • 收回内部借款
    #icon-shouhuineibujiekuan
  • ABS/ABN手续费
    #icon-ABSABNshouxufei
  • 保理手续费
    #icon-baolishouxufei
  • 办公行政报账
    #icon-bangonghangzhengbaozhang
  • 保证金押金
    #icon-baozhengjinyajin
  • 报销单综合查询
    #icon-baoxiaodanzonghechaxun1
  • 报销事前申请
    #icon-baoxiaoshiqianshenqing
  • 报账申请
    #icon-baozhangshenqing
  • 本地收款分类工作台
    #icon-bendishoukuanfenleigongzuotai
  • 本地出纳代办
    #icon-bendichunadaiban
  • 查询统计
    #icon-chaxuntongji
  • 财务费用
    #icon-caiwufeiyong
  • 查询发票监控
    #icon-chaxunfapiaojiankong
  • 查询小组工作范围
    #icon-chaxunxiaozugongzuofanwei
  • 导入失败收款工作台查询
    #icon-daorushibaishoukuangongzuotaichaxun
  • 待审批收款
    #icon-daishenpishoukuan
  • 对私支付
    #icon-duisizhifu
  • 罚赔款支出
    #icon-fapeikuanzhichu
  • 发送数据报送
    #icon-fasongshujubaosong
  • 非经营性付款
    #icon-feijingyingxingfukuan
  • 付款工作台
    #icon-fukuangongzuotai
  • 付款申请
    #icon-fukuanshenqing
  • 福利成本报账
    #icon-fulichengbenbaozhang
  • 工单
    #icon-gongdan
  • 共享收款分类工作台
    #icon-gongxiangshoukuanfenleigongzuotai
  • 供应商收款
    #icon-gongyingshangshoukuan
  • 供应商报账申请
    #icon-gongyingshangbaozhangshenqing
  • 供应商收款复核
    #icon-gongyingshangshoukuanfuhe
  • 供应商费用预付款
    #icon-gongyingshangfeiyongyufukuan
  • 供应商收款退回
    #icon-gongyingshangshoukuantuihui
  • 供应商收款认领
    #icon-gongyingshangshoukuanrenling
  • 合同工单(经营性)
    #icon-hetonggongdanjingyingxing
  • 合同工单
    #icon-hetonggongdan
  • 会计处理
    #icon-huijichuli
  • 接受数据报送
    #icon-jieshoushujubaosong
  • 接口数据
    #icon-jiekoushuju
  • 缴纳税费
    #icon-jiaonashuifei
  • 借还款凭证
    #icon-jiehuankuanpingzheng
  • 经营性付款
    #icon-jingyingxingfukuan
  • 借款/还款申请
    #icon-jiekuanhuankuanshenqing
  • 捐赠利得
    #icon-juanzenglide
  • 可供出售金融资产-宣告发放股利
    #icon-kegongchushoujinrongzichan-xuangaofafangguli
  • 捐赠支出
    #icon-juanzengzhichu
  • 客户类收款复核
    #icon-kehuleishoukuanfuhe
  • 客户类收款退回
    #icon-kehuleishoukuantuihui
  • 客户类收款认领
    #icon-kehuleishoukuanrenling
  • 客户收款
    #icon-kehushoukuan
  • 批量审批
    #icon-piliangshenpi
  • 盘点工单
    #icon-pandiangongdan
  • 票据管理工单
    #icon-piaojuguanligongdan
  • 其他费用报账
    #icon-qitafeiyongbaozhang
  • 其他
    #icon-qita
  • 其他类收款复核
    #icon-qitaleishoukuanfuhe
  • 其他类收款退回
    #icon-qitaleishoukuantuihui
  • 其他类收款认领
    #icon-qitaleishoukuanrenling
  • 其他收款
    #icon-qitashoukuan
  • 其他业务收入工单
    #icon-qitayewushourugongdan
  • 其他营业外支出
    #icon-qitayingyewaizhichu
  • 商务成本报账
    #icon-shangwuchengbenbaozhang
  • 审批流程
    #icon-shenpiliucheng
  • 收款分类
    #icon-shoukuanfenlei
  • 收款工作台
    #icon-shoukuangongzuotai
  • 收款复核分类工作台
    #icon-shoukuanfuhefenleigongzuotai
  • 收款工作台查询
    #icon-shoukuangongzuotaichaxun
  • 收款认领
    #icon-shoukuanrenling
  • 手续费导入
    #icon-shouxufeidaoru
  • 手工增加收款
    #icon-shougongzengjiashoukuan
  • 特殊收款工单
    #icon-teshushoukuangongdan
  • 特殊退款工单
    #icon-teshutuikuangongdan
  • 所有后台功能icon
    #icon-suoyouhoutaigongnengicon
  • 特殊支付工单
    #icon-teshuzhifugongdan
  • 投资
    #icon-touzi
  • 完成收款工作台
    #icon-wanchengshoukuangongzuotai
  • 新增收款
    #icon-xinzengshoukuan
  • 预付款借款明细查询
    #icon-yufukuanjiekuanmingxichaxun
  • 员工报销申请
    #icon-yuangongbaoxiaoshenqing
  • 员工福利报销
    #icon-yuangongfulibaoxiao
  • 员工借还款
    #icon-yuangongjiehuankuan
  • 长期股权投资-宣告发放股利
    #icon-changqiguquantouzi-xuangaofafangguli
  • 招待费报销授权
    #icon-zhaodaifeibaoxiaoshouquan
  • 员工商务报销
    #icon-yuangongshangwubaoxiao
  • 资本性支出报账
    #icon-zibenxingzhichubaozhang
  • 资产报账
    #icon-zichanbaozhang
  • 资产卡片处置其他
    #icon-zichanqiapianchuzhiqita
  • 资产卡片新增/变动
    #icon-zichanqiapianxinzengbiandong
  • 资产其他新增
    #icon-zichanqitaxinzeng
  • 资产盘点
    #icon-zichanpandian1
  • 总账处理及调整工单
    #icon-zongzhangchulijitiaozhenggongdan
  • 总账及其他
    #icon-zongzhangjiqita
  • 营业外收支
    #icon-yingyewaishouzhi

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>