• 返回
    
  • 下载
    
  • 下载
    
  • 邮箱
    
  • 绑定手机
    
  • 手机
    
  • 52-手机
    
  • home
    
  • home
    
  • Kafka
    
  • 数据接入—Kafka集群
    
  • kafka
    
  • elasticsearch-Elasticsearch
    
  • 
    apachekafka
    
  • elasticsearch
    
  • 问题反馈
    
  • 问题反馈
    
  • 问题反馈
    
  • alikafka 消息队列Kafka
    
  • 项目查询-查看设备
    
  • elasticsearch Elasticsearch
    
  • 511统计_树图
    
  • 分享
    
  • 分享
    
  • 分享
    
  • 告警-紧急
    
  • 完成安全事件
    
  • eventbridge 消息事件总线
    
  • 
  • 设备关机
    
  • 好房拓 4.0.0 iconfont_短信
    
  • 业务参数
    
  • 列表
    
  • 编辑
    
  • 邮件
    
  • 社交钉钉
    
  • 字典管理
    
  • 图表
    
  • 钉钉
    
  • 短信
    
  • directmail 邮件推送
    
  • 设备设施
    
  • 通知
    
  • 日志
    
  • 触发器配置-灰
    
  • vcs 视觉计算服务
    
  • 设备
    
  • user-before
    
  • 科目维护图标
    
  • 会计科目维护
    
  • 成本查询
    
  • 成本数据管理
    
  • 基本数据
    
  • B-省市区
    
  • 组织机构
    
  • 按钮
    
  • 菜单
    
  • 问号
    
  • 垃圾桶
    
  • 重置密码
    
  • 设置
    
  • 中转
    
  • add
    
  • minus
    
  • password
    
  • 用户
    
  • 权限
    
  • 角色
    
  • 字典
    
  • 参数设置
    
  • 编辑
    
  • 用户权限
    
  • 分享
    
  • 授权
    
  • 左箭头
    
  • 左箭头
    

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

  • 返回
    .icon1
  • 下载
    .iconxiazai
  • 下载
    .icon11-04
  • 邮箱
    .iconyouxiang
  • 绑定手机
    .iconbangdingshouji
  • 手机
    .iconshouji
  • 52-手机
    .icon52-shouji
  • home
    .iconhome
  • home
    .iconhome2
  • Kafka
    .iconKafka
  • 数据接入—Kafka集群
    .iconshujujieruKafkajiqun
  • kafka
    .iconkafka
  • elasticsearch-Elasticsearch
    .iconelasticsearch-Elasticsearch
  • apachekafka
    .iconapachekafka
  • elasticsearch
    .iconelasticsearch
  • 问题反馈
    .iconwentifankui
  • 问题反馈
    .iconwentifankui1
  • 问题反馈
    .iconwentifankui2
  • alikafka 消息队列Kafka
    .iconalikafkaxiaoxiduilieKafka
  • 项目查询-查看设备
    .iconxiangmuchaxun-chakanshebei
  • elasticsearch Elasticsearch
    .iconelasticsearchElasticsearch
  • 511统计_树图
    .icon511tongji_shutu
  • 分享
    .iconfenxiang1
  • 分享
    .iconfenxiang2
  • 分享
    .iconfenxiang_2
  • 告警-紧急
    .iconNMStubiao-
  • 完成安全事件
    .iconwanchenganquanshijian
  • eventbridge 消息事件总线
    .iconeventbridgexiaoxishijianzongxian
  • .iconshu
  • 设备关机
    .iconshebeiguanji
  • 好房拓 4.0.0 iconfont_短信
    .iconhaofangtuo400iconfontduanxin
  • 业务参数
    .iconnavicon-ywcs
  • 列表
    .iconliebiao
  • 编辑
    .iconbianji
  • 邮件
    .iconyoujian
  • 社交钉钉
    .iconshejiaodingding
  • 字典管理
    .iconzidianguanli
  • 图表
    .icontubiao
  • 钉钉
    .icondingding
  • 短信
    .iconduanxin
  • directmail 邮件推送
    .icondirectmailyoujiantuisong
  • 设备设施
    .iconshebeisheshi
  • 通知
    .icontongzhi
  • 日志
    .iconrizhi
  • 触发器配置-灰
    .iconchufaqipeizhi-hui
  • vcs 视觉计算服务
    .iconvcsshijuejisuanfuwu
  • 设备
    .iconbar_icon_shebei
  • user-before
    .iconuser-before
  • 科目维护图标
    .iconkemuweihutubiao
  • 会计科目维护
    .iconaccounting-subjects
  • 成本查询
    .iconRectangleCopy
  • 成本数据管理
    .iconchengbenshujuguanli
  • 基本数据
    .iconjibenshuju
  • B-省市区
    .iconB-shengshiqu
  • 组织机构
    .iconzuzhijigou
  • 按钮
    .iconanniu
  • 菜单
    .iconcaidan2
  • 问号
    .iconwenhao
  • 垃圾桶
    .iconlajitong
  • 重置密码
    .iconzhongzhimima
  • 设置
    .iconshezhi
  • 中转
    .iconzhongzhuan
  • add
    .iconadd
  • minus
    .iconminus
  • password
    .iconpassword
  • 用户
    .iconyonghu
  • 权限
    .iconquanxian
  • 角色
    .iconjiaose1
  • 字典
    .iconzidian
  • 参数设置
    .iconcssz
  • 编辑
    .iconbianji1
  • 用户权限
    .icondfzq-
  • 分享
    .iconfenxiang
  • 授权
    .iconshouquan1
  • 左箭头
    .iconjiantou
  • 左箭头
    .iconjiantou-copy-copy

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

  • 返回
    #icon1
  • 下载
    #iconxiazai
  • 下载
    #icon11-04
  • 邮箱
    #iconyouxiang
  • 绑定手机
    #iconbangdingshouji
  • 手机
    #iconshouji
  • 52-手机
    #icon52-shouji
  • home
    #iconhome
  • home
    #iconhome2
  • Kafka
    #iconKafka
  • 数据接入—Kafka集群
    #iconshujujieruKafkajiqun
  • kafka
    #iconkafka
  • elasticsearch-Elasticsearch
    #iconelasticsearch-Elasticsearch
  • apachekafka
    #iconapachekafka
  • elasticsearch
    #iconelasticsearch
  • 问题反馈
    #iconwentifankui
  • 问题反馈
    #iconwentifankui1
  • 问题反馈
    #iconwentifankui2
  • alikafka 消息队列Kafka
    #iconalikafkaxiaoxiduilieKafka
  • 项目查询-查看设备
    #iconxiangmuchaxun-chakanshebei
  • elasticsearch Elasticsearch
    #iconelasticsearchElasticsearch
  • 511统计_树图
    #icon511tongji_shutu
  • 分享
    #iconfenxiang1
  • 分享
    #iconfenxiang2
  • 分享
    #iconfenxiang_2
  • 告警-紧急
    #iconNMStubiao-
  • 完成安全事件
    #iconwanchenganquanshijian
  • eventbridge 消息事件总线
    #iconeventbridgexiaoxishijianzongxian
  • #iconshu
  • 设备关机
    #iconshebeiguanji
  • 好房拓 4.0.0 iconfont_短信
    #iconhaofangtuo400iconfontduanxin
  • 业务参数
    #iconnavicon-ywcs
  • 列表
    #iconliebiao
  • 编辑
    #iconbianji
  • 邮件
    #iconyoujian
  • 社交钉钉
    #iconshejiaodingding
  • 字典管理
    #iconzidianguanli
  • 图表
    #icontubiao
  • 钉钉
    #icondingding
  • 短信
    #iconduanxin
  • directmail 邮件推送
    #icondirectmailyoujiantuisong
  • 设备设施
    #iconshebeisheshi
  • 通知
    #icontongzhi
  • 日志
    #iconrizhi
  • 触发器配置-灰
    #iconchufaqipeizhi-hui
  • vcs 视觉计算服务
    #iconvcsshijuejisuanfuwu
  • 设备
    #iconbar_icon_shebei
  • user-before
    #iconuser-before
  • 科目维护图标
    #iconkemuweihutubiao
  • 会计科目维护
    #iconaccounting-subjects
  • 成本查询
    #iconRectangleCopy
  • 成本数据管理
    #iconchengbenshujuguanli
  • 基本数据
    #iconjibenshuju
  • B-省市区
    #iconB-shengshiqu
  • 组织机构
    #iconzuzhijigou
  • 按钮
    #iconanniu
  • 菜单
    #iconcaidan2
  • 问号
    #iconwenhao
  • 垃圾桶
    #iconlajitong
  • 重置密码
    #iconzhongzhimima
  • 设置
    #iconshezhi
  • 中转
    #iconzhongzhuan
  • add
    #iconadd
  • minus
    #iconminus
  • password
    #iconpassword
  • 用户
    #iconyonghu
  • 权限
    #iconquanxian
  • 角色
    #iconjiaose1
  • 字典
    #iconzidian
  • 参数设置
    #iconcssz
  • 编辑
    #iconbianji1
  • 用户权限
    #icondfzq-
  • 分享
    #iconfenxiang
  • 授权
    #iconshouquan1
  • 左箭头
    #iconjiantou
  • 左箭头
    #iconjiantou-copy-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>