• 积分商城.32x32px
    
  • 理财产品.32x32px
    
  • 自助贷款.32x32px
    
  • 存款利息试算.32x32px
    
  • 签署文件.200x200px
    
  • 签署文件夹.200x200px-01
    
  • 产品.24x24px-客户经理小程序
    
  • 产品-选中.24x24px-客户经理小程序
    
  • 首页-选中.24x24px-客户经理小程序
    
  • 任务新增.50x50px-客户经理小程序
    
  • 二维码.18x18px-客户经理小程序
    
  • 个人信息.18x18px-客户经理小程序
    
  • 我的.24x24px-客户经理小程序
    
  • 联系信息.18x18px-客户经理小程序
    
  • 等级.32x32px-客户经理小程序
    
  • 我的-选中.24x24px-客户经理小程序
    
  • 主页.24x24px-客户经理小程序
    
  • 邀请关系查询.18x18px-客户经理小程序
    
  • 已发放.60x60px
    
  • 兑换记录.16x16px
    
  • 个人信息.16x16px
    
  • 存款利率.24x24px
    
  • 可见.20x20px
    
  • 成功.64x64px
    
  • 免费转账.24x24px
    
  • 合作企业.16x16px
    
  • 贷款利率.24x24px
    
  • 首页-选中.20x20px
    
  • 下一页.24x24px
    
  • 我的.20x20px
    
  • 专属客服.24x24px
    
  • 首页.20x20px
    
  • 我的贷款.16x16px
    
  • 我的-选中.20x20px
    
  • 未签署.60x60px
    
  • 已签署.60x60px
    
  • 已结清.60x60px
    
  • 16px搜索󅒐
    
  • 身份证人像面140x90px
    
  • 16px-取消上传#808080
    
  • 14px下一级
    
  • 处理20x20px
    
  • 审批流程20x20px
    
  • 返回24x24px
    
  • 日历16x16px
    
  • 下拉20x20px
    
  • 进入24x24px
    
  • 移动审批72x72px
    
  • 新增-蓝色30X30px
    
  • 企业头像26x26px
    
  • 人像100x100px
    
  • 联网核查24x24px
    
  • 
    人脸识别24x24px
    
  • 计算器-未选中30x30px
    
  • 计算器-选中30x30px
    
  • 贷还款测算-未选中30x30px
    
  • 贷还款测算-选中30x30px
    
  • 通讯录-未选中30x30px
    
  • 通讯录-选中30x30px
    
  • 全景视图14x14px
    
  • 客户移交14x14px
    
  • 筛选22x22px
    
  • 业务申请情况40x40px
    
  • 黑名单客户信息40x40px
    
  • 未结清授信业务40x40px
    
  • 已结清授信业务40x40px
    
  • 为本行客户担保40x40px
    
  • 被本行客户担保40x40px
    
  • 影像资料40x40px
    
  • 生产经营40x40px
    
  • 个人资产40x40px
    
  • 征信信息40x40px
    
  • 家庭成员40x40px
    
  • 基本信息40x40px
    
  • 点击进入
    
  • 100px未调查
    
  • 
    100px已调查5
    
  • 100px已采集2
    
  • 100px已采集5
    
  • 100px已采集3
    
  • 100px已采集1
    
  • 100px已调查3
    
  • 100px已调查1
    
  • 100px已采集4
    
  • 100px已调查2
    
  • 100px已调查4
    
  • 100px未采集
    
  • 预授信额度60X60px
    
  • 拍摄50x50px
    
  • 拍照22x22px
    
  • 影像目录文件夹
    
  • 调查16X16px
    
  • 成功120X120px
    
  • 终止16X16px
    
  • 检查16X16px
    
  • 待开始100X100px
    
  • 导航16X16px
    
  • 受理16X16px
    
  • 电话16X16px
    
  • 已完成100X100px
    
  • 定位16X16px
    
  • 指向20X20px
    
  • 查看16X16px
    
  • 拒绝16X16px
    
  • 30px担保调查2
    
  • 60px授信申请
    
  • 借款人调查
    
  • 非农户信息采集100X100px
    
  • 农户信息采集100X100px
    
  • 对公客户信息采集100X100px
    
  • 头像
    
  • 点击分析16x16px
    
  • 退出16x16px
    
  • 采集授权30X30px.选中
    
  • 拍照20X20px
    
  • 扫描24X24px
    
  • 删除16X16px
    
  • 采集授权30X30px
    
  • 批量上传16X16px
    
  • 详情16X16px
    
  • 基本信息30X30px.选中
    
  • 预授信30X30px.选中
    
  • 基本信息30X30px
    
  • 身份核查30X30px
    
  • 影像采集30X30px.已选
    
  • 预授信30X30px
    
  • 影像采集30X30px
    
  • 修改16X16px
    
  • 身份核查30X30px.选中
    
  • 定位40X40px
    
  • 关闭20X20px
    
  • 人像24X24px
    
  • 新增30X30px
    
  • 角色切换32x32px
    
  • 设置32x32px
    
  • 
    网点查询32x32px
    
  • 产品中心32x32px
    
  • 学习培训32x32px
    
  • 信息采集32x32px
    
  • 辅助工具32x32px
    
  • 面对面营销32x32px
    
  • 授信管理32x32px
    
  • 评级管理32x32px
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • 积分商城.32x32px
    .icon-a-jifenshangcheng32x32px
  • 理财产品.32x32px
    .icon-a-licaichanpin32x32px
  • 自助贷款.32x32px
    .icon-a-zizhudaikuan32x32px
  • 存款利息试算.32x32px
    .icon-a-cunkuanlixishisuan32x32px
  • 签署文件.200x200px
    .icon-a-qianshuwenjian200x200px
  • 签署文件夹.200x200px-01
    .icon-a-qianshuwenjianjia200x200px-01
  • 产品.24x24px-客户经理小程序
    .icon-a-chanpin24x24px-kehujinglixiaochengxu
  • 产品-选中.24x24px-客户经理小程序
    .icon-a-chanpin-xuanzhong24x24px-kehujinglixiaochengxu
  • 首页-选中.24x24px-客户经理小程序
    .icon-a-shouye-xuanzhong24x24px-kehujinglixiaochengxu
  • 任务新增.50x50px-客户经理小程序
    .icon-a-renwuxinzeng50x50px-kehujinglixiaochengxu
  • 二维码.18x18px-客户经理小程序
    .icon-a-erweima18x18px-kehujinglixiaochengxu
  • 个人信息.18x18px-客户经理小程序
    .icon-a-gerenxinxi18x18px-kehujinglixiaochengxu
  • 我的.24x24px-客户经理小程序
    .icon-a-wode24x24px-kehujinglixiaochengxu
  • 联系信息.18x18px-客户经理小程序
    .icon-a-lianxixinxi18x18px-kehujinglixiaochengxu
  • 等级.32x32px-客户经理小程序
    .icon-a-dengji32x32px-kehujinglixiaochengxu
  • 我的-选中.24x24px-客户经理小程序
    .icon-a-wode-xuanzhong24x24px-kehujinglixiaochengxu
  • 主页.24x24px-客户经理小程序
    .icon-a-zhuye24x24px-kehujinglixiaochengxu
  • 邀请关系查询.18x18px-客户经理小程序
    .icon-a-yaoqingguanxichaxun18x18px-kehujinglixiaochengxu
  • 已发放.60x60px
    .icon-a-yifafang60x60px
  • 兑换记录.16x16px
    .icon-a-duihuanjilu16x16px
  • 个人信息.16x16px
    .icon-a-gerenxinxi16x16px
  • 存款利率.24x24px
    .icon-a-cunkuanlishuai24x24px
  • 可见.20x20px
    .icon-a-kejian20x20px
  • 成功.64x64px
    .icon-a-chenggong64x64px
  • 免费转账.24x24px
    .icon-a-mianfeizhuanzhang24x24px
  • 合作企业.16x16px
    .icon-a-hezuoqiye16x16px
  • 贷款利率.24x24px
    .icon-a-daikuanlishuai24x24px
  • 首页-选中.20x20px
    .icon-a-shouye-xuanzhong20x20px
  • 下一页.24x24px
    .icon-a-xiayiye24x24px
  • 我的.20x20px
    .icon-a-wode20x20px
  • 专属客服.24x24px
    .icon-a-zhuanshukefu24x24px
  • 首页.20x20px
    .icon-a-shouye20x20px
  • 我的贷款.16x16px
    .icon-a-wodedaikuan16x16px
  • 我的-选中.20x20px
    .icon-a-wode-xuanzhong20x20px
  • 未签署.60x60px
    .icon-a-weiqianshu60x60px
  • 已签署.60x60px
    .icon-a-yiqianshu60x60px
  • 已结清.60x60px
    .icon-a-yijieqing60x60px
  • 16px搜索󅒐
    .icon-pxsousuo
  • 身份证人像面140x90px
    .icon-shenfenzhengrenxiangmian140x90px
  • 16px-取消上传#808080
    .icon-px-quxiaoshangchuan
  • 14px下一级
    .icon-pxxiayiji
  • 处理20x20px
    .icon-chuli20x20px
  • 审批流程20x20px
    .icon-shenpiliucheng20x20px
  • 返回24x24px
    .icon-fanhui24x24px
  • 日历16x16px
    .icon-rili16x16px
  • 下拉20x20px
    .icon-xiala20x20px
  • 进入24x24px
    .icon-jinru24x24px
  • 移动审批72x72px
    .icon-yidongshenpi72x72px
  • 新增-蓝色30X30px
    .icon-xinzeng-lanse30X30px
  • 企业头像26x26px
    .icon-qiyetouxiang26x26px
  • 人像100x100px
    .icon-renxiang100x100px
  • 联网核查24x24px
    .icon-lianwanghecha24x24px
  • 人脸识别24x24px
    .icon-renlianshibie24x24px
  • 计算器-未选中30x30px
    .icon-jisuanqi-weixuanzhong30x30px
  • 计算器-选中30x30px
    .icon-jisuanqi-xuanzhong30x30px
  • 贷还款测算-未选中30x30px
    .icon-daihuankuancesuan-weixuanzhong30x30px
  • 贷还款测算-选中30x30px
    .icon-daihuankuancesuan-xuanzhong30x30px
  • 通讯录-未选中30x30px
    .icon-tongxunlu-weixuanzhong30x30px
  • 通讯录-选中30x30px
    .icon-tongxunlu-xuanzhong30x30px
  • 全景视图14x14px
    .icon-quanjingshitu14x14px
  • 客户移交14x14px
    .icon-kehuyijiao14x14px
  • 筛选22x22px
    .icon-shaixuan22x22px
  • 业务申请情况40x40px
    .icon-yewushenqingqingkuang40x40px
  • 黑名单客户信息40x40px
    .icon-heimingdankehuxinxi40x40px
  • 未结清授信业务40x40px
    .icon-weijieqingshouxinyewu40x40px
  • 已结清授信业务40x40px
    .icon-yijieqingshouxinyewu40x40px
  • 为本行客户担保40x40px
    .icon-weibenhangkehudanbao40x40px
  • 被本行客户担保40x40px
    .icon-beibenhangkehudanbao40x40px
  • 影像资料40x40px
    .icon-yingxiangziliao40x40px
  • 生产经营40x40px
    .icon-shengchanjingying40x40px
  • 个人资产40x40px
    .icon-gerenzichan40x40px
  • 征信信息40x40px
    .icon-zhengxinxinxi40x40px
  • 家庭成员40x40px
    .icon-jiatingchengyuan40x40px
  • 基本信息40x40px
    .icon-jibenxinxi40x40px
  • 点击进入
    .icon-dianjijinru
  • 100px未调查
    .icon-a-100pxweitiaocha
  • 100px已调查5
    .icon-a-100pxyitiaocha5
  • 100px已采集2
    .icon-a-100pxyicaiji2
  • 100px已采集5
    .icon-a-100pxyicaiji5
  • 100px已采集3
    .icon-a-100pxyicaiji3
  • 100px已采集1
    .icon-a-100pxyicaiji1
  • 100px已调查3
    .icon-a-100pxyitiaocha3
  • 100px已调查1
    .icon-a-100pxyitiaocha1
  • 100px已采集4
    .icon-a-100pxyicaiji4
  • 100px已调查2
    .icon-a-100pxyitiaocha2
  • 100px已调查4
    .icon-a-100pxyitiaocha4
  • 100px未采集
    .icon-a-100pxweicaiji
  • 预授信额度60X60px
    .icon-yushouxinedu60X60px-01
  • 拍摄50x50px
    .icon-paishe50x50px
  • 拍照22x22px
    .icon-paizhao22x22px
  • 影像目录文件夹
    .icon-yingxiangmuluwenjianjia
  • 调查16X16px
    .icon-tiaocha16X16px
  • 成功120X120px
    .icon-chenggong120X120px
  • 终止16X16px
    .icon-zhongzhi16X16px
  • 检查16X16px
    .icon-jiancha16X16px
  • 待开始100X100px
    .icon-daikaishi100X100px
  • 导航16X16px
    .icon-daohang16X16px
  • 受理16X16px
    .icon-shouli16X16px
  • 电话16X16px
    .icon-dianhua16X16px
  • 已完成100X100px
    .icon-yiwancheng100X100px
  • 定位16X16px
    .icon-dingwei16X16px
  • 指向20X20px
    .icon-zhixiang20X20px
  • 查看16X16px
    .icon-chakan16X16px
  • 拒绝16X16px
    .icon-jujue16X16px
  • 30px担保调查2
    .icon-pxdanbaotiaocha1
  • 60px授信申请
    .icon-pxshouxinshenqing
  • 借款人调查
    .icon-jiekuanrentiaocha
  • 非农户信息采集100X100px
    .icon-feinonghuxinxicaiji100X100px
  • 农户信息采集100X100px
    .icon-nonghuxinxicaiji100X100px
  • 对公客户信息采集100X100px
    .icon-duigongkehuxinxicaiji100X100px
  • 头像
    .icon-touxiang
  • 点击分析16x16px
    .icon-dianjifenxi16x16px
  • 退出16x16px
    .icon-tuichu16x16px
  • 采集授权30X30px.选中
    .icon-a-caijishouquan30X30pxxuanzhong
  • 拍照20X20px
    .icon-paizhao20X20px
  • 扫描24X24px
    .icon-saomiao24X24px
  • 删除16X16px
    .icon-shanchu16X16px
  • 采集授权30X30px
    .icon-caijishouquan30X30px
  • 批量上传16X16px
    .icon-piliangshangchuan16X16px
  • 详情16X16px
    .icon-xiangqing16X16px
  • 基本信息30X30px.选中
    .icon-a-jibenxinxi30X30pxxuanzhong
  • 预授信30X30px.选中
    .icon-a-yushouxin30X30pxxuanzhong
  • 基本信息30X30px
    .icon-jibenxinxi30X30px
  • 身份核查30X30px
    .icon-shenfenhecha30X30px
  • 影像采集30X30px.已选
    .icon-a-yingxiangcaiji30X30pxyixuan
  • 预授信30X30px
    .icon-yushouxin30X30px
  • 影像采集30X30px
    .icon-yingxiangcaiji30X30px
  • 修改16X16px
    .icon-xiugai16X16px
  • 身份核查30X30px.选中
    .icon-a-shenfenhecha30X30pxxuanzhong
  • 定位40X40px
    .icon-dingwei40X40px
  • 关闭20X20px
    .icon-guanbi20X20px
  • 人像24X24px
    .icon-renxiang24X24px
  • 新增30X30px
    .icon-xinzeng30X30px
  • 角色切换32x32px
    .icon-jiaoseqiehuan32x32px
  • 设置32x32px
    .icon-shezhi32x32px
  • 网点查询32x32px
    .icon-wangdianchaxun32x32px
  • 产品中心32x32px
    .icon-chanpinzhongxin32x32px
  • 学习培训32x32px
    .icon-xuexipeixun32x32px
  • 信息采集32x32px
    .icon-xinxicaiji32x32px
  • 辅助工具32x32px
    .icon-fuzhugongju32x32px
  • 面对面营销32x32px
    .icon-mianduimianyingxiao32x32px
  • 授信管理32x32px
    .icon-shouxinguanli32x32px
  • 评级管理32x32px
    .icon-pingjiguanli32x32px

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

  • 积分商城.32x32px
    #icon-a-jifenshangcheng32x32px
  • 理财产品.32x32px
    #icon-a-licaichanpin32x32px
  • 自助贷款.32x32px
    #icon-a-zizhudaikuan32x32px
  • 存款利息试算.32x32px
    #icon-a-cunkuanlixishisuan32x32px
  • 签署文件.200x200px
    #icon-a-qianshuwenjian200x200px
  • 签署文件夹.200x200px-01
    #icon-a-qianshuwenjianjia200x200px-01
  • 产品.24x24px-客户经理小程序
    #icon-a-chanpin24x24px-kehujinglixiaochengxu
  • 产品-选中.24x24px-客户经理小程序
    #icon-a-chanpin-xuanzhong24x24px-kehujinglixiaochengxu
  • 首页-选中.24x24px-客户经理小程序
    #icon-a-shouye-xuanzhong24x24px-kehujinglixiaochengxu
  • 任务新增.50x50px-客户经理小程序
    #icon-a-renwuxinzeng50x50px-kehujinglixiaochengxu
  • 二维码.18x18px-客户经理小程序
    #icon-a-erweima18x18px-kehujinglixiaochengxu
  • 个人信息.18x18px-客户经理小程序
    #icon-a-gerenxinxi18x18px-kehujinglixiaochengxu
  • 我的.24x24px-客户经理小程序
    #icon-a-wode24x24px-kehujinglixiaochengxu
  • 联系信息.18x18px-客户经理小程序
    #icon-a-lianxixinxi18x18px-kehujinglixiaochengxu
  • 等级.32x32px-客户经理小程序
    #icon-a-dengji32x32px-kehujinglixiaochengxu
  • 我的-选中.24x24px-客户经理小程序
    #icon-a-wode-xuanzhong24x24px-kehujinglixiaochengxu
  • 主页.24x24px-客户经理小程序
    #icon-a-zhuye24x24px-kehujinglixiaochengxu
  • 邀请关系查询.18x18px-客户经理小程序
    #icon-a-yaoqingguanxichaxun18x18px-kehujinglixiaochengxu
  • 已发放.60x60px
    #icon-a-yifafang60x60px
  • 兑换记录.16x16px
    #icon-a-duihuanjilu16x16px
  • 个人信息.16x16px
    #icon-a-gerenxinxi16x16px
  • 存款利率.24x24px
    #icon-a-cunkuanlishuai24x24px
  • 可见.20x20px
    #icon-a-kejian20x20px
  • 成功.64x64px
    #icon-a-chenggong64x64px
  • 免费转账.24x24px
    #icon-a-mianfeizhuanzhang24x24px
  • 合作企业.16x16px
    #icon-a-hezuoqiye16x16px
  • 贷款利率.24x24px
    #icon-a-daikuanlishuai24x24px
  • 首页-选中.20x20px
    #icon-a-shouye-xuanzhong20x20px
  • 下一页.24x24px
    #icon-a-xiayiye24x24px
  • 我的.20x20px
    #icon-a-wode20x20px
  • 专属客服.24x24px
    #icon-a-zhuanshukefu24x24px
  • 首页.20x20px
    #icon-a-shouye20x20px
  • 我的贷款.16x16px
    #icon-a-wodedaikuan16x16px
  • 我的-选中.20x20px
    #icon-a-wode-xuanzhong20x20px
  • 未签署.60x60px
    #icon-a-weiqianshu60x60px
  • 已签署.60x60px
    #icon-a-yiqianshu60x60px
  • 已结清.60x60px
    #icon-a-yijieqing60x60px
  • 16px搜索󅒐
    #icon-pxsousuo
  • 身份证人像面140x90px
    #icon-shenfenzhengrenxiangmian140x90px
  • 16px-取消上传#808080
    #icon-px-quxiaoshangchuan
  • 14px下一级
    #icon-pxxiayiji
  • 处理20x20px
    #icon-chuli20x20px
  • 审批流程20x20px
    #icon-shenpiliucheng20x20px
  • 返回24x24px
    #icon-fanhui24x24px
  • 日历16x16px
    #icon-rili16x16px
  • 下拉20x20px
    #icon-xiala20x20px
  • 进入24x24px
    #icon-jinru24x24px
  • 移动审批72x72px
    #icon-yidongshenpi72x72px
  • 新增-蓝色30X30px
    #icon-xinzeng-lanse30X30px
  • 企业头像26x26px
    #icon-qiyetouxiang26x26px
  • 人像100x100px
    #icon-renxiang100x100px
  • 联网核查24x24px
    #icon-lianwanghecha24x24px
  • 人脸识别24x24px
    #icon-renlianshibie24x24px
  • 计算器-未选中30x30px
    #icon-jisuanqi-weixuanzhong30x30px
  • 计算器-选中30x30px
    #icon-jisuanqi-xuanzhong30x30px
  • 贷还款测算-未选中30x30px
    #icon-daihuankuancesuan-weixuanzhong30x30px
  • 贷还款测算-选中30x30px
    #icon-daihuankuancesuan-xuanzhong30x30px
  • 通讯录-未选中30x30px
    #icon-tongxunlu-weixuanzhong30x30px
  • 通讯录-选中30x30px
    #icon-tongxunlu-xuanzhong30x30px
  • 全景视图14x14px
    #icon-quanjingshitu14x14px
  • 客户移交14x14px
    #icon-kehuyijiao14x14px
  • 筛选22x22px
    #icon-shaixuan22x22px
  • 业务申请情况40x40px
    #icon-yewushenqingqingkuang40x40px
  • 黑名单客户信息40x40px
    #icon-heimingdankehuxinxi40x40px
  • 未结清授信业务40x40px
    #icon-weijieqingshouxinyewu40x40px
  • 已结清授信业务40x40px
    #icon-yijieqingshouxinyewu40x40px
  • 为本行客户担保40x40px
    #icon-weibenhangkehudanbao40x40px
  • 被本行客户担保40x40px
    #icon-beibenhangkehudanbao40x40px
  • 影像资料40x40px
    #icon-yingxiangziliao40x40px
  • 生产经营40x40px
    #icon-shengchanjingying40x40px
  • 个人资产40x40px
    #icon-gerenzichan40x40px
  • 征信信息40x40px
    #icon-zhengxinxinxi40x40px
  • 家庭成员40x40px
    #icon-jiatingchengyuan40x40px
  • 基本信息40x40px
    #icon-jibenxinxi40x40px
  • 点击进入
    #icon-dianjijinru
  • 100px未调查
    #icon-a-100pxweitiaocha
  • 100px已调查5
    #icon-a-100pxyitiaocha5
  • 100px已采集2
    #icon-a-100pxyicaiji2
  • 100px已采集5
    #icon-a-100pxyicaiji5
  • 100px已采集3
    #icon-a-100pxyicaiji3
  • 100px已采集1
    #icon-a-100pxyicaiji1
  • 100px已调查3
    #icon-a-100pxyitiaocha3
  • 100px已调查1
    #icon-a-100pxyitiaocha1
  • 100px已采集4
    #icon-a-100pxyicaiji4
  • 100px已调查2
    #icon-a-100pxyitiaocha2
  • 100px已调查4
    #icon-a-100pxyitiaocha4
  • 100px未采集
    #icon-a-100pxweicaiji
  • 预授信额度60X60px
    #icon-yushouxinedu60X60px-01
  • 拍摄50x50px
    #icon-paishe50x50px
  • 拍照22x22px
    #icon-paizhao22x22px
  • 影像目录文件夹
    #icon-yingxiangmuluwenjianjia
  • 调查16X16px
    #icon-tiaocha16X16px
  • 成功120X120px
    #icon-chenggong120X120px
  • 终止16X16px
    #icon-zhongzhi16X16px
  • 检查16X16px
    #icon-jiancha16X16px
  • 待开始100X100px
    #icon-daikaishi100X100px
  • 导航16X16px
    #icon-daohang16X16px
  • 受理16X16px
    #icon-shouli16X16px
  • 电话16X16px
    #icon-dianhua16X16px
  • 已完成100X100px
    #icon-yiwancheng100X100px
  • 定位16X16px
    #icon-dingwei16X16px
  • 指向20X20px
    #icon-zhixiang20X20px
  • 查看16X16px
    #icon-chakan16X16px
  • 拒绝16X16px
    #icon-jujue16X16px
  • 30px担保调查2
    #icon-pxdanbaotiaocha1
  • 60px授信申请
    #icon-pxshouxinshenqing
  • 借款人调查
    #icon-jiekuanrentiaocha
  • 非农户信息采集100X100px
    #icon-feinonghuxinxicaiji100X100px
  • 农户信息采集100X100px
    #icon-nonghuxinxicaiji100X100px
  • 对公客户信息采集100X100px
    #icon-duigongkehuxinxicaiji100X100px
  • 头像
    #icon-touxiang
  • 点击分析16x16px
    #icon-dianjifenxi16x16px
  • 退出16x16px
    #icon-tuichu16x16px
  • 采集授权30X30px.选中
    #icon-a-caijishouquan30X30pxxuanzhong
  • 拍照20X20px
    #icon-paizhao20X20px
  • 扫描24X24px
    #icon-saomiao24X24px
  • 删除16X16px
    #icon-shanchu16X16px
  • 采集授权30X30px
    #icon-caijishouquan30X30px
  • 批量上传16X16px
    #icon-piliangshangchuan16X16px
  • 详情16X16px
    #icon-xiangqing16X16px
  • 基本信息30X30px.选中
    #icon-a-jibenxinxi30X30pxxuanzhong
  • 预授信30X30px.选中
    #icon-a-yushouxin30X30pxxuanzhong
  • 基本信息30X30px
    #icon-jibenxinxi30X30px
  • 身份核查30X30px
    #icon-shenfenhecha30X30px
  • 影像采集30X30px.已选
    #icon-a-yingxiangcaiji30X30pxyixuan
  • 预授信30X30px
    #icon-yushouxin30X30px
  • 影像采集30X30px
    #icon-yingxiangcaiji30X30px
  • 修改16X16px
    #icon-xiugai16X16px
  • 身份核查30X30px.选中
    #icon-a-shenfenhecha30X30pxxuanzhong
  • 定位40X40px
    #icon-dingwei40X40px
  • 关闭20X20px
    #icon-guanbi20X20px
  • 人像24X24px
    #icon-renxiang24X24px
  • 新增30X30px
    #icon-xinzeng30X30px
  • 角色切换32x32px
    #icon-jiaoseqiehuan32x32px
  • 设置32x32px
    #icon-shezhi32x32px
  • 网点查询32x32px
    #icon-wangdianchaxun32x32px
  • 产品中心32x32px
    #icon-chanpinzhongxin32x32px
  • 学习培训32x32px
    #icon-xuexipeixun32x32px
  • 信息采集32x32px
    #icon-xinxicaiji32x32px
  • 辅助工具32x32px
    #icon-fuzhugongju32x32px
  • 面对面营销32x32px
    #icon-mianduimianyingxiao32x32px
  • 授信管理32x32px
    #icon-shouxinguanli32x32px
  • 评级管理32x32px
    #icon-pingjiguanli32x32px

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>