• 对比2
    
  • 对比1
    
  • 修改标识
    
  • 转正
    
  • 合同收到
    
  • 已办2
    
  • 待办5
    
  • 待办4
    
  • 待办3
    
  • 服务业务
    
  • 人资维护
    
  • 采购查询
    
  • 单位查询
    
  • 合同查询
    
  • 工程查询
    
  • 安全生产
    
  • 运营管理
    
  • 财务管理
    
  • 人力资源
    
  • 完善工程产值管理
    
  • 完善工程资料管理
    
  • 待办2
    
  • 完善停,复工申请
    
  • 完善开工报告
    
  • 完善图纸会审,施工组织设计审批,施工交底
    
  • 完善施工力量安排
    
  • 采购发票
    
  • 进项发票
    
  • 销项发票
    
  • 物资采购结果
    
  • 物资支出立项
    
  • 分包采购结果
    
  • 分包支出立项
    
  • 物资采购合同补充协议
    
  • 物资采购合同
    
  • 物资采购框架合同补充协议
    
  • 物资采购框架合同
    
  • 物资采购框架协议补充协议
    
  • 物资采购框架协议
    
  • 工程分包合同补充协议
    
  • 工程分包合同
    
  • 用户项目承揽合同补充协议
    
  • 用户项目承揽合同
    
  • 系统项目承揽合同补充协议
    
  • 系统项目承揽合同
    
  • tuBiao_daiban
    
  • 工程退料管理
    
  • 服务合同
    
  • 发票管理
    
  • 付款管理
    
  • 服务需求计划
    
  • 分包管理
    
  • 物资采购
    
  • 服务订单合同
    
  • 服务订单合同-补充协议
    
  • 服务专项合同
    
  • 服务采购框架协议-补充协议
    
  • 服务专项合同-补充协议
    
  • 服务采购框架协议
    
  • 服务采购申请
    
  • 服务采购发票
    
  • 服务采购结果
    
  • 服务需求汇总
    
  • 服务采购付款
    
  • 服务采购合同
    
  • 服务支出立项
    
  • 工程归档
    
  • 投标质保金
    
  • 电子采购-2级
    
  • 物资管理
    
  • 工程管理
    
  • 合同管理
    
  • 采购结果
    
  • 服务采购
    
  • 服务合同
    
  • 履行
    
  • 运营动态
    
  • 查询统计
    
  • 数据分析
    
  • 报表管理
    
  • 专业看板
    
  • 检测预警
    
  • 下载
    
  • 提交
    
  • 密码
    
  • 账号
    
  • 退出登录
    
  • 部门
    
  • 日期
    
  • 手机号码
    
  • 组织
    
  • 通用
    
  • 搜索
    
  • 主页
    
  • 消息
    
  • 押金管理
    
  • 范本
    
  • 编号
    
  • 编值
    
  • 工程付款
    
  • 工程收款
    
  • 结算
    
  • 查看
    
  • 撤回
    
  • 编辑
    
  • 发布
    
  • 删除
    
  • 中标录入
    
  • 安排确定
    
  • 变更
    
  • 反归档
    
  • 点击保存
    
  • 归档
    
  • 启动
    
  • 签订合同
    
  • 结束
    
  • 盘盈
    
  • 查看盘亏
    
  • 盘亏
    
  • 停用
    
  • 启动后
    
  • 启用
    
  • 点击提交
    
  • 状态
    
  • 终止
    
  • 废止
    
  • 查看盘盈
    
  • 结束后
    
  • 点击停用
    
  • 菜单
    
  • 调整
    
  • 到货确认
    
  • 出库业务
    
  • 仓库管理
    
  • 盘点管理
    
  • 入库业务
    
  • 调拨业务
    
  • 期初库存
    
  • 参数设置
    
  • 物资分类
    
  • 直送业务
    
  • 物资编码
    
  • 现有库存
    
  • 采购合同
    
  • 采购计划
    
  • 班组工单
    
  • 编制-需求计划编制
    
  • 付款-采购付款计划
    
  • 分包管理
    
  • 发票管理
    
  • 调整-需求计划调整
    
  • 竣工通知
    
  • 工程派工
    
  • 供应商管理
    
  • 客户管理
    
  • 进度管理
    
  • 需求计划
    
  • 投标-中标
    
  • 内部班组
    
  • 收款管理
    
  • 立项管理
    
  • 预算管理
    
  • 整理-需求计划整理
    
  • 押金登记
    
  • 支出管理
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • 对比2
    .icon-duibi2
  • 对比1
    .icon-duibi1
  • 修改标识
    .icon-xiugaibiaoshi
  • 转正
    .icon-zhuanzheng
  • 合同收到
    .icon-hetongshoudao
  • 已办2
    .icon-yiban2
  • 待办5
    .icon-daiban5
  • 待办4
    .icon-daiban4
  • 待办3
    .icon-daiban3
  • 服务业务
    .icon-fuwuyewu
  • 人资维护
    .icon-renziweihu
  • 采购查询
    .icon-caigouchaxun
  • 单位查询
    .icon-danweichaxun
  • 合同查询
    .icon-hetongchaxun
  • 工程查询
    .icon-gongchengchaxun
  • 安全生产
    .icon-anquanshengchan
  • 运营管理
    .icon-yunyingguanli
  • 财务管理
    .icon-caiwuguanli
  • 人力资源
    .icon-renliziyuan
  • 完善工程产值管理
    .icon-wanshangongchengchanzhiguanli
  • 完善工程资料管理
    .icon-wanshangongchengziliaoguanli
  • 待办2
    .icon-daiban2
  • 完善停,复工申请
    .icon-a-wanshantingfugongshenqing
  • 完善开工报告
    .icon-wanshankaigongbaogao
  • 完善图纸会审,施工组织设计审批,施工交底
    .icon-wanshantuzhihuishen
  • 完善施工力量安排
    .icon-wanshanshigonglilianganpai
  • 采购发票
    .icon-caigoufapiao
  • 进项发票
    .icon-jinxiangfapiao
  • 销项发票
    .icon-xiaoxiangfapiao
  • 物资采购结果
    .icon-wuzicaigoujieguo
  • 物资支出立项
    .icon-wuzizhichulixiang
  • 分包采购结果
    .icon-fenbaocaigoujieguo
  • 分包支出立项
    .icon-fenbaozhichulixiang
  • 物资采购合同补充协议
    .icon-wuzicaigouhetongbuchongxieyi
  • 物资采购合同
    .icon-wuzicaigouhetong
  • 物资采购框架合同补充协议
    .icon-wuzicaigoukuangjiahetongbuchongxieyi
  • 物资采购框架合同
    .icon-wuzicaigoukuangjiahetong
  • 物资采购框架协议补充协议
    .icon-wuzicaigoukuangjiaxieyibuchongxieyi
  • 物资采购框架协议
    .icon-wuzicaigoukuangjiaxieyi
  • 工程分包合同补充协议
    .icon-gongchengfenbaohetongbuchongxieyi
  • 工程分包合同
    .icon-gongchengfenbaohetong
  • 用户项目承揽合同补充协议
    .icon-yonghuxiangmuchenglanhetongbuchongxieyi
  • 用户项目承揽合同
    .icon-yonghuxiangmuchenglanhetong
  • 系统项目承揽合同补充协议
    .icon-xitongxiangmuchenglanhetongbuchongxieyi
  • 系统项目承揽合同
    .icon-xitongxiangmuchenglanhetong
  • tuBiao_daiban
    .icon-tuBiao_daiban
  • 工程退料管理
    .icon-gongchengtuiliaoguanli
  • 服务合同
    .icon-fuwuhetong1
  • 发票管理
    .icon-fapiaoguanli1
  • 付款管理
    .icon-fukuanguanli
  • 服务需求计划
    .icon-fuwuxuqiujihua
  • 分包管理
    .icon-fenbaoguanli1
  • 物资采购
    .icon-wuzicaigou
  • 服务订单合同
    .icon-fuwudingdanhetong
  • 服务订单合同-补充协议
    .icon-fuwudingdanhetong-buchongxieyi
  • 服务专项合同
    .icon-fuwuzhuanxianghetong
  • 服务采购框架协议-补充协议
    .icon-fuwucaigoukuangjiaxieyi-buchongxieyi
  • 服务专项合同-补充协议
    .icon-fuwuzhuanxianghetong-buchongxieyi
  • 服务采购框架协议
    .icon-fuwucaigoukuangjiaxieyi
  • 服务采购申请
    .icon-fuwucaigoushenqing
  • 服务采购发票
    .icon-fuwucaigoufapiao
  • 服务采购结果
    .icon-fuwucaigoujieguo
  • 服务需求汇总
    .icon-fuwuxuqiuhuizong
  • 服务采购付款
    .icon-fuwucaigoufukuan
  • 服务采购合同
    .icon-fuwucaigouhetong
  • 服务支出立项
    .icon-fuwuzhichulixiang
  • 工程归档
    .icon-gongchengguidang
  • 投标质保金
    .icon-toubiaozhibaojin
  • 电子采购-2级
    .icon-dianzicaigou-2ji
  • 物资管理
    .icon-wuziguanli
  • 工程管理
    .icon-gongchengguanli
  • 合同管理
    .icon-hetongguanli
  • 采购结果
    .icon-caigoujieguo
  • 服务采购
    .icon-fuwucaigou
  • 服务合同
    .icon-fuwuhetong
  • 履行
    .icon-lvhang
  • 运营动态
    .icon-yunyingdongtai
  • 查询统计
    .icon-chaxuntongji
  • 数据分析
    .icon-shujufenxi
  • 报表管理
    .icon-baobiaoguanli
  • 专业看板
    .icon-zhuanyekanban
  • 检测预警
    .icon-jianceyujing
  • 下载
    .icon-xiazai
  • 提交
    .icon-tijiao
  • 密码
    .icon-mima
  • 账号
    .icon-zhanghao
  • 退出登录
    .icon-tuichudenglu
  • 部门
    .icon-bumen
  • 日期
    .icon-riqi
  • 手机号码
    .icon-shoujihaoma
  • 组织
    .icon-zuzhi
  • 通用
    .icon-tongyong
  • 搜索
    .icon-sousuo
  • 主页
    .icon-zhuye
  • 消息
    .icon-xiaoxi
  • 押金管理
    .icon-yajinguanli
  • 范本
    .icon-fanben
  • 编号
    .icon-bianhao
  • 编值
    .icon-bianzhi
  • 工程付款
    .icon-gongchengfukuan
  • 工程收款
    .icon-gongchengshoukuan
  • 结算
    .icon-jiesuan
  • 查看
    .icon-chakan
  • 撤回
    .icon-chehui
  • 编辑
    .icon-bianji
  • 发布
    .icon-fabu
  • 删除
    .icon-shanchu
  • 中标录入
    .icon-zhongbiaoluru
  • 安排确定
    .icon-anpaiqueding
  • 变更
    .icon-biangeng
  • 反归档
    .icon-fanguidang
  • 点击保存
    .icon-dianjibaocun
  • 归档
    .icon-guidang
  • 启动
    .icon-qidong
  • 签订合同
    .icon-qiandinghetong
  • 结束
    .icon-jieshu
  • 盘盈
    .icon-panying
  • 查看盘亏
    .icon-chakanpankui
  • 盘亏
    .icon-pankui
  • 停用
    .icon-tingyong
  • 启动后
    .icon-qidonghou
  • 启用
    .icon-qiyong
  • 点击提交
    .icon-dianjitijiao
  • 状态
    .icon-zhuangtai
  • 终止
    .icon-zhongzhi
  • 废止
    .icon-feizhi
  • 查看盘盈
    .icon-chakanpanying
  • 结束后
    .icon-jieshuhou
  • 点击停用
    .icon-dianjitingyong
  • 菜单
    .icon-caidan
  • 调整
    .icon-tiaozheng
  • 到货确认
    .icon-daohuoqueren
  • 出库业务
    .icon-chukuyewu
  • 仓库管理
    .icon-cangkuguanli
  • 盘点管理
    .icon-pandianguanli
  • 入库业务
    .icon-rukuyewu
  • 调拨业务
    .icon-tiaoboyewu
  • 期初库存
    .icon-qichukucun
  • 参数设置
    .icon-canshushezhi
  • 物资分类
    .icon-wuzifenlei
  • 直送业务
    .icon-zhisongyewu
  • 物资编码
    .icon-wuzibianma
  • 现有库存
    .icon-xianyoukucun
  • 采购合同
    .icon-caigouhetong
  • 采购计划
    .icon-caigoujihua
  • 班组工单
    .icon-banzugongdan
  • 编制-需求计划编制
    .icon-bianzhi-xuqiujihuabianzhi
  • 付款-采购付款计划
    .icon-fukuan-caigoufukuanjihua
  • 分包管理
    .icon-fenbaoguanli
  • 发票管理
    .icon-fapiaoguanli
  • 调整-需求计划调整
    .icon-tiaozheng-xuqiujihuatiaozheng
  • 竣工通知
    .icon-jungongtongzhi
  • 工程派工
    .icon-gongchengpaigong
  • 供应商管理
    .icon-gongyingshangguanli
  • 客户管理
    .icon-kehuguanli
  • 进度管理
    .icon-jinduguanli
  • 需求计划
    .icon-xuqiujihua
  • 投标-中标
    .icon-toubiao-zhongbiao
  • 内部班组
    .icon-neibubanzu
  • 收款管理
    .icon-shoukuanguanli
  • 立项管理
    .icon-lixiangguanli
  • 预算管理
    .icon-yusuanguanli
  • 整理-需求计划整理
    .icon-zhengli-xuqiujihuazhengli
  • 押金登记
    .icon-yajindengji
  • 支出管理
    .icon-zhichuguanli

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

  • 对比2
    #icon-duibi2
  • 对比1
    #icon-duibi1
  • 修改标识
    #icon-xiugaibiaoshi
  • 转正
    #icon-zhuanzheng
  • 合同收到
    #icon-hetongshoudao
  • 已办2
    #icon-yiban2
  • 待办5
    #icon-daiban5
  • 待办4
    #icon-daiban4
  • 待办3
    #icon-daiban3
  • 服务业务
    #icon-fuwuyewu
  • 人资维护
    #icon-renziweihu
  • 采购查询
    #icon-caigouchaxun
  • 单位查询
    #icon-danweichaxun
  • 合同查询
    #icon-hetongchaxun
  • 工程查询
    #icon-gongchengchaxun
  • 安全生产
    #icon-anquanshengchan
  • 运营管理
    #icon-yunyingguanli
  • 财务管理
    #icon-caiwuguanli
  • 人力资源
    #icon-renliziyuan
  • 完善工程产值管理
    #icon-wanshangongchengchanzhiguanli
  • 完善工程资料管理
    #icon-wanshangongchengziliaoguanli
  • 待办2
    #icon-daiban2
  • 完善停,复工申请
    #icon-a-wanshantingfugongshenqing
  • 完善开工报告
    #icon-wanshankaigongbaogao
  • 完善图纸会审,施工组织设计审批,施工交底
    #icon-wanshantuzhihuishen
  • 完善施工力量安排
    #icon-wanshanshigonglilianganpai
  • 采购发票
    #icon-caigoufapiao
  • 进项发票
    #icon-jinxiangfapiao
  • 销项发票
    #icon-xiaoxiangfapiao
  • 物资采购结果
    #icon-wuzicaigoujieguo
  • 物资支出立项
    #icon-wuzizhichulixiang
  • 分包采购结果
    #icon-fenbaocaigoujieguo
  • 分包支出立项
    #icon-fenbaozhichulixiang
  • 物资采购合同补充协议
    #icon-wuzicaigouhetongbuchongxieyi
  • 物资采购合同
    #icon-wuzicaigouhetong
  • 物资采购框架合同补充协议
    #icon-wuzicaigoukuangjiahetongbuchongxieyi
  • 物资采购框架合同
    #icon-wuzicaigoukuangjiahetong
  • 物资采购框架协议补充协议
    #icon-wuzicaigoukuangjiaxieyibuchongxieyi
  • 物资采购框架协议
    #icon-wuzicaigoukuangjiaxieyi
  • 工程分包合同补充协议
    #icon-gongchengfenbaohetongbuchongxieyi
  • 工程分包合同
    #icon-gongchengfenbaohetong
  • 用户项目承揽合同补充协议
    #icon-yonghuxiangmuchenglanhetongbuchongxieyi
  • 用户项目承揽合同
    #icon-yonghuxiangmuchenglanhetong
  • 系统项目承揽合同补充协议
    #icon-xitongxiangmuchenglanhetongbuchongxieyi
  • 系统项目承揽合同
    #icon-xitongxiangmuchenglanhetong
  • tuBiao_daiban
    #icon-tuBiao_daiban
  • 工程退料管理
    #icon-gongchengtuiliaoguanli
  • 服务合同
    #icon-fuwuhetong1
  • 发票管理
    #icon-fapiaoguanli1
  • 付款管理
    #icon-fukuanguanli
  • 服务需求计划
    #icon-fuwuxuqiujihua
  • 分包管理
    #icon-fenbaoguanli1
  • 物资采购
    #icon-wuzicaigou
  • 服务订单合同
    #icon-fuwudingdanhetong
  • 服务订单合同-补充协议
    #icon-fuwudingdanhetong-buchongxieyi
  • 服务专项合同
    #icon-fuwuzhuanxianghetong
  • 服务采购框架协议-补充协议
    #icon-fuwucaigoukuangjiaxieyi-buchongxieyi
  • 服务专项合同-补充协议
    #icon-fuwuzhuanxianghetong-buchongxieyi
  • 服务采购框架协议
    #icon-fuwucaigoukuangjiaxieyi
  • 服务采购申请
    #icon-fuwucaigoushenqing
  • 服务采购发票
    #icon-fuwucaigoufapiao
  • 服务采购结果
    #icon-fuwucaigoujieguo
  • 服务需求汇总
    #icon-fuwuxuqiuhuizong
  • 服务采购付款
    #icon-fuwucaigoufukuan
  • 服务采购合同
    #icon-fuwucaigouhetong
  • 服务支出立项
    #icon-fuwuzhichulixiang
  • 工程归档
    #icon-gongchengguidang
  • 投标质保金
    #icon-toubiaozhibaojin
  • 电子采购-2级
    #icon-dianzicaigou-2ji
  • 物资管理
    #icon-wuziguanli
  • 工程管理
    #icon-gongchengguanli
  • 合同管理
    #icon-hetongguanli
  • 采购结果
    #icon-caigoujieguo
  • 服务采购
    #icon-fuwucaigou
  • 服务合同
    #icon-fuwuhetong
  • 履行
    #icon-lvhang
  • 运营动态
    #icon-yunyingdongtai
  • 查询统计
    #icon-chaxuntongji
  • 数据分析
    #icon-shujufenxi
  • 报表管理
    #icon-baobiaoguanli
  • 专业看板
    #icon-zhuanyekanban
  • 检测预警
    #icon-jianceyujing
  • 下载
    #icon-xiazai
  • 提交
    #icon-tijiao
  • 密码
    #icon-mima
  • 账号
    #icon-zhanghao
  • 退出登录
    #icon-tuichudenglu
  • 部门
    #icon-bumen
  • 日期
    #icon-riqi
  • 手机号码
    #icon-shoujihaoma
  • 组织
    #icon-zuzhi
  • 通用
    #icon-tongyong
  • 搜索
    #icon-sousuo
  • 主页
    #icon-zhuye
  • 消息
    #icon-xiaoxi
  • 押金管理
    #icon-yajinguanli
  • 范本
    #icon-fanben
  • 编号
    #icon-bianhao
  • 编值
    #icon-bianzhi
  • 工程付款
    #icon-gongchengfukuan
  • 工程收款
    #icon-gongchengshoukuan
  • 结算
    #icon-jiesuan
  • 查看
    #icon-chakan
  • 撤回
    #icon-chehui
  • 编辑
    #icon-bianji
  • 发布
    #icon-fabu
  • 删除
    #icon-shanchu
  • 中标录入
    #icon-zhongbiaoluru
  • 安排确定
    #icon-anpaiqueding
  • 变更
    #icon-biangeng
  • 反归档
    #icon-fanguidang
  • 点击保存
    #icon-dianjibaocun
  • 归档
    #icon-guidang
  • 启动
    #icon-qidong
  • 签订合同
    #icon-qiandinghetong
  • 结束
    #icon-jieshu
  • 盘盈
    #icon-panying
  • 查看盘亏
    #icon-chakanpankui
  • 盘亏
    #icon-pankui
  • 停用
    #icon-tingyong
  • 启动后
    #icon-qidonghou
  • 启用
    #icon-qiyong
  • 点击提交
    #icon-dianjitijiao
  • 状态
    #icon-zhuangtai
  • 终止
    #icon-zhongzhi
  • 废止
    #icon-feizhi
  • 查看盘盈
    #icon-chakanpanying
  • 结束后
    #icon-jieshuhou
  • 点击停用
    #icon-dianjitingyong
  • 菜单
    #icon-caidan
  • 调整
    #icon-tiaozheng
  • 到货确认
    #icon-daohuoqueren
  • 出库业务
    #icon-chukuyewu
  • 仓库管理
    #icon-cangkuguanli
  • 盘点管理
    #icon-pandianguanli
  • 入库业务
    #icon-rukuyewu
  • 调拨业务
    #icon-tiaoboyewu
  • 期初库存
    #icon-qichukucun
  • 参数设置
    #icon-canshushezhi
  • 物资分类
    #icon-wuzifenlei
  • 直送业务
    #icon-zhisongyewu
  • 物资编码
    #icon-wuzibianma
  • 现有库存
    #icon-xianyoukucun
  • 采购合同
    #icon-caigouhetong
  • 采购计划
    #icon-caigoujihua
  • 班组工单
    #icon-banzugongdan
  • 编制-需求计划编制
    #icon-bianzhi-xuqiujihuabianzhi
  • 付款-采购付款计划
    #icon-fukuan-caigoufukuanjihua
  • 分包管理
    #icon-fenbaoguanli
  • 发票管理
    #icon-fapiaoguanli
  • 调整-需求计划调整
    #icon-tiaozheng-xuqiujihuatiaozheng
  • 竣工通知
    #icon-jungongtongzhi
  • 工程派工
    #icon-gongchengpaigong
  • 供应商管理
    #icon-gongyingshangguanli
  • 客户管理
    #icon-kehuguanli
  • 进度管理
    #icon-jinduguanli
  • 需求计划
    #icon-xuqiujihua
  • 投标-中标
    #icon-toubiao-zhongbiao
  • 内部班组
    #icon-neibubanzu
  • 收款管理
    #icon-shoukuanguanli
  • 立项管理
    #icon-lixiangguanli
  • 预算管理
    #icon-yusuanguanli
  • 整理-需求计划整理
    #icon-zhengli-xuqiujihuazhengli
  • 押金登记
    #icon-yajindengji
  • 支出管理
    #icon-zhichuguanli

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>