• 完成
    
  • 项目_线性
    
  • home
    
  • word-color
    
  • 没有发贴
    
  • 申请
    
  • 签章
    
  • 对象
    
  • 案件
    
  • 详情
    
  • 语音
    
  • 继续
    
  • 重命名
    
  • 搜索
    
  • 制作
    
  • 惩戒措施
    
  • 当事人信息
    
  • 案件基本信息
    
  • 关键案件
    
  • 文书信息
    
  • 打印
    
  • 执行日志
    
  • 其他
    
  • 更多
    
  • 展开
    
  • 收起
    
  • 返回
    
  • 删除
    
  • 同步
    
  • 
  • 编辑
    
  • 查看
    
  • 案件
    
  • 案件
    
  • 打印
    
  • 传统查控
    
  • 终结结案
    
  • 终本结案
    
  • 其他
    
  • 分配
    
  • 
  • 执毕结案
    
  • 其他财产
    
  • 不动产
    
  • 申请归档报结
    
  • 财产报告令
    
  • 关联案件
    
  • 执行通知书
    
  • 案件信息
    
  • 股权
    
  • 存款
    
  • 网络查控
    
  • 调查
    
  • 司法审计
    
  • 搜查
    
  • 执行笔录
    
  • 悬赏执行
    
  • 执行线索
    
  • 预警
    
  • 报警
    
  • 已结案件
    
  • 新收案件
    
  • 在办案件
    
  • 冻结
    
  • 传统查控_冻结
    
  • 查封
    
  • 扣押
    
  • 限制出境
    
  • 罚款
    
  • 限高
    
  • 失信
    
  • 拒执移送
    
  • 拘留
    
  • 离开
    
  • 到达
    
  • 导航
    
  • 
  • 
  • 更新
    
  • 执行裁定书
    
  • 文书制作
    
  • 惩戒措施
    
  • 分配案件
    
  • 文书申请
    
  • 签章申请
    
  • 文书审批
    
  • 签章审批
    
  • 立案专用章
    
  • 核对无误章
    
  • 院章
    
  • 执行画像
    
  • 电子签名
    
  • 笔录
    
  • 笔录确认
    
  • 录制
    
  • 撤销
    
  • 布控
    

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

  • 完成
    .iconwancheng
  • 项目_线性
    .iconxiangmu
  • home
    .iconhome
  • word-color
    .iconword-color
  • 没有发贴
    .iconmeiyoufatie
  • 申请
    .iconsqgd
  • 签章
    .iconqianzhang
  • 对象
    .iconduixiang
  • 案件
    .iconanjian
  • 详情
    .iconxiangqing
  • 语音
    .iconyuyin
  • 继续
    .iconjixu
  • 重命名
    .iconzhongmingming
  • 搜索
    .iconsousuo
  • 制作
    .iconzhizuo
  • 惩戒措施
    .iconchengjiecuoshi
  • 当事人信息
    .icondangshirenxinxi
  • 案件基本信息
    .iconanjianjibenxinxi
  • 关键案件
    .iconguanjiananjian
  • 文书信息
    .iconwenshuxinxi
  • 打印
    .icondayin
  • 执行日志
    .iconzhihangrizhi
  • 其他
    .iconqita
  • 更多
    .icongengduo
  • 展开
    .iconzhankai
  • 收起
    .iconshouqi
  • 返回
    .iconfanhui
  • 删除
    .iconshanchu
  • 同步
    .icontongbu
  • .icondian
  • 编辑
    .iconbianji
  • 查看
    .iconchakan
  • 案件
    .iconanjian-copy-copy
  • 案件
    .iconanjian-copy
  • 打印
    .icondayin2
  • 传统查控
    .iconchuantongchakong
  • 终结结案
    .iconzhongjiejiean
  • 终本结案
    .iconzhongbenjiean
  • 其他
    .iconqita1
  • 分配
    .iconfenpei
  • .iconche
  • 执毕结案
    .iconzhibijiean
  • 其他财产
    .iconqitacaichan
  • 不动产
    .iconbudongchan
  • 申请归档报结
    .iconshenqingguidangbaojie
  • 财产报告令
    .iconcaichanbaogaoling
  • 关联案件
    .iconguanliananjian
  • 执行通知书
    .iconzhihangtongzhishu
  • 案件信息
    .iconanjianxinxi
  • 股权
    .iconguquan
  • 存款
    .iconcunkuan
  • 网络查控
    .iconwangluochakong1
  • 调查
    .icontiaocha
  • 司法审计
    .iconsifashenji
  • 搜查
    .iconsoucha
  • 执行笔录
    .iconzhihangbilu
  • 悬赏执行
    .iconxuanshangzhihang
  • 执行线索
    .iconzhihangxiansuo
  • 预警
    .iconyujing
  • 报警
    .iconbaojing
  • 已结案件
    .iconyijieanjian
  • 新收案件
    .iconxinshouanjian
  • 在办案件
    .iconzaibananjian
  • 冻结
    .icondongjie
  • 传统查控_冻结
    .iconchuantongchakong_dongjie
  • 查封
    .iconchafeng1
  • 扣押
    .iconkouya
  • 限制出境
    .iconxianzhichujing
  • 罚款
    .iconfakuan
  • 限高
    .iconxiangao
  • 失信
    .iconshixin
  • 拒执移送
    .iconjuzhiyisong
  • 拘留
    .iconjuliu
  • 离开
    .iconlikai
  • 到达
    .icondaoda
  • 导航
    .icondaohang
  • .iconnan
  • .iconnv
  • 更新
    .icongengxin
  • 执行裁定书
    .iconzhihangcaidingshu
  • 文书制作
    .iconwenshuzhizuo
  • 惩戒措施
    .iconchengjiecuoshi1
  • 分配案件
    .iconfenpeianjian
  • 文书申请
    .iconwenshushenqing
  • 签章申请
    .iconqianzhangshenqing
  • 文书审批
    .iconwenshushenpi
  • 签章审批
    .iconqianzhangshenpi
  • 立案专用章
    .iconlianzhuanyongzhang
  • 核对无误章
    .iconheduiwuwuzhang
  • 院章
    .iconyuanzhang
  • 执行画像
    .iconzhihanghuaxiang
  • 电子签名
    .icondianziqianming
  • 笔录
    .iconbilu
  • 笔录确认
    .iconbiluqueren
  • 录制
    .iconluzhi
  • 撤销
    .iconchexiao
  • 布控
    .iconbukong

font-class 引用


font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。

与 Unicode 使用方式相比,具有如下特点:

  • 兼容性良好,支持 IE8+,及所有现代浏览器。
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

使用步骤如下:

第一步:引入项目下面生成的 fontclass 代码:

<link rel="stylesheet" href="./iconfont.css">

第二步:挑选相应图标并获取类名,应用于页面:

<span class="iconfont iconxxx"></span>

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

  • 完成
    #iconwancheng
  • 项目_线性
    #iconxiangmu
  • home
    #iconhome
  • word-color
    #iconword-color
  • 没有发贴
    #iconmeiyoufatie
  • 申请
    #iconsqgd
  • 签章
    #iconqianzhang
  • 对象
    #iconduixiang
  • 案件
    #iconanjian
  • 详情
    #iconxiangqing
  • 语音
    #iconyuyin
  • 继续
    #iconjixu
  • 重命名
    #iconzhongmingming
  • 搜索
    #iconsousuo
  • 制作
    #iconzhizuo
  • 惩戒措施
    #iconchengjiecuoshi
  • 当事人信息
    #icondangshirenxinxi
  • 案件基本信息
    #iconanjianjibenxinxi
  • 关键案件
    #iconguanjiananjian
  • 文书信息
    #iconwenshuxinxi
  • 打印
    #icondayin
  • 执行日志
    #iconzhihangrizhi
  • 其他
    #iconqita
  • 更多
    #icongengduo
  • 展开
    #iconzhankai
  • 收起
    #iconshouqi
  • 返回
    #iconfanhui
  • 删除
    #iconshanchu
  • 同步
    #icontongbu
  • #icondian
  • 编辑
    #iconbianji
  • 查看
    #iconchakan
  • 案件
    #iconanjian-copy-copy
  • 案件
    #iconanjian-copy
  • 打印
    #icondayin2
  • 传统查控
    #iconchuantongchakong
  • 终结结案
    #iconzhongjiejiean
  • 终本结案
    #iconzhongbenjiean
  • 其他
    #iconqita1
  • 分配
    #iconfenpei
  • #iconche
  • 执毕结案
    #iconzhibijiean
  • 其他财产
    #iconqitacaichan
  • 不动产
    #iconbudongchan
  • 申请归档报结
    #iconshenqingguidangbaojie
  • 财产报告令
    #iconcaichanbaogaoling
  • 关联案件
    #iconguanliananjian
  • 执行通知书
    #iconzhihangtongzhishu
  • 案件信息
    #iconanjianxinxi
  • 股权
    #iconguquan
  • 存款
    #iconcunkuan
  • 网络查控
    #iconwangluochakong1
  • 调查
    #icontiaocha
  • 司法审计
    #iconsifashenji
  • 搜查
    #iconsoucha
  • 执行笔录
    #iconzhihangbilu
  • 悬赏执行
    #iconxuanshangzhihang
  • 执行线索
    #iconzhihangxiansuo
  • 预警
    #iconyujing
  • 报警
    #iconbaojing
  • 已结案件
    #iconyijieanjian
  • 新收案件
    #iconxinshouanjian
  • 在办案件
    #iconzaibananjian
  • 冻结
    #icondongjie
  • 传统查控_冻结
    #iconchuantongchakong_dongjie
  • 查封
    #iconchafeng1
  • 扣押
    #iconkouya
  • 限制出境
    #iconxianzhichujing
  • 罚款
    #iconfakuan
  • 限高
    #iconxiangao
  • 失信
    #iconshixin
  • 拒执移送
    #iconjuzhiyisong
  • 拘留
    #iconjuliu
  • 离开
    #iconlikai
  • 到达
    #icondaoda
  • 导航
    #icondaohang
  • #iconnan
  • #iconnv
  • 更新
    #icongengxin
  • 执行裁定书
    #iconzhihangcaidingshu
  • 文书制作
    #iconwenshuzhizuo
  • 惩戒措施
    #iconchengjiecuoshi1
  • 分配案件
    #iconfenpeianjian
  • 文书申请
    #iconwenshushenqing
  • 签章申请
    #iconqianzhangshenqing
  • 文书审批
    #iconwenshushenpi
  • 签章审批
    #iconqianzhangshenpi
  • 立案专用章
    #iconlianzhuanyongzhang
  • 核对无误章
    #iconheduiwuwuzhang
  • 院章
    #iconyuanzhang
  • 执行画像
    #iconzhihanghuaxiang
  • 电子签名
    #icondianziqianming
  • 笔录
    #iconbilu
  • 笔录确认
    #iconbiluqueren
  • 录制
    #iconluzhi
  • 撤销
    #iconchexiao
  • 布控
    #iconbukong

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>