• 编辑
    
  • 维修保养
    
  • 公告
    
  • 列表
    
  • 我要报修
    
  • 公告
    
  • 问题
    
  • 添加
    
  • 新建
    
  • 向左
    
  • 主题
    
  • 首页
    
  • 
  • 我的
    
  • 录音_30
    
  • 更多
    
  • 新建
    
  • 保修申请
    
  • 巡检
    
  • 待受理3
    
  • 受理中1
    
  • 受理完成
    
  • 播放
    
  • 查看
    
  • 审核
    
  • 编辑
    
  • 待我处理的-工单
    
  • 事件列表_睿松
    
  • 事件列表_睿松 (2)
    
  • 设备巡检
    
  • 新建工单
    
  • 工单列表
    
  • 问题
    
  • 搜索
    
  • 我的
    
  • 默认头像
    
  • 返回
    
  • 编辑
    
  • 我的
    
  • 
  • 故障报警
    
  • 一级-服务管理
    
  • 知识库
    
  • 已逾期
    
  • 即将逾期
    
  • 逾期
    
  • 展开
    
  • 向右
    
  • C 拍照
    
  • 我的
    
  • 评分
    
  • 主页
    
  • 常见问题 (1)
    
  • 新建 (1)
    
  • 首页-服务指南
    
  • 公告填充
    
  • 报修列表
    
  • 手机
    
  • 常见问题
    
  • 首页
    
  • icon_liucheng
    
  • icon_zhengzaijinx
    
  • icon_weizuo
    
  • 8
    
  • 9
    
  • 7
    
  • 8
    
  • 4
    
  • 6
    
  • 5
    
  • 2
    
  • 3
    
  • Shape
    
  • 10
    
  • 报修
    
  • voice-点击回放录音
    
  • 资源 1-wode
    
  • 资源 2-wode
    
  • 资源 1-zhuye
    
  • 资源 2-baoxiu
    
  • 资源 1-baoxiu
    
  • 资源 2-zhuye
    
  • 新建 (1)
    
  • 我的报修
    
  • 常见问题 (2)
    
  • 我的巡检
    
  • 公告列表
    
  • 服务指南
    
  • 回放
    
  • 回拨
    
  • 电话留言
    

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

  • 编辑
    .dsit-bianji2
  • 维修保养
    .dsit-weixiubaoyang
  • 公告
    .dsit-gonggao
  • 列表
    .dsit-liebiao1
  • 我要报修
    .dsit-woyaobaoxiu
  • 公告
    .dsit-gonggao1
  • 问题
    .dsit-question
  • 添加
    .dsit-tianjia
  • 新建
    .dsit-xinjian
  • 向左
    .dsit-xiangzuo
  • 主题
    .dsit-zhuti
  • 首页
    .dsit-shouye
  • .dsit-false-circle
  • 我的
    .dsit-wode
  • 录音_30
    .dsit-luyin
  • 更多
    .dsit-gengduo
  • 新建
    .dsit-icon-text-newlybuild
  • 保修申请
    .dsit-baoxiushenqing
  • 巡检
    .dsit-xunjian
  • 待受理3
    .dsit-daishouli
  • 受理中1
    .dsit-shoulizhong
  • 受理完成
    .dsit-shouliwancheng
  • 播放
    .dsit-bofang
  • 查看
    .dsit-chakan
  • 审核
    .dsit-shenhe
  • 编辑
    .dsit-bianji1
  • 待我处理的-工单
    .dsit-daiwochulide
  • 事件列表_睿松
    .dsit-shijianliebiao_ruisong
  • 事件列表_睿松 (2)
    .dsit-shijianliebiao_ruisong1
  • 设备巡检
    .dsit-shebeixunjian
  • 新建工单
    .dsit-xinjiangongdan
  • 工单列表
    .dsit-gongdanliebiao
  • 问题
    .dsit-wenti
  • 搜索
    .dsit-sousuo
  • 我的
    .dsit-wode3
  • 默认头像
    .dsit-morentouxiang
  • 返回
    .dsit-fanhui
  • 编辑
    .dsit-bianji
  • 我的
    .dsit-wode1
  • .dsit-dui
  • 故障报警
    .dsit-guzhangbaojing
  • 一级-服务管理
    .dsit-yiji-fuwuguanli
  • 知识库
    .dsit-zhishiku2
  • 已逾期
    .dsit-yiyuqi
  • 即将逾期
    .dsit-jijiangyuqi
  • 逾期
    .dsit-yuqi
  • 展开
    .dsit-mulu
  • 向右
    .dsit-xiangyou
  • C 拍照
    .dsit-paizhao
  • 我的
    .dsit-wode2
  • 评分
    .dsit-pingfen-copy
  • 主页
    .dsit-zhuye
  • 常见问题 (1)
    .dsit-changjianwenti
  • 新建 (1)
    .dsit-xinjian1
  • 首页-服务指南
    .dsit-shouye-fuwuzhinan
  • 公告填充
    .dsit-gonggaotianchong
  • 报修列表
    .dsit-baoxiuliebiao
  • 手机
    .dsit-shouji
  • 常见问题
    .dsit-changjianwenti1
  • 首页
    .dsit-ic
  • icon_liucheng
    .dsit-icon_liucheng
  • icon_zhengzaijinx
    .dsit-icon_zhengzaijinx
  • icon_weizuo
    .dsit-icon_weizuo
  • 8
    .dsit-icon-test
  • 9
    .dsit-icon-test1
  • 7
    .dsit-icon-test2
  • 8
    .dsit-icon-test3
  • 4
    .dsit-icon-test4
  • 6
    .dsit-icon-test5
  • 5
    .dsit-icon-test6
  • 2
    .dsit-icon-test7
  • 3
    .dsit-icon-test8
  • Shape
    .dsit-Shape
  • 10
    .dsit-icon-test9
  • 报修
    .dsit-baoxiu
  • voice-点击回放录音
    .dsit-voice-dianjihuifangluyin
  • 资源 1-wode
    .dsit-ziyuan-wode
  • 资源 2-wode
    .dsit-ziyuan-wode1
  • 资源 1-zhuye
    .dsit-ziyuan-zhuye
  • 资源 2-baoxiu
    .dsit-ziyuan-baoxiu
  • 资源 1-baoxiu
    .dsit-ziyuan-baoxiu1
  • 资源 2-zhuye
    .dsit-ziyuan-zhuye1
  • 新建 (1)
    .dsit-xinjian2
  • 我的报修
    .dsit-wodebaoxiu
  • 常见问题 (2)
    .dsit-changjianwenti2
  • 我的巡检
    .dsit-wodexunjian
  • 公告列表
    .dsit-gonggaoliebiao
  • 服务指南
    .dsit-fuwuzhinan
  • 回放
    .dsit-huifang
  • 回拨
    .dsit-huibo
  • 电话留言
    .dsit-dianhualiuyan

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="iconfont dsit-xxx"></span>

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

  • 编辑
    #dsit-bianji2
  • 维修保养
    #dsit-weixiubaoyang
  • 公告
    #dsit-gonggao
  • 列表
    #dsit-liebiao1
  • 我要报修
    #dsit-woyaobaoxiu
  • 公告
    #dsit-gonggao1
  • 问题
    #dsit-question
  • 添加
    #dsit-tianjia
  • 新建
    #dsit-xinjian
  • 向左
    #dsit-xiangzuo
  • 主题
    #dsit-zhuti
  • 首页
    #dsit-shouye
  • #dsit-false-circle
  • 我的
    #dsit-wode
  • 录音_30
    #dsit-luyin
  • 更多
    #dsit-gengduo
  • 新建
    #dsit-icon-text-newlybuild
  • 保修申请
    #dsit-baoxiushenqing
  • 巡检
    #dsit-xunjian
  • 待受理3
    #dsit-daishouli
  • 受理中1
    #dsit-shoulizhong
  • 受理完成
    #dsit-shouliwancheng
  • 播放
    #dsit-bofang
  • 查看
    #dsit-chakan
  • 审核
    #dsit-shenhe
  • 编辑
    #dsit-bianji1
  • 待我处理的-工单
    #dsit-daiwochulide
  • 事件列表_睿松
    #dsit-shijianliebiao_ruisong
  • 事件列表_睿松 (2)
    #dsit-shijianliebiao_ruisong1
  • 设备巡检
    #dsit-shebeixunjian
  • 新建工单
    #dsit-xinjiangongdan
  • 工单列表
    #dsit-gongdanliebiao
  • 问题
    #dsit-wenti
  • 搜索
    #dsit-sousuo
  • 我的
    #dsit-wode3
  • 默认头像
    #dsit-morentouxiang
  • 返回
    #dsit-fanhui
  • 编辑
    #dsit-bianji
  • 我的
    #dsit-wode1
  • #dsit-dui
  • 故障报警
    #dsit-guzhangbaojing
  • 一级-服务管理
    #dsit-yiji-fuwuguanli
  • 知识库
    #dsit-zhishiku2
  • 已逾期
    #dsit-yiyuqi
  • 即将逾期
    #dsit-jijiangyuqi
  • 逾期
    #dsit-yuqi
  • 展开
    #dsit-mulu
  • 向右
    #dsit-xiangyou
  • C 拍照
    #dsit-paizhao
  • 我的
    #dsit-wode2
  • 评分
    #dsit-pingfen-copy
  • 主页
    #dsit-zhuye
  • 常见问题 (1)
    #dsit-changjianwenti
  • 新建 (1)
    #dsit-xinjian1
  • 首页-服务指南
    #dsit-shouye-fuwuzhinan
  • 公告填充
    #dsit-gonggaotianchong
  • 报修列表
    #dsit-baoxiuliebiao
  • 手机
    #dsit-shouji
  • 常见问题
    #dsit-changjianwenti1
  • 首页
    #dsit-ic
  • icon_liucheng
    #dsit-icon_liucheng
  • icon_zhengzaijinx
    #dsit-icon_zhengzaijinx
  • icon_weizuo
    #dsit-icon_weizuo
  • 8
    #dsit-icon-test
  • 9
    #dsit-icon-test1
  • 7
    #dsit-icon-test2
  • 8
    #dsit-icon-test3
  • 4
    #dsit-icon-test4
  • 6
    #dsit-icon-test5
  • 5
    #dsit-icon-test6
  • 2
    #dsit-icon-test7
  • 3
    #dsit-icon-test8
  • Shape
    #dsit-Shape
  • 10
    #dsit-icon-test9
  • 报修
    #dsit-baoxiu
  • voice-点击回放录音
    #dsit-voice-dianjihuifangluyin
  • 资源 1-wode
    #dsit-ziyuan-wode
  • 资源 2-wode
    #dsit-ziyuan-wode1
  • 资源 1-zhuye
    #dsit-ziyuan-zhuye
  • 资源 2-baoxiu
    #dsit-ziyuan-baoxiu
  • 资源 1-baoxiu
    #dsit-ziyuan-baoxiu1
  • 资源 2-zhuye
    #dsit-ziyuan-zhuye1
  • 新建 (1)
    #dsit-xinjian2
  • 我的报修
    #dsit-wodebaoxiu
  • 常见问题 (2)
    #dsit-changjianwenti2
  • 我的巡检
    #dsit-wodexunjian
  • 公告列表
    #dsit-gonggaoliebiao
  • 服务指南
    #dsit-fuwuzhinan
  • 回放
    #dsit-huifang
  • 回拨
    #dsit-huibo
  • 电话留言
    #dsit-dianhualiuyan

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>