• 导出
    
  • 导入
    
  • 对比图谱
    
  • 折线
    
  • 堆叠图
    
  • 堆叠图
    
  • 文件
    
  • 字典项
    
  • API网关
    
  • database
    
  • 百分比
    
  • 文件
    
  • 
  • 
  • 复制
    
  • 中国地图
    
  • 表格
    
  • 个性装扮
    
  • 仪表盘-抄表
    
  • 南丁格尔玫瑰图
    
  • 展 开
    
  • excel
    
  • 保存
    
  • 关 闭
    
  • pdf
    
  • 复制
    
  • 020空心饼图
    
  • 时间
    
  • 保存
    
  • 图片
    
  • 柱状图
    
  • 超链接
    
  • 文本
    
  • 视频
    
  • 框架
    
  • 预览
    
  • 横向文字
    
  • 图表 _饼图
    
  • 漏斗图
    
  • 图表 折线图
    
  • 柱线图
    
  • 图片
    
  • 仪表盘
    
  • 返回
    
  • 下载
    
  • 下载
    
  • 邮箱
    
  • 绑定手机
    
  • 手机
    
  • 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 是字体在网页端最原始的应用方式,特点是:

  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 默认情况下不支持多色,直接添加多色图标会自动去色。

注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)

Unicode 使用步骤如下:

第一步:拷贝项目下面生成的 @font-face

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1629797734566') format('woff2'),
       url('iconfont.woff?t=1629797734566') format('woff'),
       url('iconfont.ttf?t=1629797734566') format('truetype');
}

第二步:定义使用 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"。

  • 导出
    .icondaochu
  • 导入
    .icondaoru
  • 对比图谱
    .iconduibitupu
  • 折线
    .iconzhexian
  • 堆叠图
    .iconbianzu23
  • 堆叠图
    .iconduidietu
  • 文件
    .iconfill_folder
  • 字典项
    .iconzidianxiang
  • API网关
    .iconAPIwangguan
  • database
    .icondatabase
  • 百分比
    .iconbaifenbi
  • 文件
    .iconfolder-o
  • .iconjinlingyingcaiwangtubiao01
  • .iconleft-copy
  • 复制
    .iconfuzhi1
  • 中国地图
    .iconzhongguoditu
  • 表格
    .iconbiaoge
  • 个性装扮
    .icongexingzhuangban
  • 仪表盘-抄表
    .iconyibiaopan-chaobiao
  • 南丁格尔玫瑰图
    .iconnandinggeermeiguitu
  • 展 开
    .iconzhankai
  • excel
    .iconexcel
  • 保存
    .iconbaocun
  • 关 闭
    .iconguanbi
  • pdf
    .iconpdf
  • 复制
    .iconfuzhi
  • 020空心饼图
    .icon020kongxinbingtu
  • 时间
    .iconshijian
  • 保存
    .iconsave
  • 图片
    .icontupian
  • 柱状图
    .iconzhuzhuangtu
  • 超链接
    .iconchaolianjie
  • 文本
    .iconziyuan
  • 视频
    .iconshipin
  • 框架
    .iconkuangjia
  • 预览
    .iconyulan
  • 横向文字
    .iconhengxiangwenzi
  • 图表 _饼图
    .iconicon_tubiao_bingtu
  • 漏斗图
    .iconloudoutu
  • 图表 折线图
    .icontubiaozhexiantu
  • 柱线图
    .iconzhuxiantu
  • 图片
    .icontupian1
  • 仪表盘
    .iconyibiaopan
  • 返回
    .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 使用方式相比,具有如下特点:

  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。

使用步骤如下:

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

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

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

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

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

  • 导出
    #icondaochu
  • 导入
    #icondaoru
  • 对比图谱
    #iconduibitupu
  • 折线
    #iconzhexian
  • 堆叠图
    #iconbianzu23
  • 堆叠图
    #iconduidietu
  • 文件
    #iconfill_folder
  • 字典项
    #iconzidianxiang
  • API网关
    #iconAPIwangguan
  • database
    #icondatabase
  • 百分比
    #iconbaifenbi
  • 文件
    #iconfolder-o
  • #iconjinlingyingcaiwangtubiao01
  • #iconleft-copy
  • 复制
    #iconfuzhi1
  • 中国地图
    #iconzhongguoditu
  • 表格
    #iconbiaoge
  • 个性装扮
    #icongexingzhuangban
  • 仪表盘-抄表
    #iconyibiaopan-chaobiao
  • 南丁格尔玫瑰图
    #iconnandinggeermeiguitu
  • 展 开
    #iconzhankai
  • excel
    #iconexcel
  • 保存
    #iconbaocun
  • 关 闭
    #iconguanbi
  • pdf
    #iconpdf
  • 复制
    #iconfuzhi
  • 020空心饼图
    #icon020kongxinbingtu
  • 时间
    #iconshijian
  • 保存
    #iconsave
  • 图片
    #icontupian
  • 柱状图
    #iconzhuzhuangtu
  • 超链接
    #iconchaolianjie
  • 文本
    #iconziyuan
  • 视频
    #iconshipin
  • 框架
    #iconkuangjia
  • 预览
    #iconyulan
  • 横向文字
    #iconhengxiangwenzi
  • 图表 _饼图
    #iconicon_tubiao_bingtu
  • 漏斗图
    #iconloudoutu
  • 图表 折线图
    #icontubiaozhexiantu
  • 柱线图
    #iconzhuxiantu
  • 图片
    #icontupian1
  • 仪表盘
    #iconyibiaopan
  • 返回
    #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>