• 授权
    
  • 许可
    
  • 菜单类型-目录
    
  • 菜单类型-iframe
    
  • 菜单类型-菜单
    
  • 菜单类型-外部链接
    
  • 导航菜单
    
  • 聚焦+
    
  • 聚焦-
    
  • 光圈重置
    
  • 缩小
    
  • 移动-右
    
  • 移动-右上
    
  • 移动-右下
    
  • 光圈 缩小
    
  • 移动-左
    
  • 光圈 放大
    
  • 移动-上
    
  • 移动-左下
    
  • 移动-左上
    
  • 移动-下
    
  • 视频
    
  • 初始化中
    
  • 放大
    
  • 3*3
    
  • 2*2
    
  • 1*1
    
  • 声音
    
  • 全屏
    
  • 拍照片
    
  • 录像
    
  • caret-right
    
  • caret-left
    
  • caret-down
    
  • caret-up
    
  • edit
    
  • 下发
    
  • 撤销
    
  • 重做
    
  • 清空
    
  • 刷新
    
  • 指派
    
  • 详情
    
  • 查看
    
  • 用户
    
  • 操作-退出
    
  • 切换
    
  • 角色类型
    
  • 目录、导航
    
  • 数据目录
    
  • 上传
    
  • 下载
    
  • 减号-fill
    
  • 减号
    
  • warn_fill
    
  • warn
    
  • question_fill
    
  • question
    
  • 设置
    
  • 删除
    
  • 设置
    
  • 搜索
    
  • 关闭1
    
  • 关闭2-fill
    
  • 关闭2
    
  • 加号
    
  • 加号1
    
  • 加号2-fill
    
  • 减号
    
  • 提示-fill
    
  • 提示
    
  • 选择
    
  • 圆形选中-fill
    
  • 圆形选中
    
  • 向上2
    
  • 向下2
    
  • 向右1
    
  • 向左1
    
  • 用户
    
  • 密码
    

Unicode 引用


Unicode 是字体在网页端最原始的应用方式,特点是:

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'specifont';
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1734662262881') format('woff'),
       url('iconfont.ttf?t=1734662262881') format('truetype'),
       url('iconfont.svg?t=1734662262881#specifont') format('svg');
}

第二步:定义使用 iconfont 的样式

.specifont {
  font-family: "specifont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步:挑选相应图标并获取字体编码,应用于页面

<span class="specifont">&#x33;</span>

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

  • 授权
    .speci-authorize
  • 许可
    .speci-xuke
  • 菜单类型-目录
    .speci-egor-fold
  • 菜单类型-iframe
    .speci-egor-iframe
  • 菜单类型-菜单
    .speci-egor-menu
  • 菜单类型-外部链接
    .speci-egor-link
  • 导航菜单
    .speci-category
  • 聚焦+
    .speci-video-focus-p
  • 聚焦-
    .speci-video-focus-m
  • 光圈重置
    .speci-video-aperture
  • 缩小
    .speci-video-zoom-out
  • 移动-右
    .speci-video-right
  • 移动-右上
    .speci-video-right-t
  • 移动-右下
    .speci-video-right-b
  • 光圈 缩小
    .speci-video-zoom-out-a
  • 移动-左
    .speci-video-left
  • 光圈 放大
    .speci-video-zoom-in-a
  • 移动-上
    .speci-speci-video-top
  • 移动-左下
    .speci-video-left-b
  • 移动-左上
    .speci-video-left-t
  • 移动-下
    .speci-video-bottom
  • 视频
    .speci-shipin
  • 初始化中
    .speci-video-reset
  • 放大
    .speci-video-zoom-in
  • 3*3
    .speci-grid-3x3
  • 2*2
    .speci-grid-2x2
  • 1*1
    .speci-grid-1x1
  • 声音
    .speci-video-voice
  • 全屏
    .speci-video-full
  • 拍照片
    .speci-video-camera
  • 录像
    .speci-video-tape
  • caret-right
    .speci-caret-right
  • caret-left
    .speci-caret-left
  • caret-down
    .speci-caret-down
  • caret-up
    .speci-caret-up
  • edit
    .speci-edit
  • 下发
    .speci-issue
  • 撤销
    .speci-redo
  • 重做
    .speci-revoke
  • 清空
    .speci-clean
  • 刷新
    .speci-refresh
  • 指派
    .speci-assign
  • 详情
    .speci-detail
  • 查看
    .speci-eye
  • 用户
    .speci-user-o
  • 操作-退出
    .speci-exit
  • 切换
    .speci-exchange
  • 角色类型
    .speci-role-ex
  • 目录、导航
    .speci-menu
  • 数据目录
    .speci-folder
  • 上传
    .speci-upload
  • 下载
    .speci-download
  • 减号-fill
    .speci-minus-fill
  • 减号
    .speci-minus-o
  • warn_fill
    .speci-warn-fill
  • warn
    .speci-warn
  • question_fill
    .speci-question-fill
  • question
    .speci-question
  • 设置
    .speci-setting-fill
  • 删除
    .speci-delete
  • 设置
    .speci-setting
  • 搜索
    .speci-search
  • 关闭1
    .speci-close
  • 关闭2-fill
    .speci-close-fill
  • 关闭2
    .speci-close-o
  • 加号
    .speci-plus-o
  • 加号1
    .speci-plus
  • 加号2-fill
    .speci-plus-fill
  • 减号
    .speci-minus
  • 提示-fill
    .speci-info-fill
  • 提示
    .speci-info
  • 选择
    .speci-check-o
  • 圆形选中-fill
    .speci-check-fill
  • 圆形选中
    .speci-check
  • 向上2
    .speci-up
  • 向下2
    .speci-down
  • 向右1
    .speci-right
  • 向左1
    .speci-left
  • 用户
    .speci-user
  • 密码
    .speci-password

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="specifont speci-xxx"></span>

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

  • 授权
    #speci-authorize
  • 许可
    #speci-xuke
  • 菜单类型-目录
    #speci-egor-fold
  • 菜单类型-iframe
    #speci-egor-iframe
  • 菜单类型-菜单
    #speci-egor-menu
  • 菜单类型-外部链接
    #speci-egor-link
  • 导航菜单
    #speci-category
  • 聚焦+
    #speci-video-focus-p
  • 聚焦-
    #speci-video-focus-m
  • 光圈重置
    #speci-video-aperture
  • 缩小
    #speci-video-zoom-out
  • 移动-右
    #speci-video-right
  • 移动-右上
    #speci-video-right-t
  • 移动-右下
    #speci-video-right-b
  • 光圈 缩小
    #speci-video-zoom-out-a
  • 移动-左
    #speci-video-left
  • 光圈 放大
    #speci-video-zoom-in-a
  • 移动-上
    #speci-speci-video-top
  • 移动-左下
    #speci-video-left-b
  • 移动-左上
    #speci-video-left-t
  • 移动-下
    #speci-video-bottom
  • 视频
    #speci-shipin
  • 初始化中
    #speci-video-reset
  • 放大
    #speci-video-zoom-in
  • 3*3
    #speci-grid-3x3
  • 2*2
    #speci-grid-2x2
  • 1*1
    #speci-grid-1x1
  • 声音
    #speci-video-voice
  • 全屏
    #speci-video-full
  • 拍照片
    #speci-video-camera
  • 录像
    #speci-video-tape
  • caret-right
    #speci-caret-right
  • caret-left
    #speci-caret-left
  • caret-down
    #speci-caret-down
  • caret-up
    #speci-caret-up
  • edit
    #speci-edit
  • 下发
    #speci-issue
  • 撤销
    #speci-redo
  • 重做
    #speci-revoke
  • 清空
    #speci-clean
  • 刷新
    #speci-refresh
  • 指派
    #speci-assign
  • 详情
    #speci-detail
  • 查看
    #speci-eye
  • 用户
    #speci-user-o
  • 操作-退出
    #speci-exit
  • 切换
    #speci-exchange
  • 角色类型
    #speci-role-ex
  • 目录、导航
    #speci-menu
  • 数据目录
    #speci-folder
  • 上传
    #speci-upload
  • 下载
    #speci-download
  • 减号-fill
    #speci-minus-fill
  • 减号
    #speci-minus-o
  • warn_fill
    #speci-warn-fill
  • warn
    #speci-warn
  • question_fill
    #speci-question-fill
  • question
    #speci-question
  • 设置
    #speci-setting-fill
  • 删除
    #speci-delete
  • 设置
    #speci-setting
  • 搜索
    #speci-search
  • 关闭1
    #speci-close
  • 关闭2-fill
    #speci-close-fill
  • 关闭2
    #speci-close-o
  • 加号
    #speci-plus-o
  • 加号1
    #speci-plus
  • 加号2-fill
    #speci-plus-fill
  • 减号
    #speci-minus
  • 提示-fill
    #speci-info-fill
  • 提示
    #speci-info
  • 选择
    #speci-check-o
  • 圆形选中-fill
    #speci-check-fill
  • 圆形选中
    #speci-check
  • 向上2
    #speci-up
  • 向下2
    #speci-down
  • 向右1
    #speci-right
  • 向左1
    #speci-left
  • 用户
    #speci-user
  • 密码
    #speci-password

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>