• 网贷18X18
    
  • 个贷18x18
    
  • 6选中
    
  • 5选中
    
  • 3选中
    
  • 2选中
    
  • 4选中
    
  • 1选中
    
  • 
    完成
    
  • 客户管理(面)
    
  • 客户管理(线)
    
  • 营销管理(线)
    
  • 营销管理(面)
    
  • 工作台(面)
    
  • 工作台(线)
    
  • 右-三角
    
  • 节点1
    
  • 节点2
    
  • 节点3
    
  • 节点4
    
  • 节点5
    
  • 节点5
    
  • 向上
    
  • 向下
    
  • 896x896任务背景6
    
  • 896x896任务背景5
    
  • 896x896任务背景4
    
  • 896x896任务背景3
    
  • 896x896任务背景2
    
  • 896x896任务背景1
    
  • 导航栏
    
  • 查看
    
  • 保存
    
  • 选中
    
  • 语音
    
  • 删除
    
  • 正排序
    
  • 100px调查样式2
    
  • 清除
    
  • 电话
    
  • 菜单
    
  • 16px搜索󅒐
    
  • 编辑
    
  • 16px-取消上传#808080
    
  • 14px下一级
    
  • 30px利率试算
    
  • 30p计算器
    
  • 30px收费查询
    
  • 220x140px-人像面
    
  • 返回
    
  • 下一步
    
  • 提示
    
  • 20px上传
    
  • 1-登入
    
  • 切换城市
    
  • 主页
    
  • 历史记录
    
  • 预警信号
    
  • 选中角标16x16
    
  • 提示信息
    
  • icon_案例管理
    
  • 02_拍照
    
  • 本次初筛
    
  • 产品缓冲背景72x72
    
  • 我的日程16x16
    
  • 我的24x24
    
  • 时间,计时
    
  • 行外32x32
    
  • 客户体检
    
  • 日程提醒
    
  • 客户定位
    
  • 辅助工具
    
  • 网点查询
    
  • 系统公告
    
  • 不解除
    
  • 自动解除
    
  • 人工解除
    
  • 二维码
    
  • 日程提醒_24_24
    
  • gongsimingcheng
    
  • 语音
    
  • 公司章程
    
  • 公司章程
    
  • 补录-32X32
    
  • 电话
    
  • 移动信贷icon
    
  • 审批通过
    
  • 保证人情况调查_50X50
    
  • 借款人信用状况调查_50X50
    
  • 抵质押物调查_50X50
    
  • 借款人经营及财务情况调查_50X50
    
  • 其他_50X50
    
  • 正式-32X32
    
  • 潜在-32X32
    
  • 其他-32X32
    
  • 保存
    
  • 减少
    
  • 手动新增100x100
    
  • 领取20x24
    
  • 全选24x24
    
  • 全不选24x24
    
  • 重要通知12x16
    
  • 项目信息18x20
    
  • 综合收益率20x20
    
  • 作废24x24
    
  • 通过100x25
    
  • 手持身份证120x120
    
  • 消息提醒14x16
    
  • 舆情信息20x18
    
  • 系统公告20x20
    
  • 营销时光轴16x16
    
  • 在途业务20x20
    
  • 失败100x25
    
  • 网点查询16x20
    
  • 提示60x60
    
  • 退回24x24
    
  • 营销管理48x48
    
  • 营销管理-选中48x48
    
  • 被执行人20x20
    
  • 财务信息18x20
    
  • 产品推介-选中24x24
    
  • 裁判文书18x20
    
  • 测评结果110x110
    
  • 产品推介24x24
    
  • 案件流程20x20
    
  • 成功140x140
    
  • 成都银行logo
    
  • 成都银行-未选中logo
    
  • 打卡签到20x20
    
  • 处罚信息18x20
    
  • 导航16x16
    
  • 到期提示16x16
    
  • 初筛历史20x20
    
  • 担保视图28x28
    
  • 定位12x16
    
  • 法院公告18x20
    
  • 工作台-选中48x48
    
  • 股票信息20x20
    
  • 工作台48x48
    
  • 等待100x25
    
  • 公司章程20x20
    
  • 工作单位20x18
    
  • 基本信息18x20
    
  • 辅助功能20x20
    
  • 集团关系28x28
    
  • 关联方20x20
    
  • 股权及动产质押18x20
    
  • 客户查询18x20
    
  • 面签管理-选中48x48
    
  • 开庭公告18x20
    
  • 高管授信18x20
    
  • 
    经营风险18x20
    
  • 客户管理48x48
    
  • 曝光台20x18
    
  • 清算信息18x20
    
  • 企业时光轴16x16
    
  • 客户管理-选中48x48
    
  • 企业图谱20x20
    
  • 面签管理48x48
    
  • 评级情况20x18
    
  • 风险核查120x120
    
  • 家庭财务信息20x20
    
  • 年报信息18x20
    
  • 日程提醒20x20
    
  • 时光轴16x16
    
  • 授信视图18x20
    
  • 拍照24x20
    
  • 删除24x24
    
  • 司法查冻扣20x18
    
  • 人脸识别160x160
    
  • 检查更新20x20px
    
  • 燃气户号-帮助16x16px
    
  • 待办
    
  • app-筛选16x16px
    
  • 消息
    
  • 风险预警处置
    
  • web-扫码
    
  • excel-1
    
  • word-1
    
  • pdf-1
    
  • 30px文件夹2
    
  • 清理缓存20x20px
    
  • web-邮箱
    
  • 客户管理-选中
    
  • 客户管理-未选中
    
  • 我的-未选中
    
  • 调查任务-选中
    
  • 调查任务-未选中
    
  • 二维码
    
  • 亚军44x44px
    
  • 季军44x44px
    
  • 冠军44x44px
    
  • 女性-个人头像22x22px
    
  • 男性-个人头像22x22px
    
  • 搜索2
    
  • 待审批
    
  • 扫描
    
  • 用户
    
  • 列表上进入
    
  • 手机账号
    
  • 人脸识别
    
  • 承诺日到期提醒16x16px
    
  • 营业执照85x120px
    
  • 身份证人像面140x90px
    
  • 身份证国徽面140x90px
    
  • 已拒绝60x60px
    
  • 勾选-未选中14x14px
    
  • 已处理状态
    
  • 待处理状态
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • 网贷18X18
    .icon-wangdai18X18
  • 个贷18x18
    .icon-gedai18x181
  • 6选中
    .icon-a-6xuanzhong
  • 5选中
    .icon-a-5xuanzhong
  • 3选中
    .icon-a-3xuanzhong
  • 2选中
    .icon-a-2xuanzhong
  • 4选中
    .icon-a-4xuanzhong
  • 1选中
    .icon-a-1xuanzhong
  • 完成
    .icon-wancheng
  • 客户管理(面)
    .icon-a-kehuguanlimian
  • 客户管理(线)
    .icon-a-kehuguanlixian
  • 营销管理(线)
    .icon-a-yingxiaoguanlixian
  • 营销管理(面)
    .icon-a-yingxiaoguanlimian
  • 工作台(面)
    .icon-a-gongzuotaimian
  • 工作台(线)
    .icon-a-gongzuotaixian
  • 右-三角
    .icon-right-s
  • 节点1
    .icon-jiedian1
  • 节点2
    .icon-jiedian2
  • 节点3
    .icon-jiedian3
  • 节点4
    .icon-jiedian4
  • 节点5
    .icon-jiedian5
  • 节点5
    .icon-jiedian51
  • 向上
    .icon-xiangshang
  • 向下
    .icon-xiangxia
  • 896x896任务背景6
    .icon-a-896x896renwubeijing6
  • 896x896任务背景5
    .icon-a-896x896renwubeijing5
  • 896x896任务背景4
    .icon-a-896x896renwubeijing4
  • 896x896任务背景3
    .icon-a-896x896renwubeijing3
  • 896x896任务背景2
    .icon-a-896x896renwubeijing2
  • 896x896任务背景1
    .icon-a-896x896renwubeijing1
  • 导航栏
    .icon-daohanglan
  • 查看
    .icon-chakan-copy
  • 保存
    .icon-baocun1
  • 选中
    .icon-xuanzhong
  • 语音
    .icon-yuyin1
  • 删除
    .icon-shanchu
  • 正排序
    .icon-zhengpaixu
  • 100px调查样式2
    .icon-pxtiaochayangshi1
  • 清除
    .icon-qingchu
  • 电话
    .icon-dianhua1
  • 菜单
    .icon-caidan
  • 16px搜索󅒐
    .icon-pxsousuo
  • 编辑
    .icon-edit
  • 16px-取消上传#808080
    .icon-px-quxiaoshangchuan
  • 14px下一级
    .icon-pxxiayiji
  • 30px利率试算
    .icon-pxlishuaishisuan1
  • 30p计算器
    .icon-pjisuanqi
  • 30px收费查询
    .icon-pxshoufeichaxun
  • 220x140px-人像面
    .icon-xpx-renxiangmian
  • 返回
    .icon-fanhui1
  • 下一步
    .icon-xiayibu
  • 提示
    .icon-tishi
  • 20px上传
    .icon-pxshangchuan
  • 1-登入
    .icon--dengru
  • 切换城市
    .icon-qiehuanchengshi
  • 主页
    .icon-zhuye
  • 历史记录
    .icon-lishijilu
  • 预警信号
    .icon-ziyuan
  • 选中角标16x16
    .icon-xuanzhongjiaobiao16x16
  • 提示信息
    .icon-prompt-info
  • icon_案例管理
    .icon-icon_anliguanli
  • 02_拍照
    .icon-a-02_paizhao
  • 本次初筛
    .icon-bencichushai
  • 产品缓冲背景72x72
    .icon-chanpinhuanchongbeijing72x72
  • 我的日程16x16
    .icon-wodericheng16x16
  • 我的24x24
    .icon-wode24x24
  • 时间,计时
    .icon-shijianjishi
  • 行外32x32
    .icon-hangwai32x32
  • 客户体检
    .icon-kehutijian
  • 日程提醒
    .icon-richengtixing
  • 客户定位
    .icon-kehudingwei
  • 辅助工具
    .icon-fuzhugongju
  • 网点查询
    .icon-wangdianchaxun
  • 系统公告
    .icon-xitonggonggao
  • 不解除
    .icon-bujiechu1
  • 自动解除
    .icon-zidongjiechu1
  • 人工解除
    .icon-rengongjiechu1
  • 二维码
    .icon-erweima
  • 日程提醒_24_24
    .icon-richengtixing_24_24
  • gongsimingcheng
    .icon-gongsimingcheng
  • 语音
    .icon-yuyin
  • 公司章程
    .icon-gongsizhangcheng1
  • 公司章程
    .icon-gongsizhangcheng
  • 补录-32X32
    .icon-bulu-32X32
  • 电话
    .icon-dianhua
  • 移动信贷icon
    .icon-yidongxindaiicon
  • 审批通过
    .icon-shenpitongguo
  • 保证人情况调查_50X50
    .icon-baozhengrenqingkuangtiaocha_50X50
  • 借款人信用状况调查_50X50
    .icon-jiekuanrenxinyongzhuangkuangtiaocha_50X50
  • 抵质押物调查_50X50
    .icon-dizhiyawutiaocha_50X50
  • 借款人经营及财务情况调查_50X50
    .icon-jiekuanrenjingyingjicaiwuqingkuangtiaocha_50X50
  • 其他_50X50
    .icon-qita_50X50
  • 正式-32X32
    .icon-zhengshi-32X32
  • 潜在-32X32
    .icon-qianzai-32X32
  • 其他-32X32
    .icon-qita-32X32
  • 保存
    .icon-baocun
  • 减少
    .icon-jianshao
  • 手动新增100x100
    .icon-a-shoudongxinzeng100x100ziyuan78
  • 领取20x24
    .icon-a-lingqu20x24ziyuan77
  • 全选24x24
    .icon-a-quanxuan24x24ziyuan76
  • 全不选24x24
    .icon-a-quanbuxuan24x24ziyuan75
  • 重要通知12x16
    .icon-a-zhongyaotongzhi12x16ziyuan43
  • 项目信息18x20
    .icon-a-xiangmuxinxi18x20ziyuan11
  • 综合收益率20x20
    .icon-a-zongheshouyishuai20x20ziyuan35
  • 作废24x24
    .icon-a-zuofei24x24ziyuan72
  • 通过100x25
    .icon-a-tongguo100x25ziyuan45
  • 手持身份证120x120
    .icon-a-shouchishenfenzheng120x120ziyuan68
  • 消息提醒14x16
    .icon-a-xiaoxitixing14x16ziyuan41
  • 舆情信息20x18
    .icon-a-yuqingxinxi20x18ziyuan23
  • 系统公告20x20
    .icon-a-xitonggonggao20x20ziyuan58
  • 营销时光轴16x16
    .icon-a-yingxiaoshiguangzhou16x16ziyuan64
  • 在途业务20x20
    .icon-a-zaituyewu20x20ziyuan36
  • 失败100x25
    .icon-a-shibai100x25ziyuan46
  • 网点查询16x20
    .icon-a-wangdianchaxun16x20ziyuan56
  • 提示60x60
    .icon-a-tishi60x60ziyuan51
  • 退回24x24
    .icon-a-tuihui24x24ziyuan71
  • 营销管理48x48
    .icon-a-yingxiaoguanli48x48ziyuan2
  • 营销管理-选中48x48
    .icon-a-yingxiaoguanli-xuanzhong48x48ziyuan3
  • 被执行人20x20
    .icon-a-beizhihangren20x20ziyuan29
  • 财务信息18x20
    .icon-a-caiwuxinxi18x20ziyuan14
  • 产品推介-选中24x24
    .icon-a-chanpintuijie-xuanzhong24x24ziyuan49
  • 裁判文书18x20
    .icon-a-caipanwenshu18x20ziyuan27
  • 测评结果110x110
    .icon-a-cepingjieguo110x110ziyuan40
  • 产品推介24x24
    .icon-a-chanpintuijie24x24ziyuan48
  • 案件流程20x20
    .icon-a-anjianliucheng20x20ziyuan31
  • 成功140x140
    .icon-a-chenggong140x140ziyuan50
  • 成都银行logo
    .icon-a-chengduyinhanglogoziyuan19
  • 成都银行-未选中logo
    .icon-a-chengduyinhang-weixuanzhonglogoziyuan20
  • 打卡签到20x20
    .icon-a-dakaqiandao20x20ziyuan60
  • 处罚信息18x20
    .icon-a-chufaxinxi18x20ziyuan25
  • 导航16x16
    .icon-a-daohang16x16ziyuan61
  • 到期提示16x16
    .icon-a-daoqitishi16x16ziyuan42
  • 初筛历史20x20
    .icon-a-chushailishi20x20ziyuan37
  • 担保视图28x28
    .icon-a-danbaoshitu28x28ziyuan22
  • 定位12x16
    .icon-a-dingwei12x16ziyuan65
  • 法院公告18x20
    .icon-a-fayuangonggao18x20ziyuan28
  • 工作台-选中48x48
    .icon-a-gongzuotai-xuanzhong48x48ziyuan5
  • 股票信息20x20
    .icon-a-gupiaoxinxi20x20ziyuan10
  • 工作台48x48
    .icon-a-gongzuotai48x48ziyuan4
  • 等待100x25
    .icon-a-dengdai100x25ziyuan47
  • 公司章程20x20
    .icon-a-gongsizhangcheng20x20ziyuan12
  • 工作单位20x18
    .icon-a-gongzuodanwei20x18ziyuan53
  • 基本信息18x20
    .icon-a-jibenxinxi18x20ziyuan8
  • 辅助功能20x20
    .icon-a-fuzhugongneng20x20ziyuan54
  • 集团关系28x28
    .icon-a-jituanguanxi28x28ziyuan18
  • 关联方20x20
    .icon-a-guanlianfang20x20ziyuan17
  • 股权及动产质押18x20
    .icon-a-guquanjidongchanzhiya18x20ziyuan9
  • 客户查询18x20
    .icon-a-kehuchaxun18x20ziyuan57
  • 面签管理-选中48x48
    .icon-a-mianqianguanli-xuanzhong48x48ziyuan6
  • 开庭公告18x20
    .icon-a-kaitinggonggao18x20ziyuan30
  • 高管授信18x20
    .icon-a-gaoguanshouxin18x20ziyuan39
  • 经营风险18x20
    .icon-a-jingyingfengxian18x20ziyuan24
  • 客户管理48x48
    .icon-a-kehuguanli48x48ziyuan6
  • 曝光台20x18
    .icon-a-puguangtai20x18ziyuan32
  • 清算信息18x20
    .icon-a-qingsuanxinxi18x20ziyuan26
  • 企业时光轴16x16
    .icon-a-qiyeshiguangzhou16x16ziyuan63
  • 客户管理-选中48x48
    .icon-a-kehuguanli-xuanzhong48x48ziyuan7
  • 企业图谱20x20
    .icon-a-qiyetupu20x20ziyuan16
  • 面签管理48x48
    .icon-a-mianqianguanli48x48ziyuan5
  • 评级情况20x18
    .icon-a-pingjiqingkuang20x18ziyuan34
  • 风险核查120x120
    .icon-a-fengxianhecha120x120ziyuan44
  • 家庭财务信息20x20
    .icon-a-jiatingcaiwuxinxi20x20ziyuan52
  • 年报信息18x20
    .icon-a-nianbaoxinxi18x20ziyuan13
  • 日程提醒20x20
    .icon-a-richengtixing20x20ziyuan55
  • 时光轴16x16
    .icon-a-shiguangzhou16x16ziyuan62
  • 授信视图18x20
    .icon-a-shouxinshitu18x20ziyuan38
  • 拍照24x20
    .icon-a-paizhao24x20ziyuan74
  • 删除24x24
    .icon-a-shanchu24x24ziyuan73
  • 司法查冻扣20x18
    .icon-a-sifachadongkou20x18ziyuan33
  • 人脸识别160x160
    .icon-a-renlianshibie160x160ziyuan69
  • 检查更新20x20px
    .icon-jianchagengxinxpx1
  • 燃气户号-帮助16x16px
    .icon-ranqihuhao-bangzhu16x16px
  • 待办
    .icon-daiban
  • app-筛选16x16px
    .icon-app-shaixuan16x16px
  • 消息
    .icon-icon-test-copy
  • 风险预警处置
    .icon-fengxianyujingchuzhi
  • web-扫码
    .icon-web-saoma
  • excel-1
    .icon-excel-1
  • word-1
    .icon-word-1
  • pdf-1
    .icon-pdf-1
  • 30px文件夹2
    .icon-pxwenjianjia
  • 清理缓存20x20px
    .icon-qinglihuancunxpx1
  • web-邮箱
    .icon-web-youxiang
  • 客户管理-选中
    .icon-kehuguanli-xuanzhong
  • 客户管理-未选中
    .icon-kehuguanli-weixuanzhong
  • 我的-未选中
    .icon-wode-weixuanzhong
  • 调查任务-选中
    .icon-tiaocharenwu-xuanzhong
  • 调查任务-未选中
    .icon-tiaocharenwu-weixuanzhong
  • 二维码
    .icon-ico
  • 亚军44x44px
    .icon-yajunxpx
  • 季军44x44px
    .icon-jijunxpx
  • 冠军44x44px
    .icon-guanjunxpx
  • 女性-个人头像22x22px
    .icon-nvxing-gerentouxiangxpx
  • 男性-个人头像22x22px
    .icon-nanxing-gerentouxiangxpx
  • 搜索2
    .icon-sousuo2
  • 待审批
    .icon-daishenpi
  • 扫描
    .icon-saomiao1
  • 用户
    .icon-yonghu
  • 列表上进入
    .icon-liebiaoshangjinru
  • 手机账号
    .icon-shoujizhanghao
  • 人脸识别
    .icon-renlianshibie
  • 承诺日到期提醒16x16px
    .icon-chengnuoridaoqitixing16x16px
  • 营业执照85x120px
    .icon-yingyezhizhao85x120px
  • 身份证人像面140x90px
    .icon-shenfenzhengrenxiangmian140x90px
  • 身份证国徽面140x90px
    .icon-shenfenzhengguohuimian140x90px
  • 已拒绝60x60px
    .icon-yijujue60x60px
  • 勾选-未选中14x14px
    .icon-gouxuan-weixuanzhong14x14px
  • 已处理状态
    .icon-yichulizhuangtai
  • 待处理状态
    .icon-daichulizhuangtai

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

  • 网贷18X18
    #icon-wangdai18X18
  • 个贷18x18
    #icon-gedai18x181
  • 6选中
    #icon-a-6xuanzhong
  • 5选中
    #icon-a-5xuanzhong
  • 3选中
    #icon-a-3xuanzhong
  • 2选中
    #icon-a-2xuanzhong
  • 4选中
    #icon-a-4xuanzhong
  • 1选中
    #icon-a-1xuanzhong
  • 完成
    #icon-wancheng
  • 客户管理(面)
    #icon-a-kehuguanlimian
  • 客户管理(线)
    #icon-a-kehuguanlixian
  • 营销管理(线)
    #icon-a-yingxiaoguanlixian
  • 营销管理(面)
    #icon-a-yingxiaoguanlimian
  • 工作台(面)
    #icon-a-gongzuotaimian
  • 工作台(线)
    #icon-a-gongzuotaixian
  • 右-三角
    #icon-right-s
  • 节点1
    #icon-jiedian1
  • 节点2
    #icon-jiedian2
  • 节点3
    #icon-jiedian3
  • 节点4
    #icon-jiedian4
  • 节点5
    #icon-jiedian5
  • 节点5
    #icon-jiedian51
  • 向上
    #icon-xiangshang
  • 向下
    #icon-xiangxia
  • 896x896任务背景6
    #icon-a-896x896renwubeijing6
  • 896x896任务背景5
    #icon-a-896x896renwubeijing5
  • 896x896任务背景4
    #icon-a-896x896renwubeijing4
  • 896x896任务背景3
    #icon-a-896x896renwubeijing3
  • 896x896任务背景2
    #icon-a-896x896renwubeijing2
  • 896x896任务背景1
    #icon-a-896x896renwubeijing1
  • 导航栏
    #icon-daohanglan
  • 查看
    #icon-chakan-copy
  • 保存
    #icon-baocun1
  • 选中
    #icon-xuanzhong
  • 语音
    #icon-yuyin1
  • 删除
    #icon-shanchu
  • 正排序
    #icon-zhengpaixu
  • 100px调查样式2
    #icon-pxtiaochayangshi1
  • 清除
    #icon-qingchu
  • 电话
    #icon-dianhua1
  • 菜单
    #icon-caidan
  • 16px搜索󅒐
    #icon-pxsousuo
  • 编辑
    #icon-edit
  • 16px-取消上传#808080
    #icon-px-quxiaoshangchuan
  • 14px下一级
    #icon-pxxiayiji
  • 30px利率试算
    #icon-pxlishuaishisuan1
  • 30p计算器
    #icon-pjisuanqi
  • 30px收费查询
    #icon-pxshoufeichaxun
  • 220x140px-人像面
    #icon-xpx-renxiangmian
  • 返回
    #icon-fanhui1
  • 下一步
    #icon-xiayibu
  • 提示
    #icon-tishi
  • 20px上传
    #icon-pxshangchuan
  • 1-登入
    #icon--dengru
  • 切换城市
    #icon-qiehuanchengshi
  • 主页
    #icon-zhuye
  • 历史记录
    #icon-lishijilu
  • 预警信号
    #icon-ziyuan
  • 选中角标16x16
    #icon-xuanzhongjiaobiao16x16
  • 提示信息
    #icon-prompt-info
  • icon_案例管理
    #icon-icon_anliguanli
  • 02_拍照
    #icon-a-02_paizhao
  • 本次初筛
    #icon-bencichushai
  • 产品缓冲背景72x72
    #icon-chanpinhuanchongbeijing72x72
  • 我的日程16x16
    #icon-wodericheng16x16
  • 我的24x24
    #icon-wode24x24
  • 时间,计时
    #icon-shijianjishi
  • 行外32x32
    #icon-hangwai32x32
  • 客户体检
    #icon-kehutijian
  • 日程提醒
    #icon-richengtixing
  • 客户定位
    #icon-kehudingwei
  • 辅助工具
    #icon-fuzhugongju
  • 网点查询
    #icon-wangdianchaxun
  • 系统公告
    #icon-xitonggonggao
  • 不解除
    #icon-bujiechu1
  • 自动解除
    #icon-zidongjiechu1
  • 人工解除
    #icon-rengongjiechu1
  • 二维码
    #icon-erweima
  • 日程提醒_24_24
    #icon-richengtixing_24_24
  • gongsimingcheng
    #icon-gongsimingcheng
  • 语音
    #icon-yuyin
  • 公司章程
    #icon-gongsizhangcheng1
  • 公司章程
    #icon-gongsizhangcheng
  • 补录-32X32
    #icon-bulu-32X32
  • 电话
    #icon-dianhua
  • 移动信贷icon
    #icon-yidongxindaiicon
  • 审批通过
    #icon-shenpitongguo
  • 保证人情况调查_50X50
    #icon-baozhengrenqingkuangtiaocha_50X50
  • 借款人信用状况调查_50X50
    #icon-jiekuanrenxinyongzhuangkuangtiaocha_50X50
  • 抵质押物调查_50X50
    #icon-dizhiyawutiaocha_50X50
  • 借款人经营及财务情况调查_50X50
    #icon-jiekuanrenjingyingjicaiwuqingkuangtiaocha_50X50
  • 其他_50X50
    #icon-qita_50X50
  • 正式-32X32
    #icon-zhengshi-32X32
  • 潜在-32X32
    #icon-qianzai-32X32
  • 其他-32X32
    #icon-qita-32X32
  • 保存
    #icon-baocun
  • 减少
    #icon-jianshao
  • 手动新增100x100
    #icon-a-shoudongxinzeng100x100ziyuan78
  • 领取20x24
    #icon-a-lingqu20x24ziyuan77
  • 全选24x24
    #icon-a-quanxuan24x24ziyuan76
  • 全不选24x24
    #icon-a-quanbuxuan24x24ziyuan75
  • 重要通知12x16
    #icon-a-zhongyaotongzhi12x16ziyuan43
  • 项目信息18x20
    #icon-a-xiangmuxinxi18x20ziyuan11
  • 综合收益率20x20
    #icon-a-zongheshouyishuai20x20ziyuan35
  • 作废24x24
    #icon-a-zuofei24x24ziyuan72
  • 通过100x25
    #icon-a-tongguo100x25ziyuan45
  • 手持身份证120x120
    #icon-a-shouchishenfenzheng120x120ziyuan68
  • 消息提醒14x16
    #icon-a-xiaoxitixing14x16ziyuan41
  • 舆情信息20x18
    #icon-a-yuqingxinxi20x18ziyuan23
  • 系统公告20x20
    #icon-a-xitonggonggao20x20ziyuan58
  • 营销时光轴16x16
    #icon-a-yingxiaoshiguangzhou16x16ziyuan64
  • 在途业务20x20
    #icon-a-zaituyewu20x20ziyuan36
  • 失败100x25
    #icon-a-shibai100x25ziyuan46
  • 网点查询16x20
    #icon-a-wangdianchaxun16x20ziyuan56
  • 提示60x60
    #icon-a-tishi60x60ziyuan51
  • 退回24x24
    #icon-a-tuihui24x24ziyuan71
  • 营销管理48x48
    #icon-a-yingxiaoguanli48x48ziyuan2
  • 营销管理-选中48x48
    #icon-a-yingxiaoguanli-xuanzhong48x48ziyuan3
  • 被执行人20x20
    #icon-a-beizhihangren20x20ziyuan29
  • 财务信息18x20
    #icon-a-caiwuxinxi18x20ziyuan14
  • 产品推介-选中24x24
    #icon-a-chanpintuijie-xuanzhong24x24ziyuan49
  • 裁判文书18x20
    #icon-a-caipanwenshu18x20ziyuan27
  • 测评结果110x110
    #icon-a-cepingjieguo110x110ziyuan40
  • 产品推介24x24
    #icon-a-chanpintuijie24x24ziyuan48
  • 案件流程20x20
    #icon-a-anjianliucheng20x20ziyuan31
  • 成功140x140
    #icon-a-chenggong140x140ziyuan50
  • 成都银行logo
    #icon-a-chengduyinhanglogoziyuan19
  • 成都银行-未选中logo
    #icon-a-chengduyinhang-weixuanzhonglogoziyuan20
  • 打卡签到20x20
    #icon-a-dakaqiandao20x20ziyuan60
  • 处罚信息18x20
    #icon-a-chufaxinxi18x20ziyuan25
  • 导航16x16
    #icon-a-daohang16x16ziyuan61
  • 到期提示16x16
    #icon-a-daoqitishi16x16ziyuan42
  • 初筛历史20x20
    #icon-a-chushailishi20x20ziyuan37
  • 担保视图28x28
    #icon-a-danbaoshitu28x28ziyuan22
  • 定位12x16
    #icon-a-dingwei12x16ziyuan65
  • 法院公告18x20
    #icon-a-fayuangonggao18x20ziyuan28
  • 工作台-选中48x48
    #icon-a-gongzuotai-xuanzhong48x48ziyuan5
  • 股票信息20x20
    #icon-a-gupiaoxinxi20x20ziyuan10
  • 工作台48x48
    #icon-a-gongzuotai48x48ziyuan4
  • 等待100x25
    #icon-a-dengdai100x25ziyuan47
  • 公司章程20x20
    #icon-a-gongsizhangcheng20x20ziyuan12
  • 工作单位20x18
    #icon-a-gongzuodanwei20x18ziyuan53
  • 基本信息18x20
    #icon-a-jibenxinxi18x20ziyuan8
  • 辅助功能20x20
    #icon-a-fuzhugongneng20x20ziyuan54
  • 集团关系28x28
    #icon-a-jituanguanxi28x28ziyuan18
  • 关联方20x20
    #icon-a-guanlianfang20x20ziyuan17
  • 股权及动产质押18x20
    #icon-a-guquanjidongchanzhiya18x20ziyuan9
  • 客户查询18x20
    #icon-a-kehuchaxun18x20ziyuan57
  • 面签管理-选中48x48
    #icon-a-mianqianguanli-xuanzhong48x48ziyuan6
  • 开庭公告18x20
    #icon-a-kaitinggonggao18x20ziyuan30
  • 高管授信18x20
    #icon-a-gaoguanshouxin18x20ziyuan39
  • 经营风险18x20
    #icon-a-jingyingfengxian18x20ziyuan24
  • 客户管理48x48
    #icon-a-kehuguanli48x48ziyuan6
  • 曝光台20x18
    #icon-a-puguangtai20x18ziyuan32
  • 清算信息18x20
    #icon-a-qingsuanxinxi18x20ziyuan26
  • 企业时光轴16x16
    #icon-a-qiyeshiguangzhou16x16ziyuan63
  • 客户管理-选中48x48
    #icon-a-kehuguanli-xuanzhong48x48ziyuan7
  • 企业图谱20x20
    #icon-a-qiyetupu20x20ziyuan16
  • 面签管理48x48
    #icon-a-mianqianguanli48x48ziyuan5
  • 评级情况20x18
    #icon-a-pingjiqingkuang20x18ziyuan34
  • 风险核查120x120
    #icon-a-fengxianhecha120x120ziyuan44
  • 家庭财务信息20x20
    #icon-a-jiatingcaiwuxinxi20x20ziyuan52
  • 年报信息18x20
    #icon-a-nianbaoxinxi18x20ziyuan13
  • 日程提醒20x20
    #icon-a-richengtixing20x20ziyuan55
  • 时光轴16x16
    #icon-a-shiguangzhou16x16ziyuan62
  • 授信视图18x20
    #icon-a-shouxinshitu18x20ziyuan38
  • 拍照24x20
    #icon-a-paizhao24x20ziyuan74
  • 删除24x24
    #icon-a-shanchu24x24ziyuan73
  • 司法查冻扣20x18
    #icon-a-sifachadongkou20x18ziyuan33
  • 人脸识别160x160
    #icon-a-renlianshibie160x160ziyuan69
  • 检查更新20x20px
    #icon-jianchagengxinxpx1
  • 燃气户号-帮助16x16px
    #icon-ranqihuhao-bangzhu16x16px
  • 待办
    #icon-daiban
  • app-筛选16x16px
    #icon-app-shaixuan16x16px
  • 消息
    #icon-icon-test-copy
  • 风险预警处置
    #icon-fengxianyujingchuzhi
  • web-扫码
    #icon-web-saoma
  • excel-1
    #icon-excel-1
  • word-1
    #icon-word-1
  • pdf-1
    #icon-pdf-1
  • 30px文件夹2
    #icon-pxwenjianjia
  • 清理缓存20x20px
    #icon-qinglihuancunxpx1
  • web-邮箱
    #icon-web-youxiang
  • 客户管理-选中
    #icon-kehuguanli-xuanzhong
  • 客户管理-未选中
    #icon-kehuguanli-weixuanzhong
  • 我的-未选中
    #icon-wode-weixuanzhong
  • 调查任务-选中
    #icon-tiaocharenwu-xuanzhong
  • 调查任务-未选中
    #icon-tiaocharenwu-weixuanzhong
  • 二维码
    #icon-ico
  • 亚军44x44px
    #icon-yajunxpx
  • 季军44x44px
    #icon-jijunxpx
  • 冠军44x44px
    #icon-guanjunxpx
  • 女性-个人头像22x22px
    #icon-nvxing-gerentouxiangxpx
  • 男性-个人头像22x22px
    #icon-nanxing-gerentouxiangxpx
  • 搜索2
    #icon-sousuo2
  • 待审批
    #icon-daishenpi
  • 扫描
    #icon-saomiao1
  • 用户
    #icon-yonghu
  • 列表上进入
    #icon-liebiaoshangjinru
  • 手机账号
    #icon-shoujizhanghao
  • 人脸识别
    #icon-renlianshibie
  • 承诺日到期提醒16x16px
    #icon-chengnuoridaoqitixing16x16px
  • 营业执照85x120px
    #icon-yingyezhizhao85x120px
  • 身份证人像面140x90px
    #icon-shenfenzhengrenxiangmian140x90px
  • 身份证国徽面140x90px
    #icon-shenfenzhengguohuimian140x90px
  • 已拒绝60x60px
    #icon-yijujue60x60px
  • 勾选-未选中14x14px
    #icon-gouxuan-weixuanzhong14x14px
  • 已处理状态
    #icon-yichulizhuangtai
  • 待处理状态
    #icon-daichulizhuangtai

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>