• 帮助与支持
    
  • 对比2
    
  • 标签
    
  • 线性-标记
    
  • 已读
    
  • 已读
    
  • 小组
    
  • 单据-错误
    
  • 保养计划
    
  • 毅进06-积分政策
    
  • 对比分析
    
  • 角色管理
    
  • 识别
    
  • 权限块状
    
  • 条件筛选
    
  • 返回
    
  • 随你后台-新闻
    
  • 待办
    
  • 分享
    
  • 国内
    
  • 国际
    
  • 设置
    
  • 首页
    
  • 日历 (1)
    
  • 
  • 设置
    
  • 向下d
    
  • 向上d
    
  • 企业 工厂 建筑2
    
  • 全球
    
  • 中国地图
    
  • 前进
    
  • 返回
    
  • 返回
    
  • 预警
    
  • 全文检索库
    
  • 数据检索
    
  • 展开侧边栏
    
  • WiFi
    
  • 验证码
    
  • car
    
  • car
    
  • 信息
    
  • 云端
    
  • 流程
    
  • 配置
    
  • 数据分析
    
  • 检索
    
  • 团队
    
  • 法规库
    
  • 分析工具,红字分析
    
  • 搜索
    
  • 轮胎
    
  • 回到顶部
    
  • web__暂无记录
    
  • 文件夹
    
  • arrow down
    
  • 汽车-28
    
  • 系统运维-部门
    
  • 员工渠道APP-我的
    
  • 选中个人中心
    
  • 资源库
    
  • 车-03
    
  • 车-02
    
  • 车-01
    
  • 下载
    
  • 下载
    
  • 下载
    
  • 委托
    
  • 保存
    
  • 图表
    
  • pdf
    
  • 翻译
    
  • word
    
  • 流程
    
  • 报表
    
  • 报表
    
  • 配置
    
  • 清单
    
  • 动态
    
  • 工具
    
  • 配置
    
  • 检索管理
    
  • 法规库
    
  • 法律法规库
    
  • 首页
    
  • 清单
    
  • 下载
    
  • 配置
    
  • 移除
    
  • 预警
    
  • 基础信息管理
    
  • 基础配置管理
    
  • 搜索
    
  • 个人中心-我的
    
  • 下 拉
    
  • 
  • 关 闭
    
  • 日期
    
  • 
  • 筛 选
    
  • 删 除
    
  • 导入
    
  • 导出
    
  • 更多
    
  • 编辑
    
  • 删除/数字面板编辑态
    
  • 新增
    
  • 删除筛选项
    
  • 
    下载
    
  • 下载
    
  • 下载
    
  • 文件夹
    
  • 上传
    
  • 查看
    
  • 上传
    
  • 下载
    
  • 下载
    
  • 查看
    
  • 文件夹
    
  • 导出
    
  • 星星
    
  • 会议记录
    
  • 分开
    
  • 待办提醒
    
  • AK-MN消息2_fill
    
  • 首页
    
  • 爱生活-个人中心-头像
    
  • 头像(通用)
    
  • 头像修改
    
  • 折叠
    
  • 重置
    
  • 维修扳手
    
  • 首页
    
  • 数据分析
    
  • 流程
    
  • 法律法规
    
  • shouye
    
  • 搜索
    
  • 团队
    
  • shouye
    

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-bangzhuyuzhichi
  • 对比2
    .icon-duibi
  • 标签
    .icon-biaoqian-copy
  • 线性-标记
    .icon-xianxing-biaoji
  • 已读
    .icon-yidu
  • 已读
    .icon-yidu-copy
  • 小组
    .icon-xiaozu
  • 单据-错误
    .icon-danju-cuowu-tianchong
  • 保养计划
    .icon-baoyangjihua
  • 毅进06-积分政策
    .icon-yijin06-jifenzhengce
  • 对比分析
    .icon-duibifenxi
  • 角色管理
    .icon-jiaoseguanli
  • 识别
    .icon-shibie
  • 权限块状
    .icon-quanxiankuaizhuang
  • 条件筛选
    .icon-tiaojianshaixuan
  • 返回
    .icon-fanhui
  • 随你后台-新闻
    .icon-suini-new-2
  • 待办
    .icon-iconfontrenwu
  • 分享
    .icon-fenxiang
  • 国内
    .icon-guonei
  • 国际
    .icon-guoji
  • 设置
    .icon-shezhi1
  • 首页
    .icon-shouye5
  • 日历 (1)
    .icon-rili
  • .icon-yun
  • 设置
    .icon-shezhi2
  • 向下d
    .icon-icon-angle-double-bottom
  • 向上d
    .icon-icon-angle-double-top
  • 企业 工厂 建筑2
    .icon-qiyegongchangjianzhu2
  • 全球
    .icon-quanqiu
  • 中国地图
    .icon-zhongguoditu
  • 前进
    .icon-tuanduicankaoxian_huaban
  • 返回
    .icon-fanhui1
  • 返回
    .icon-fanhui2
  • 预警
    .icon-yujing1
  • 全文检索库
    .icon-wulumuqishigongandashujuguanlipingtai-ico-
  • 数据检索
    .icon-shujujiansuo
  • 展开侧边栏
    .icon-zhankaicebianlan
  • WiFi
    .icon-WiFi
  • 验证码
    .icon-securityCode-b
  • car
    .icon-car
  • car
    .icon-car1
  • 信息
    .icon-xinxi
  • 云端
    .icon-icon-technology-cloud
  • 流程
    .icon-liucheng1
  • 配置
    .icon-peizhi3
  • 数据分析
    .icon-data-ana
  • 检索
    .icon-jiansuo
  • 团队
    .icon-i
  • 法规库
    .icon-faguiku1
  • 分析工具,红字分析
    .icon-fenxigongjuhongzifenxi
  • 搜索
    .icon-sousuo2
  • 轮胎
    .icon-icon-loading
  • 回到顶部
    .icon-huidaodingbu
  • web__暂无记录
    .icon-zanwu
  • 文件夹
    .icon-wenjianjia1
  • arrow down
    .icon-arrowdown
  • 汽车-28
    .icon-qicheqianlian-
  • 系统运维-部门
    .icon-xitongyunweibumen
  • 员工渠道APP-我的
    .icon-wode
  • 选中个人中心
    .icon-icon-test
  • 资源库
    .icon-ziyuanku1
  • 车-03
    .icon-che-3
  • 车-02
    .icon-che-1
  • 车-01
    .icon-che-2
  • 下载
    .icon-svg34-copy-copy
  • 下载
    .icon-svg34-copy
  • 下载
    .icon-xiazai3
  • 委托
    .icon-weituo
  • 保存
    .icon-baocun
  • 图表
    .icon-tubiao
  • pdf
    .icon-pdf
  • 翻译
    .icon-fanyi
  • word
    .icon-word1
  • 流程
    .icon-liucheng-A-
  • 报表
    .icon-baobiao
  • 报表
    .icon-baobiao1
  • 配置
    .icon-peizhi1
  • 清单
    .icon-qingdan1
  • 动态
    .icon-dongtai
  • 工具
    .icon-gongju
  • 配置
    .icon-peizhi2
  • 检索管理
    .icon-jiansuoguanli
  • 法规库
    .icon-faguiku
  • 法律法规库
    .icon-falvfaguiku
  • 首页
    .icon-shouye4
  • 清单
    .icon-qingdan
  • 下载
    .icon-xiazai2
  • 配置
    .icon-peizhi
  • 移除
    .icon-yichu
  • 预警
    .icon-yujing
  • 基础信息管理
    .icon-jichuxinxiguanli
  • 基础配置管理
    .icon-jichupeizhiguanli
  • 搜索
    .icon-sousuo1
  • 个人中心-我的
    .icon-yonghu
  • 下 拉
    .icon-xiala
  • 上传
    .icon-shangchuan1
  • 关 闭
    .icon-guanbi
  • 日期
    .icon-riqi
  • .icon-dui
  • 筛 选
    .icon-shaixuan
  • 删 除
    .icon-shanchu
  • 导入
    .icon-daoru
  • 导出
    .icon-daochu1
  • 更多
    .icon-gengduo
  • 编辑
    .icon-bianji-copy
  • 删除/数字面板编辑态
    .icon-chuyidong
  • 新增
    .icon-xinzeng
  • 删除筛选项
    .icon-chushaixuanxiang
  • 下载
    .icon-xiazai1-copy-copy
  • 下载
    .icon-xiazai
  • 下载
    .icon-xiazai1
  • 文件夹
    .icon-wenjianjia
  • 上传
    .icon-shangchuan
  • 查看
    .icon-chakan
  • 上传
    .icon-shangchuan-copy
  • 下载
    .icon-xiazai1-copy
  • 下载
    .icon-xiazai-copy
  • 查看
    .icon-chakan-copy
  • 文件夹
    .icon-wenjianjia-copy
  • 导出
    .icon-daochu
  • 星星
    .icon-xingxing
  • 会议记录
    .icon-214
  • 分开
    .icon-fenkai-copy
  • 待办提醒
    .icon-daibantixing
  • AK-MN消息2_fill
    .icon-mn_xiaoxi_fill
  • 首页
    .icon-shouye3
  • 爱生活-个人中心-头像
    .icon-touxiang
  • 头像(通用)
    .icon-touxiangtongyong
  • 头像修改
    .icon-touxiangxiugai
  • 折叠
    .icon-zhedie
  • 重置
    .icon-zhongzhi
  • 维修扳手
    .icon-weixiubanshou
  • 首页
    .icon-shouye
  • 数据分析
    .icon-data-analysis
  • 流程
    .icon-liucheng
  • 法律法规
    .icon-falvfagui
  • shouye
    .icon-shouye1
  • 搜索
    .icon-sousuo
  • 团队
    .icon-tuandui
  • shouye
    .icon-shouye2

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-bangzhuyuzhichi
  • 对比2
    #icon-duibi
  • 标签
    #icon-biaoqian-copy
  • 线性-标记
    #icon-xianxing-biaoji
  • 已读
    #icon-yidu
  • 已读
    #icon-yidu-copy
  • 小组
    #icon-xiaozu
  • 单据-错误
    #icon-danju-cuowu-tianchong
  • 保养计划
    #icon-baoyangjihua
  • 毅进06-积分政策
    #icon-yijin06-jifenzhengce
  • 对比分析
    #icon-duibifenxi
  • 角色管理
    #icon-jiaoseguanli
  • 识别
    #icon-shibie
  • 权限块状
    #icon-quanxiankuaizhuang
  • 条件筛选
    #icon-tiaojianshaixuan
  • 返回
    #icon-fanhui
  • 随你后台-新闻
    #icon-suini-new-2
  • 待办
    #icon-iconfontrenwu
  • 分享
    #icon-fenxiang
  • 国内
    #icon-guonei
  • 国际
    #icon-guoji
  • 设置
    #icon-shezhi1
  • 首页
    #icon-shouye5
  • 日历 (1)
    #icon-rili
  • #icon-yun
  • 设置
    #icon-shezhi2
  • 向下d
    #icon-icon-angle-double-bottom
  • 向上d
    #icon-icon-angle-double-top
  • 企业 工厂 建筑2
    #icon-qiyegongchangjianzhu2
  • 全球
    #icon-quanqiu
  • 中国地图
    #icon-zhongguoditu
  • 前进
    #icon-tuanduicankaoxian_huaban
  • 返回
    #icon-fanhui1
  • 返回
    #icon-fanhui2
  • 预警
    #icon-yujing1
  • 全文检索库
    #icon-wulumuqishigongandashujuguanlipingtai-ico-
  • 数据检索
    #icon-shujujiansuo
  • 展开侧边栏
    #icon-zhankaicebianlan
  • WiFi
    #icon-WiFi
  • 验证码
    #icon-securityCode-b
  • car
    #icon-car
  • car
    #icon-car1
  • 信息
    #icon-xinxi
  • 云端
    #icon-icon-technology-cloud
  • 流程
    #icon-liucheng1
  • 配置
    #icon-peizhi3
  • 数据分析
    #icon-data-ana
  • 检索
    #icon-jiansuo
  • 团队
    #icon-i
  • 法规库
    #icon-faguiku1
  • 分析工具,红字分析
    #icon-fenxigongjuhongzifenxi
  • 搜索
    #icon-sousuo2
  • 轮胎
    #icon-icon-loading
  • 回到顶部
    #icon-huidaodingbu
  • web__暂无记录
    #icon-zanwu
  • 文件夹
    #icon-wenjianjia1
  • arrow down
    #icon-arrowdown
  • 汽车-28
    #icon-qicheqianlian-
  • 系统运维-部门
    #icon-xitongyunweibumen
  • 员工渠道APP-我的
    #icon-wode
  • 选中个人中心
    #icon-icon-test
  • 资源库
    #icon-ziyuanku1
  • 车-03
    #icon-che-3
  • 车-02
    #icon-che-1
  • 车-01
    #icon-che-2
  • 下载
    #icon-svg34-copy-copy
  • 下载
    #icon-svg34-copy
  • 下载
    #icon-xiazai3
  • 委托
    #icon-weituo
  • 保存
    #icon-baocun
  • 图表
    #icon-tubiao
  • pdf
    #icon-pdf
  • 翻译
    #icon-fanyi
  • word
    #icon-word1
  • 流程
    #icon-liucheng-A-
  • 报表
    #icon-baobiao
  • 报表
    #icon-baobiao1
  • 配置
    #icon-peizhi1
  • 清单
    #icon-qingdan1
  • 动态
    #icon-dongtai
  • 工具
    #icon-gongju
  • 配置
    #icon-peizhi2
  • 检索管理
    #icon-jiansuoguanli
  • 法规库
    #icon-faguiku
  • 法律法规库
    #icon-falvfaguiku
  • 首页
    #icon-shouye4
  • 清单
    #icon-qingdan
  • 下载
    #icon-xiazai2
  • 配置
    #icon-peizhi
  • 移除
    #icon-yichu
  • 预警
    #icon-yujing
  • 基础信息管理
    #icon-jichuxinxiguanli
  • 基础配置管理
    #icon-jichupeizhiguanli
  • 搜索
    #icon-sousuo1
  • 个人中心-我的
    #icon-yonghu
  • 下 拉
    #icon-xiala
  • 上传
    #icon-shangchuan1
  • 关 闭
    #icon-guanbi
  • 日期
    #icon-riqi
  • #icon-dui
  • 筛 选
    #icon-shaixuan
  • 删 除
    #icon-shanchu
  • 导入
    #icon-daoru
  • 导出
    #icon-daochu1
  • 更多
    #icon-gengduo
  • 编辑
    #icon-bianji-copy
  • 删除/数字面板编辑态
    #icon-chuyidong
  • 新增
    #icon-xinzeng
  • 删除筛选项
    #icon-chushaixuanxiang
  • 下载
    #icon-xiazai1-copy-copy
  • 下载
    #icon-xiazai
  • 下载
    #icon-xiazai1
  • 文件夹
    #icon-wenjianjia
  • 上传
    #icon-shangchuan
  • 查看
    #icon-chakan
  • 上传
    #icon-shangchuan-copy
  • 下载
    #icon-xiazai1-copy
  • 下载
    #icon-xiazai-copy
  • 查看
    #icon-chakan-copy
  • 文件夹
    #icon-wenjianjia-copy
  • 导出
    #icon-daochu
  • 星星
    #icon-xingxing
  • 会议记录
    #icon-214
  • 分开
    #icon-fenkai-copy
  • 待办提醒
    #icon-daibantixing
  • AK-MN消息2_fill
    #icon-mn_xiaoxi_fill
  • 首页
    #icon-shouye3
  • 爱生活-个人中心-头像
    #icon-touxiang
  • 头像(通用)
    #icon-touxiangtongyong
  • 头像修改
    #icon-touxiangxiugai
  • 折叠
    #icon-zhedie
  • 重置
    #icon-zhongzhi
  • 维修扳手
    #icon-weixiubanshou
  • 首页
    #icon-shouye
  • 数据分析
    #icon-data-analysis
  • 流程
    #icon-liucheng
  • 法律法规
    #icon-falvfagui
  • shouye
    #icon-shouye1
  • 搜索
    #icon-sousuo
  • 团队
    #icon-tuandui
  • shouye
    #icon-shouye2

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>