• 地区
    
  • checkbox_on
    
  • checkbox
    
  • 公告
    
  • 
  • 链接
    
  • 通知
    
  • 监管信息采集
    
  • 学士帽 学习 毕业
    
  • 组织
    
  • 权限管理
    
  • 实名认证
    
  • 用户
    
  • 减号
    
  • 登录
    
  • 加号
    
  • 扫描
    
  • 
  • 
  • 展开详情
    
  • 上移
    
  • 设置
    
  • 保存
    
  • 打开
    
  • 房租
    
  • 日历
    
  • 三角
    
  • 退出
    
  • 退格
    
  • 认证
    
  • 查询管理
    
  • 越限异常查询
    
  • 实名
    
  • 素材
    
  • 箭头 左双-01
    
  • 配置管理
    
  • 企业微信图标
    
  • 微信
    
  • 方块
    
  • 所有
    
  • 搜索
    
  • 用户
    
  • 审核
    
  • B类企业所得税申报
    
  • 小规模增值税发票
    
  • 备案
    
  • 扣除
    
  • 警报发送
    
  • 缴款(细)
    
  • 申报表查询打印
    
  • 票种核定信息
    
  • 开票
    
  • 
  • 
  • 确认合同 确认 合同 确定
    
  • 信息
    
  • 
  • 备品_领用管理
    
  • 图表 折线图
    
  • 
  • QQ
    
  • 微信
    
  • 更新
    
  • 
  • 关注
    
  • 关注
    
  • 右上角筛选
    
  • 三角
    
  • 过期
    
  • 032.用户切换
    
  • 切换用户
    
  • 粘贴
    
  • 复制
    
  • 编辑
    
  • 二维码
    
  • 右箭头
    
  • delete
    
  • 
  • 
  • 用户
    
  • box
    
  • 名片
    
  • 导入
    
  • 日历
    
  • 选择
    
  • 点击
    
  • 返回
    
  • error
    
  • error
    
  • 切换
    
  • 清理
    
  • 12万元申报
    
  • 纳税申报
    
  • 申报管理-A表
    
  • 申请
    
  • 
  • 税务申报
    
  • 查询
    
  • 项目申报
    
  • 周报
    
  • 企业直报
    
  • 
  • App-舱单确报
    
  • 进度填报
    
  • left
    
  • right
    
  • status-right
    
  • status-fai
    
  • status-edit
    
  • 交通银行
    
  • 中国邮政储蓄
    
  • 中国建设银行
    
  • 浦发银行
    
  • 兴业银行
    
  • 中国银行
    
  • 招商银行
    
  • 工商银行
    
  • 光大银行
    
  • 民生银行
    
  • 农业银行
    
  • 侧边05
    
  • home
    
  • 箭头向下
    
  • 向下箭头
    
  • 箭头下
    
  • 用户
    
  • 资源管理
    
  • 箭头上
    
  • ios
    
  • android
    
  • 微信
    
  • 新增
    
  • 删除
    
  • 关闭
    
  • 箭头右
    
  • 用户管理
    
  • 应用管理
    
  • 新增
    

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-region
  • checkbox_on
    .icon--checkbox-checked
  • checkbox
    .icon--checkbox
  • 公告
    .icon-gonggao
  • .icon-xin
  • 链接
    .icon-link
  • 通知
    .icon-notice
  • 监管信息采集
    .icon-collect
  • 学士帽 学习 毕业
    .icon-school
  • 组织
    .icon-group
  • 权限管理
    .icon-security
  • 实名认证
    .icon-smrz2
  • 用户
    .icon-yonghu
  • 减号
    .icon-jianhao
  • 登录
    .icon-denglu
  • 加号
    .icon-hao
  • 扫描
    .icon-scan
  • .icon-circle1
  • .icon-circle
  • 展开详情
    .icon-pack
  • 上移
    .icon-up
  • 设置
    .icon-setting
  • 保存
    .icon-save
  • 打开
    .icon-openfile
  • 房租
    .icon-house
  • 日历
    .icon-date
  • 三角
    .icon-triangle-left
  • 退出
    .icon-logout
  • 退格
    .icon-backspace
  • 认证
    .icon-smrz
  • 查询管理
    .icon-query
  • 越限异常查询
    .icon-error-search
  • 实名
    .icon-smz
  • 素材
    .icon-sucai
  • 箭头 左双-01
    .icon-asleft
  • 配置管理
    .icon-system
  • 企业微信图标
    .icon-wework
  • 微信
    .icon-wechat2
  • 方块
    .icon-fangkuai
  • 所有
    .icon-suoyou
  • 搜索
    .icon-sousuo
  • 用户
    .icon-weibiaoti113
  • 审核
    .icon-17shenhe
  • B类企业所得税申报
    .icon-Bleiqiyesuodeshuishenbao
  • 小规模增值税发票
    .icon-xiaoguimozengzhishuifapiao
  • 备案
    .icon-beian
  • 扣除
    .icon-kouchu
  • 警报发送
    .icon-jingbaofasong
  • 缴款(细)
    .icon-jiaokuanxi
  • 申报表查询打印
    .icon-shenbaobiaochaxundayin
  • 票种核定信息
    .icon-piaozhonghedingxinxi
  • 开票
    .icon-kaipiaochenggong
  • .icon-jin
  • .icon-xiao
  • 确认合同 确认 合同 确定
    .icon-comfirm
  • 信息
    .icon-5
  • .icon-cun
  • 备品_领用管理
    .icon-beipin_lingyongguanli
  • 图表 折线图
    .icon-tubiaozhexiantuxe602
  • .icon-qian
  • QQ
    .icon-QQ1
  • 微信
    .icon-weixin
  • 更新
    .icon-gengxin
  • .icon-gou-copy
  • 关注
    .icon-guanzhu2
  • 关注
    .icon-weibiaoti105
  • 右上角筛选
    .icon-shaixuan
  • 三角
    .icon-sanjiao
  • 过期
    .icon-guoqi
  • 032.用户切换
    .icon-role
  • 切换用户
    .icon-role1
  • 粘贴
    .icon-paste
  • 复制
    .icon-copy
  • 编辑
    .icon-edit
  • 二维码
    .icon-erweima
  • 右箭头
    .icon-youjiantou
  • delete
    .icon-delete
  • .icon-jian
  • .icon-jia
  • 用户
    .icon-47
  • box
    .icon-box
  • 名片
    .icon-mingpian
  • 导入
    .icon-daoru
  • 日历
    .icon-rili
  • 选择
    .icon-xuanze
  • 点击
    .icon-dianji
  • 返回
    .icon-back
  • error
    .icon-error
  • error
    .icon-error1
  • 切换
    .icon-change
  • 清理
    .icon-qingli
  • 12万元申报
    .icon-12wanyuanshenbao
  • 纳税申报
    .icon-nashuishenbao
  • 申报管理-A表
    .icon-shenbaoguanli-Abiao
  • 申请
    .icon-shenqing-copy
  • .icon-bao
  • 税务申报
    .icon-shuiwushenbao
  • 查询
    .icon-chaxun
  • 项目申报
    .icon-xiangmushenbaoguanli
  • 周报
    .icon-zhoubao
  • 企业直报
    .icon-qiyezhibao
  • .icon-bao1
  • App-舱单确报
    .icon-App-cangdanquebao
  • 进度填报
    .icon-jindutianbao
  • left
    .icon-weibiaoti2
  • right
    .icon-weibiaoti21
  • status-right
    .icon-status-right
  • status-fai
    .icon-fork
  • status-edit
    .icon-status-edit
  • 交通银行
    .icon-jiaotongyinhang1
  • 中国邮政储蓄
    .icon-zhongguoyouzhengchuxu
  • 中国建设银行
    .icon-zhongguojiansheyinhang
  • 浦发银行
    .icon-pufayinhang1
  • 兴业银行
    .icon-xingyeyinhang1
  • 中国银行
    .icon-zhongguoyinhang1
  • 招商银行
    .icon-zhaoshangyinhang1
  • 工商银行
    .icon-gongshangyinhang1
  • 光大银行
    .icon-guangdayinhang
  • 民生银行
    .icon-minshengyinhang1
  • 农业银行
    .icon-nongyeyinhang
  • 侧边05
    .icon-cebian05
  • home
    .icon-home
  • 箭头向下
    .icon-jiantouxiangxia
  • 向下箭头
    .icon-xiangxiajiantou-copy
  • 箭头下
    .icon-darrow
  • 用户
    .icon-me
  • 资源管理
    .icon-resource
  • 箭头上
    .icon-rectangle
  • ios
    .icon-ios
  • android
    .icon-android
  • 微信
    .icon-wechat
  • 新增
    .icon-add
  • 删除
    .icon-trash
  • 关闭
    .icon-close
  • 箭头右
    .icon-rectangle2
  • 用户管理
    .icon-user
  • 应用管理
    .icon-app
  • 新增
    .icon-add2-copy

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-region
  • checkbox_on
    #icon--checkbox-checked
  • checkbox
    #icon--checkbox
  • 公告
    #icon-gonggao
  • #icon-xin
  • 链接
    #icon-link
  • 通知
    #icon-notice
  • 监管信息采集
    #icon-collect
  • 学士帽 学习 毕业
    #icon-school
  • 组织
    #icon-group
  • 权限管理
    #icon-security
  • 实名认证
    #icon-smrz2
  • 用户
    #icon-yonghu
  • 减号
    #icon-jianhao
  • 登录
    #icon-denglu
  • 加号
    #icon-hao
  • 扫描
    #icon-scan
  • #icon-circle1
  • #icon-circle
  • 展开详情
    #icon-pack
  • 上移
    #icon-up
  • 设置
    #icon-setting
  • 保存
    #icon-save
  • 打开
    #icon-openfile
  • 房租
    #icon-house
  • 日历
    #icon-date
  • 三角
    #icon-triangle-left
  • 退出
    #icon-logout
  • 退格
    #icon-backspace
  • 认证
    #icon-smrz
  • 查询管理
    #icon-query
  • 越限异常查询
    #icon-error-search
  • 实名
    #icon-smz
  • 素材
    #icon-sucai
  • 箭头 左双-01
    #icon-asleft
  • 配置管理
    #icon-system
  • 企业微信图标
    #icon-wework
  • 微信
    #icon-wechat2
  • 方块
    #icon-fangkuai
  • 所有
    #icon-suoyou
  • 搜索
    #icon-sousuo
  • 用户
    #icon-weibiaoti113
  • 审核
    #icon-17shenhe
  • B类企业所得税申报
    #icon-Bleiqiyesuodeshuishenbao
  • 小规模增值税发票
    #icon-xiaoguimozengzhishuifapiao
  • 备案
    #icon-beian
  • 扣除
    #icon-kouchu
  • 警报发送
    #icon-jingbaofasong
  • 缴款(细)
    #icon-jiaokuanxi
  • 申报表查询打印
    #icon-shenbaobiaochaxundayin
  • 票种核定信息
    #icon-piaozhonghedingxinxi
  • 开票
    #icon-kaipiaochenggong
  • #icon-jin
  • #icon-xiao
  • 确认合同 确认 合同 确定
    #icon-comfirm
  • 信息
    #icon-5
  • #icon-cun
  • 备品_领用管理
    #icon-beipin_lingyongguanli
  • 图表 折线图
    #icon-tubiaozhexiantuxe602
  • #icon-qian
  • QQ
    #icon-QQ1
  • 微信
    #icon-weixin
  • 更新
    #icon-gengxin
  • #icon-gou-copy
  • 关注
    #icon-guanzhu2
  • 关注
    #icon-weibiaoti105
  • 右上角筛选
    #icon-shaixuan
  • 三角
    #icon-sanjiao
  • 过期
    #icon-guoqi
  • 032.用户切换
    #icon-role
  • 切换用户
    #icon-role1
  • 粘贴
    #icon-paste
  • 复制
    #icon-copy
  • 编辑
    #icon-edit
  • 二维码
    #icon-erweima
  • 右箭头
    #icon-youjiantou
  • delete
    #icon-delete
  • #icon-jian
  • #icon-jia
  • 用户
    #icon-47
  • box
    #icon-box
  • 名片
    #icon-mingpian
  • 导入
    #icon-daoru
  • 日历
    #icon-rili
  • 选择
    #icon-xuanze
  • 点击
    #icon-dianji
  • 返回
    #icon-back
  • error
    #icon-error
  • error
    #icon-error1
  • 切换
    #icon-change
  • 清理
    #icon-qingli
  • 12万元申报
    #icon-12wanyuanshenbao
  • 纳税申报
    #icon-nashuishenbao
  • 申报管理-A表
    #icon-shenbaoguanli-Abiao
  • 申请
    #icon-shenqing-copy
  • #icon-bao
  • 税务申报
    #icon-shuiwushenbao
  • 查询
    #icon-chaxun
  • 项目申报
    #icon-xiangmushenbaoguanli
  • 周报
    #icon-zhoubao
  • 企业直报
    #icon-qiyezhibao
  • #icon-bao1
  • App-舱单确报
    #icon-App-cangdanquebao
  • 进度填报
    #icon-jindutianbao
  • left
    #icon-weibiaoti2
  • right
    #icon-weibiaoti21
  • status-right
    #icon-status-right
  • status-fai
    #icon-fork
  • status-edit
    #icon-status-edit
  • 交通银行
    #icon-jiaotongyinhang1
  • 中国邮政储蓄
    #icon-zhongguoyouzhengchuxu
  • 中国建设银行
    #icon-zhongguojiansheyinhang
  • 浦发银行
    #icon-pufayinhang1
  • 兴业银行
    #icon-xingyeyinhang1
  • 中国银行
    #icon-zhongguoyinhang1
  • 招商银行
    #icon-zhaoshangyinhang1
  • 工商银行
    #icon-gongshangyinhang1
  • 光大银行
    #icon-guangdayinhang
  • 民生银行
    #icon-minshengyinhang1
  • 农业银行
    #icon-nongyeyinhang
  • 侧边05
    #icon-cebian05
  • home
    #icon-home
  • 箭头向下
    #icon-jiantouxiangxia
  • 向下箭头
    #icon-xiangxiajiantou-copy
  • 箭头下
    #icon-darrow
  • 用户
    #icon-me
  • 资源管理
    #icon-resource
  • 箭头上
    #icon-rectangle
  • ios
    #icon-ios
  • android
    #icon-android
  • 微信
    #icon-wechat
  • 新增
    #icon-add
  • 删除
    #icon-trash
  • 关闭
    #icon-close
  • 箭头右
    #icon-rectangle2
  • 用户管理
    #icon-user
  • 应用管理
    #icon-app
  • 新增
    #icon-add2-copy

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>