• 󰁊
    屏幕放大
    󰁊
  • 软件
    
  • 安全防护
    
  • key
    
  • 审核
    
  • QQ
    
  • 访客属性
    
  • 报警
    
  • 手机
    
  • 离线
    
  • 备份
    
  • 升级
    
  • 联系
    
  • mail
    
  • 加密信号
    
  • 聊天 copy 2
    
  • 桌面视频
    
  • 报表
    
  • 同事
    
  • 符号-级联选择
    
  • 还原
    
  • 加密文件夹
    
  • 软件
    
  • 桌面
    
  • 认证
    
  • 日志
    
  • 报警
    
  • 审核
    
  • 屏幕
    
  • 同事
    
  • 聊天
    
  • 自动备份
    
  • 设备接入
    
  • 合作
    
  • 终端
    
  • 网络安全设备监控
    
  • 防护方案
    
  • 网络安全管理
    
  • 桌面共享
    
  • 上网
    
  • 分级分类
    
  • 传输记录-01
    
  • 域名列表
    
  • 拔出U盘
    
  • 插入U盘
    
  • 资产
    
  • 网络安全
    
  • 对号
    
  • 文档加密
    
  • 日志
    
  • 
  • 备份
    
  • 审批
    
  • 报警
    
  • 同事
    
  • 耗材
    
  • 硬盘
    
  • U盘
    
  • 检测
    
  • 接入适配器
    
  • 接入适配器类型
    
  • 面板 桌面
    
  • 审核
    
  • 离线模式
    
  • 审批
    
  • 备份
    
  • 上班
    
  • Boss-老板-1
    
  • 备份
    
  • U盘
    
  • 剪切板
    
  • 小程序开发
    
  • 上网
    
  • 加密
    
  • 飞单订单
    
  • 飞单简介
    
  • 飞单选项
    
  • 聊天
    
  • 加密
    
  • 印花
    
  • 发送
    
  • 网关状态
    
  • 网站密码,密码,网络安全防护
    
  • 对号
    
  • 分发
    
  • 上网
    
  • 安全 保险箱 加密 贵重
    
  • 报警
    
  • 远程
    
  • 文件接入组件
    
  • 产业准入
    
  • 上班
    
  • 桌面
    
  • 屏幕
    
  • 去除水印
    
  • 日志
    
  • 屏幕
    
  • 桌面
    
  • 设备
    
  • 服务器
    
  • 同事
    
  • 桌面全屏 ICON
    
  • 知识产权
    
  • 网络安全风险
    
  • 软件
    
  • 软件
    
  • 自定义
    
  • 资产
    
  • 远程
    
  • 
  • 屏幕
    
  • 认证
    
  • 资产查询
    
  • 企业
    
  • 星途学堂-密码加入/好友加密验证
    
  • 分发
    
  • 服务
    
  • 隔离
    
  • 对号
    
  • 对号
    
  • 上班
    
  • 屏幕
    
  • 桌面
    
  • 发送
    
  • 敏感
    

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-pingmufangda
  • 软件
    .icon-ruanjian
  • 安全防护
    .icon-anquanfanghu
  • key
    .icon-key
  • 审核
    .icon-shenhe
  • QQ
    .icon-qq
  • 访客属性
    .icon-fangkeshuxing
  • 报警
    .icon-baojing
  • 手机
    .icon-shouji
  • 离线
    .icon-lixian
  • 备份
    .icon-group23copy
  • 升级
    .icon-update
  • 联系
    .icon-lianxi
  • mail
    .icon-mail
  • 加密信号
    .icon-wifi-lock
  • 聊天 copy 2
    .icon-liaotiancopy
  • 桌面视频
    .icon-zhuomianshipin
  • 报表
    .icon-baobiao
  • 同事
    .icon-tongshi
  • 符号-级联选择
    .icon-jilianxuanze
  • 还原
    .icon-huanyuan
  • 加密文件夹
    .icon-folder__easyi
  • 软件
    .icon-ruanjian1
  • 桌面
    .icon-zhuomian
  • 认证
    .icon-renzheng
  • 日志
    .icon-rizhi
  • 报警
    .icon-icon-life-alarm
  • 审核
    .icon-shenhe1
  • 屏幕
    .icon-pingmu
  • 同事
    .icon-tongshi1
  • 聊天
    .icon-liaotian
  • 自动备份
    .icon-zidongbeifen
  • 设备接入
    .icon-shebeijieru
  • 合作
    .icon-woshou
  • 终端
    .icon-zhongduan
  • 网络安全设备监控
    .icon-wangluoanquanshebeijiankong
  • 防护方案
    .icon-fanghufangan
  • 网络安全管理
    .icon-wangluoanquanguanli
  • 桌面共享
    .icon-zhuomiangongxiang
  • 上网
    .icon-shangwang
  • 分级分类
    .icon-fenjifenlei
  • 传输记录-01
    .icon-chuanshujilu-
  • 域名列表
    .icon-yumingliebiao
  • 拔出U盘
    .icon-bachuUpan
  • 插入U盘
    .icon-charuUpan
  • 资产
    .icon-zichan
  • 网络安全
    .icon-wangluoanquan
  • 对号
    .icon-duihao
  • 文档加密
    .icon-wendangjiami
  • 日志
    .icon-rizhi1
  • .icon-suo
  • 备份
    .icon-beifen
  • 审批
    .icon-shenpi
  • 报警
    .icon-baojing1
  • 同事
    .icon-tongshi2
  • 耗材
    .icon-haocai
  • 硬盘
    .icon-yingpan
  • U盘
    .icon-Upan--
  • 检测
    .icon-saomiaojiancechazhao
  • 接入适配器
    .icon-jierushipeiqi
  • 接入适配器类型
    .icon-jierushipeiqileixing
  • 面板 桌面
    .icon-desktop-panel
  • 审核
    .icon-shenhe2
  • 离线模式
    .icon-lixianmoshi
  • 审批
    .icon-shenpi1
  • 备份
    .icon-beifen1
  • 上班
    .icon-shangban
  • Boss-老板-1
    .icon-laoban
  • 备份
    .icon-beifen2
  • U盘
    .icon-Upan
  • 剪切板
    .icon-jianqieban
  • 小程序开发
    .icon-xiaochengxukaifa
  • 上网
    .icon-shangwang1
  • 加密
    .icon-jiami
  • 飞单订单
    .icon-feidandingdan
  • 飞单简介
    .icon-feidanjianjie
  • 飞单选项
    .icon-feidanxuanxiang
  • 聊天
    .icon-liaotian1
  • 加密
    .icon-jiami1
  • 印花
    .icon-yinhua
  • 发送
    .icon-fasong
  • 网关状态
    .icon-wangguanzhuangtai
  • 网站密码,密码,网络安全防护
    .icon-huabanfuben
  • 对号
    .icon-duihao1
  • 分发
    .icon-fenfa
  • 上网
    .icon-shangwang2
  • 安全 保险箱 加密 贵重
    .icon-myicon-
  • 报警
    .icon-baojing2
  • 远程
    .icon-yuancheng
  • 文件接入组件
    .icon-wenjianjieruzujian
  • 产业准入
    .icon-chanyezhunru
  • 上班
    .icon-shangban1
  • 桌面
    .icon-zhuomian1
  • 屏幕
    .icon-pingmu1
  • 去除水印
    .icon-quchushuiyin
  • 日志
    .icon-daily
  • 屏幕
    .icon-pingmu2
  • 桌面
    .icon-zhuomian2
  • 设备
    .icon-shebei
  • 服务器
    .icon-fuwuqi
  • 同事
    .icon-tongshi3
  • 桌面全屏 ICON
    .icon-zhuomianquanpingICON
  • 知识产权
    .icon-zhishichanquan
  • 网络安全风险
    .icon-wangluoanquanfengxian
  • 软件
    .icon-ruanjian2
  • 软件
    .icon-ruanjian3
  • 自定义
    .icon-18
  • 资产
    .icon-zichan1
  • 远程
    .icon-yuancheng1
  • .icon-suo1
  • 屏幕
    .icon-pingmu3
  • 认证
    .icon-renzheng1
  • 资产查询
    .icon-zichanchaxun
  • 企业
    .icon-icon_xinyong_xianxing_jijin-
  • 星途学堂-密码加入/好友加密验证
    .icon-xingtuxuetang-mimajiaru-
  • 分发
    .icon-transpond
  • 服务
    .icon-fuwu
  • 隔离
    .icon-geli
  • 对号
    .icon-dui
  • 对号
    .icon-duihao2
  • 上班
    .icon-shangban2
  • 屏幕
    .icon-pingmu4
  • 桌面
    .icon-zhuomian3
  • 发送
    .icon-fasong1
  • 敏感
    .icon-mingan

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-pingmufangda
  • 软件
    #icon-ruanjian
  • 安全防护
    #icon-anquanfanghu
  • key
    #icon-key
  • 审核
    #icon-shenhe
  • QQ
    #icon-qq
  • 访客属性
    #icon-fangkeshuxing
  • 报警
    #icon-baojing
  • 手机
    #icon-shouji
  • 离线
    #icon-lixian
  • 备份
    #icon-group23copy
  • 升级
    #icon-update
  • 联系
    #icon-lianxi
  • mail
    #icon-mail
  • 加密信号
    #icon-wifi-lock
  • 聊天 copy 2
    #icon-liaotiancopy
  • 桌面视频
    #icon-zhuomianshipin
  • 报表
    #icon-baobiao
  • 同事
    #icon-tongshi
  • 符号-级联选择
    #icon-jilianxuanze
  • 还原
    #icon-huanyuan
  • 加密文件夹
    #icon-folder__easyi
  • 软件
    #icon-ruanjian1
  • 桌面
    #icon-zhuomian
  • 认证
    #icon-renzheng
  • 日志
    #icon-rizhi
  • 报警
    #icon-icon-life-alarm
  • 审核
    #icon-shenhe1
  • 屏幕
    #icon-pingmu
  • 同事
    #icon-tongshi1
  • 聊天
    #icon-liaotian
  • 自动备份
    #icon-zidongbeifen
  • 设备接入
    #icon-shebeijieru
  • 合作
    #icon-woshou
  • 终端
    #icon-zhongduan
  • 网络安全设备监控
    #icon-wangluoanquanshebeijiankong
  • 防护方案
    #icon-fanghufangan
  • 网络安全管理
    #icon-wangluoanquanguanli
  • 桌面共享
    #icon-zhuomiangongxiang
  • 上网
    #icon-shangwang
  • 分级分类
    #icon-fenjifenlei
  • 传输记录-01
    #icon-chuanshujilu-
  • 域名列表
    #icon-yumingliebiao
  • 拔出U盘
    #icon-bachuUpan
  • 插入U盘
    #icon-charuUpan
  • 资产
    #icon-zichan
  • 网络安全
    #icon-wangluoanquan
  • 对号
    #icon-duihao
  • 文档加密
    #icon-wendangjiami
  • 日志
    #icon-rizhi1
  • #icon-suo
  • 备份
    #icon-beifen
  • 审批
    #icon-shenpi
  • 报警
    #icon-baojing1
  • 同事
    #icon-tongshi2
  • 耗材
    #icon-haocai
  • 硬盘
    #icon-yingpan
  • U盘
    #icon-Upan--
  • 检测
    #icon-saomiaojiancechazhao
  • 接入适配器
    #icon-jierushipeiqi
  • 接入适配器类型
    #icon-jierushipeiqileixing
  • 面板 桌面
    #icon-desktop-panel
  • 审核
    #icon-shenhe2
  • 离线模式
    #icon-lixianmoshi
  • 审批
    #icon-shenpi1
  • 备份
    #icon-beifen1
  • 上班
    #icon-shangban
  • Boss-老板-1
    #icon-laoban
  • 备份
    #icon-beifen2
  • U盘
    #icon-Upan
  • 剪切板
    #icon-jianqieban
  • 小程序开发
    #icon-xiaochengxukaifa
  • 上网
    #icon-shangwang1
  • 加密
    #icon-jiami
  • 飞单订单
    #icon-feidandingdan
  • 飞单简介
    #icon-feidanjianjie
  • 飞单选项
    #icon-feidanxuanxiang
  • 聊天
    #icon-liaotian1
  • 加密
    #icon-jiami1
  • 印花
    #icon-yinhua
  • 发送
    #icon-fasong
  • 网关状态
    #icon-wangguanzhuangtai
  • 网站密码,密码,网络安全防护
    #icon-huabanfuben
  • 对号
    #icon-duihao1
  • 分发
    #icon-fenfa
  • 上网
    #icon-shangwang2
  • 安全 保险箱 加密 贵重
    #icon-myicon-
  • 报警
    #icon-baojing2
  • 远程
    #icon-yuancheng
  • 文件接入组件
    #icon-wenjianjieruzujian
  • 产业准入
    #icon-chanyezhunru
  • 上班
    #icon-shangban1
  • 桌面
    #icon-zhuomian1
  • 屏幕
    #icon-pingmu1
  • 去除水印
    #icon-quchushuiyin
  • 日志
    #icon-daily
  • 屏幕
    #icon-pingmu2
  • 桌面
    #icon-zhuomian2
  • 设备
    #icon-shebei
  • 服务器
    #icon-fuwuqi
  • 同事
    #icon-tongshi3
  • 桌面全屏 ICON
    #icon-zhuomianquanpingICON
  • 知识产权
    #icon-zhishichanquan
  • 网络安全风险
    #icon-wangluoanquanfengxian
  • 软件
    #icon-ruanjian2
  • 软件
    #icon-ruanjian3
  • 自定义
    #icon-18
  • 资产
    #icon-zichan1
  • 远程
    #icon-yuancheng1
  • #icon-suo1
  • 屏幕
    #icon-pingmu3
  • 认证
    #icon-renzheng1
  • 资产查询
    #icon-zichanchaxun
  • 企业
    #icon-icon_xinyong_xianxing_jijin-
  • 星途学堂-密码加入/好友加密验证
    #icon-xingtuxuetang-mimajiaru-
  • 分发
    #icon-transpond
  • 服务
    #icon-fuwu
  • 隔离
    #icon-geli
  • 对号
    #icon-dui
  • 对号
    #icon-duihao2
  • 上班
    #icon-shangban2
  • 屏幕
    #icon-pingmu4
  • 桌面
    #icon-zhuomian3
  • 发送
    #icon-fasong1
  • 敏感
    #icon-mingan

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>