• 引擎列表
    
  • 测试表单
    
  • 测试流程
    
  • 第三方界面
    
  • -rbac-unbind
    
  • 1:1 右@2x
    
  • 1:n 右@2x
    
  • 1 右@2x
    
  • n 右@2x
    
  • 修改 (小卡片)@1x
    
  • engine-rbac-usersGroup
    
  • 勾选 copy@2x
    
  • 勾选(空) copy@2x
    
  • engine-rbac-buttonManageController
    
  • -rbac-switch-open
    
  • -rbac-switch-close
    
  • positionIcon
    
  • engine-icon-rbac-dragger
    
  • engine-icon-rbac-toggleStyle
    
  • engine-icon-rbac-connectCard
    
  • engine-icon-rbac-close
    
  • engine-icon-rbac-add
    
  • engine-icon-rbac-addform
    
  • engine-icon-rbac-triangle
    
  • engine-icon-rbac-edit
    
  • engine-icon-rbac-refresh
    
  • engine-icon-rbac-access
    
  • engine-icon-rbac-forbidden
    
  • engine-icon-rbac-userGroup
    
  • engine-icon-rbac-moreOne
    
  • engine-icon-rbac-clickIconActive
    
  • engine-icon-rbac-finance
    
  • engine-icon-rbac-editor
    
  • engine-icon-rbac-save
    
  • engine-icon-rbac-trash
    
  • engine-icon-rbac-clickIcon
    
  • engine-icon-rbac-search
    
  • engine-icon-rbac-addIcon
    
  • engine-icon-rbac-tree
    
  • engine-icon-rbac-expand
    
  • engine-icon-rbac-formInfo
    
  • control
    
  • 最小化@1.5x
    
  • i灰色@1.5x
    
  • 预览蓝色@1.5x
    
  • x 删除@1.5x
    
  • 数字输入框@1.5x
    
  • 工具栏 格式刷@1.5x
    
  • 工具栏 粘贴@1.5x
    
  • b@1.5x
    
  • a 一@1.5x
    
  • r@1.5x
    
  • a 加@1.5x
    
  • i@1.5x
    
  • u@1.5x
    
  • a@1.5x
    
  • 工具栏 图标 1@1.5x
    
  • 工具栏 图标 2@1.5x
    
  • 工具栏 图标 3@1.5x
    
  • 工具栏 图标 4@1.5x
    
  • 工具栏 图标 5@1.5x
    
  • 工具栏 图标 6@1.5x
    
  • 工具栏 图标 7@1.5x
    
  • 工具栏 图标 8@1.5x
    
  • 工具栏 图标 9@1.5x
    
  • 工具栏 图标 10@1.5x
    
  • 上@1.5x
    
  • 下@1.5x
    
  • fanhui
    
  • gengduo
    
  • 二维码
    
  • 禁止编辑
    
  • 设置-实色
    
  • help
    
  • requires
    
  • interaction
    
  • copy
    
  • radio
    
  • edit
    
  • insert
    
  • 弹框 删除 白色@1.5x
    
  • property
    
  • paste-select
    
  • event
    
  • import
    
  • source
    
  • style1
    
  • style2
    
  • select
    
  • read-only
    
  • pen
    
  • hidden
    
  • style3
    
  • save
    
  • single-row
    
  • more
    
  • multi-line
    
  • copy-frame
    
  • split
    
  • 合并 蓝色@1.5x
    
  • 工具栏 剪切@1.5x
    
  • 扫 蓝色@1.5x
    
  • 日期选择2@1.5x
    
  • 日期选择 @1.5x
    
  • 右箭头 灰色@1.5x
    
  • 下拉箭头 灰色@1.5x
    
  • 最大化@1.5x
    
  • 文本@1.5x
    
  • 开始
    
  • 结束
    
  • 全屏
    
  • 缩小
    
  • 放大
    
  • 缩小
    
  • rollback
    
  • forward
    
  • guanbi
    
  • tijiaoquerenwenjian
    
  • zancun
    
  • huanyuan
    
  • iconfonts
    
  • icon-address-book
    
  • icon_xiazai
    
  • icontextwidth
    
  • upload
    
  • picture-o
    
  • desktop
    
  • icon_question_circle
    
  • 函数
    
  • 列表
    
  • 数据视图配置
    
  • 套用流程模板
    
  • 样式
    
  • 表单引擎
    
  • list-alt
    
  • 返回
    
  • 更多
    
  • 表单模板
    
  • 数据字典
    
  • 账户管理
    
  • 监听器
    
  • 流程引擎
    
  • print
    
  • 角色管理
    
  • 可用
    
  • 定时任务
    
  • 菜单管理
    
  • 抄送 (1)
    
  • 综合页面列表配置
    
  • 岗位管理
    
  • 导出
    
  • commenting-o
    
  • 用户与权限
    
  • 组织机构
    
  • check
    
  • search close
    
  • 已办
    
  • 参数管理
    
  • 地址管理
    
  • 数据源
    
  • 首页-选中
    
  • 用户组
    
  • refresh
    
  • wpforms
    
  • clone
    
  • 待办
    
  • 流程实例
    
  • 发起
    
  • 数据源
    
  • 基础-工具
    
  • 数据表
    
  • 数据视图管理
    
  • http
    
  • 编码规则
    
  • -_表单实例
    
  • 功能按钮管理
    
  • table
    
  • 迁移
    
  • tags
    
  • tree-o
    
  • check-circle-o
    
  • check-square-o
    
  • header
    
  • sort-numeric-asc
    
  • calendar
    
  • zui28x28icon35
    
  • Mobile
    

Unicode 引用


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

  • 兼容性最好,支持 IE6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'engineIconFont';
  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#engineIconFont') format('svg');
}

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

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

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

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

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

  • 引擎列表
    .engine-pageflow-list
  • 测试表单
    .engine-pageflow-form
  • 测试流程
    .engine-pageflow-flow
  • 第三方界面
    .engine-pageflow-thirdparty
  • -rbac-unbind
    .engine-rbac-unbind
  • 1:1 右@2x
    .engine-rbac-one-one
  • 1:n 右@2x
    .engine-rbac-one-more
  • 1 右@2x
    .engine-rbac-more-one
  • n 右@2x
    .engine-rbac-more-more
  • 修改 (小卡片)@1x
    .engine-rbac-edit
  • engine-rbac-usersGroup
    .engine-rbac-usersGroup
  • 勾选 copy@2x
    .engine-rbac-checked
  • 勾选(空) copy@2x
    .engine-rbac-check
  • engine-rbac-buttonManageController
    .engine-rbac-buttonManageController
  • -rbac-switch-open
    .engine-rbac-switch-open
  • -rbac-switch-close
    .engine-rbac-switch-close
  • positionIcon
    .engine-rbac-positionIcon
  • engine-icon-rbac-dragger
    .engine-rbac-dragger
  • engine-icon-rbac-toggleStyle
    .engine-rbac-toggleStyle
  • engine-icon-rbac-connectCard
    .engine-rbac-connectCard
  • engine-icon-rbac-close
    .engine-rbac-close
  • engine-icon-rbac-add
    .engine-rbac-add
  • engine-icon-rbac-addform
    .engine-rbac-addform
  • engine-icon-rbac-triangle
    .engine-rbac-triangle
  • engine-icon-rbac-edit
    .engine-rbac-editPencil
  • engine-icon-rbac-refresh
    .engine-rbac-refresh
  • engine-icon-rbac-access
    .engine-rbac-access
  • engine-icon-rbac-forbidden
    .engine-rbac-forbidden
  • engine-icon-rbac-userGroup
    .engine-rbac-userGroup
  • engine-icon-rbac-moreOne
    .engine-rbac-moreOne
  • engine-icon-rbac-clickIconActive
    .engine-rbac-clickIconActive
  • engine-icon-rbac-finance
    .engine-rbac-finance
  • engine-icon-rbac-editor
    .engine-rbac-editor
  • engine-icon-rbac-save
    .engine-rbac-save
  • engine-icon-rbac-trash
    .engine-rbac-trash
  • engine-icon-rbac-clickIcon
    .engine-rbac-clickIcon
  • engine-icon-rbac-search
    .engine-rbac-search
  • engine-icon-rbac-addIcon
    .engine-rbac-addIcon
  • engine-icon-rbac-tree
    .engine-rbac-tree
  • engine-icon-rbac-expand
    .engine-rbac-expand
  • engine-icon-rbac-formInfo
    .engine-rbac-formInfo
  • control
    .engine-editor-control
  • 最小化@1.5x
    .engine-editor-min-circle
  • i灰色@1.5x
    .engine-editor-italic
  • 预览蓝色@1.5x
    .engine-editor-preview
  • x 删除@1.5x
    .engine-custom-delete
  • 数字输入框@1.5x
    .engine-editor-input-number
  • 工具栏 格式刷@1.5x
    .engine-editor-copystyle
  • 工具栏 粘贴@1.5x
    .engine-editor-pastecolor
  • b@1.5x
    .engine-editor-fontbold
  • a 一@1.5x
    .engine-editor-reducefontsize
  • r@1.5x
    .engine-editor-remote
  • a 加@1.5x
    .engine-editor-addfontsize
  • i@1.5x
    .engine-editor-fontstyleitalic
  • u@1.5x
    .engine-editor-underline
  • a@1.5x
    .engine-editor-color
  • 工具栏 图标 1@1.5x
    .engine-editor-flexstart
  • 工具栏 图标 2@1.5x
    .engine-editor-flexcenter
  • 工具栏 图标 3@1.5x
    .engine-editor-flexbottom
  • 工具栏 图标 4@1.5x
    .engine-editor-textleft
  • 工具栏 图标 5@1.5x
    .engine-editor-textcenter
  • 工具栏 图标 6@1.5x
    .engine-editor-textright
  • 工具栏 图标 7@1.5x
    .engine-editor-justifycenter
  • 工具栏 图标 8@1.5x
    .engine-editor-addindent
  • 工具栏 图标 9@1.5x
    .engine-editor-minusindent
  • 工具栏 图标 10@1.5x
    .engine-editor-justifyaround
  • 上@1.5x
    .engine-editor-padding-top
  • 下@1.5x
    .engine-editor-paddingbottom
  • fanhui
    .engine-custom-prev
  • gengduo
    .engine-custom-next
  • 二维码
    .engine-editor-ercode
  • 禁止编辑
    .engine-editor-disable-editor
  • 设置-实色
    .engine-editor-setting
  • help
    .engine-custom-help
  • requires
    .engine-editor-requires
  • interaction
    .engine-editor-interaction
  • copy
    .engine-editor-copy
  • radio
    .engine-editor-radio
  • edit
    .engine-editor-edit
  • insert
    .engine-editor-insert
  • 弹框 删除 白色@1.5x
    .engine-editor-discard
  • property
    .engine-editor-property
  • paste-select
    .engine-editor-paste-select
  • event
    .engine-editor-event
  • import
    .engine-editor-download
  • source
    .engine-editor-chart
  • style1
    .engine-editor-style1
  • style2
    .engine-editor-style2
  • select
    .engine-editor-select
  • read-only
    .engine-editor-read-only
  • pen
    .engine-editor-pen
  • hidden
    .engine-editor-hidden
  • style3
    .engine-editor-style3
  • save
    .engine-editor-save
  • single-row
    .engine-editor-single-row
  • more
    .engine-custom-more
  • multi-line
    .engine-editor-multi-line
  • copy-frame
    .engine-editor-copy-frame
  • split
    .engine-editor-split
  • 合并 蓝色@1.5x
    .engine-editor-combine
  • 工具栏 剪切@1.5x
    .engine-editor-cut
  • 扫 蓝色@1.5x
    .engine-editor-brush
  • 日期选择2@1.5x
    .engine-editor-date-select
  • 日期选择 @1.5x
    .engine-editor-date
  • 右箭头 灰色@1.5x
    .engine-editor-arrows-right
  • 下拉箭头 灰色@1.5x
    .engine-editor-arrows-down
  • 最大化@1.5x
    .engine-editor-min
  • 文本@1.5x
    .engine-editor-text
  • 开始
    .engine-flow-start
  • 结束
    .engine-flow-end
  • 全屏
    .engine-flow-full-screen
  • 缩小
    .engine-flow-narrow
  • 放大
    .engine-flow-magnify
  • 缩小
    .engine-flow-shrink
  • rollback
    .engine-flow-rollback
  • forward
    .engine-flow-forward
  • guanbi
    .engine-flow-close
  • tijiaoquerenwenjian
    .engine-flow-submit
  • zancun
    .engine-flow-save
  • huanyuan
    .engine-flow-restore
  • iconfonts
    .engine-custom-fonts
  • icon-address-book
    .engine-editor-address-book
  • icon_xiazai
    .engine-custom-download
  • icontextwidth
    .engine-editor-text-width
  • upload
    .engine-editor-upload
  • picture-o
    .engine-editor-picture
  • desktop
    .engine-custom-desktop
  • icon_question_circle
    .engine-custom-question-circle
  • 函数
    .engine-menu-func
  • 列表
    .engine-menu-list
  • 数据视图配置
    .engine-menu-dataview-setting
  • 套用流程模板
    .engine-menu-process-temp
  • 样式
    .engine-menu-style
  • 表单引擎
    .engine-menu-formengine
  • list-alt
    .engine-menu-list-alt
  • 返回
    .engine-editor-pre
  • 更多
    .engine-editor-next
  • 表单模板
    .engine-menu-formtemp
  • 数据字典
    .engine-menu-dict
  • 账户管理
    .engine-menu-accout
  • 监听器
    .engine-menu-monitor
  • 流程引擎
    .engine-menu-process-engine
  • print
    .engine-editor-print
  • 角色管理
    .engine-menu-role-manage
  • 可用
    .engine-menu-useable
  • 定时任务
    .engine-menu-timer
  • 菜单管理
    .engine-menu-manage
  • 抄送 (1)
    .engine-menu-copy
  • 综合页面列表配置
    .engine-menu-list-temp
  • 岗位管理
    .engine-menu-position
  • 导出
    .engine-menu-export
  • commenting-o
    .engine-editor-comment
  • 用户与权限
    .engine-menu-user-authority
  • 组织机构
    .engine-menu-org
  • check
    .engine-editor-check
  • search close
    .engine-editor-close
  • 已办
    .engine-menu-done
  • 参数管理
    .engine-menu-paramsmanage
  • 地址管理
    .engine-menu-addressmanage
  • 数据源
    .engine-menu-datasource
  • 首页-选中
    .engine-menu-home
  • 用户组
    .engine-menu-usergroup
  • refresh
    .engine-editor-refresh
  • wpforms
    .engine-editor-wpforms
  • clone
    .engine-editor-clone
  • 待办
    .engine-menu-waiting
  • 流程实例
    .engine-menu-flowinstance
  • 发起
    .engine-menu-launch
  • 数据源
    .engine-menu-datasourcesetting
  • 基础-工具
    .engine-menu-basetool
  • 数据表
    .engine-menu-datatable
  • 数据视图管理
    .engine-menu-dataviewManage
  • http
    .engine-menu-http
  • 编码规则
    .engine-menu-codeRule
  • -_表单实例
    .engine-menu-forminstance
  • 功能按钮管理
    .engine-menu-btnmanage
  • table
    .engine-editor-table
  • 迁移
    .engine-menu-transfer
  • tags
    .engine-editor-tags
  • tree-o
    .engine-editor-tree
  • check-circle-o
    .engine-editor-check-circle
  • check-square-o
    .engine-editor-check-square
  • header
    .engine-editor-header
  • sort-numeric-asc
    .engine-custom-sort-numeric-asc
  • calendar
    .engine-custom-calendar
  • zui28x28icon35
    .engine-custom-text
  • Mobile
    .engine-custom-mobile

font-class 引用


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

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

  • 兼容性良好,支持 IE8+,及所有现代浏览器。
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

使用步骤如下:

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

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

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

<span class="engineIconFont enginexxx"></span>

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

  • 引擎列表
    #engine-pageflow-list
  • 测试表单
    #engine-pageflow-form
  • 测试流程
    #engine-pageflow-flow
  • 第三方界面
    #engine-pageflow-thirdparty
  • -rbac-unbind
    #engine-rbac-unbind
  • 1:1 右@2x
    #engine-rbac-one-one
  • 1:n 右@2x
    #engine-rbac-one-more
  • 1 右@2x
    #engine-rbac-more-one
  • n 右@2x
    #engine-rbac-more-more
  • 修改 (小卡片)@1x
    #engine-rbac-edit
  • engine-rbac-usersGroup
    #engine-rbac-usersGroup
  • 勾选 copy@2x
    #engine-rbac-checked
  • 勾选(空) copy@2x
    #engine-rbac-check
  • engine-rbac-buttonManageController
    #engine-rbac-buttonManageController
  • -rbac-switch-open
    #engine-rbac-switch-open
  • -rbac-switch-close
    #engine-rbac-switch-close
  • positionIcon
    #engine-rbac-positionIcon
  • engine-icon-rbac-dragger
    #engine-rbac-dragger
  • engine-icon-rbac-toggleStyle
    #engine-rbac-toggleStyle
  • engine-icon-rbac-connectCard
    #engine-rbac-connectCard
  • engine-icon-rbac-close
    #engine-rbac-close
  • engine-icon-rbac-add
    #engine-rbac-add
  • engine-icon-rbac-addform
    #engine-rbac-addform
  • engine-icon-rbac-triangle
    #engine-rbac-triangle
  • engine-icon-rbac-edit
    #engine-rbac-editPencil
  • engine-icon-rbac-refresh
    #engine-rbac-refresh
  • engine-icon-rbac-access
    #engine-rbac-access
  • engine-icon-rbac-forbidden
    #engine-rbac-forbidden
  • engine-icon-rbac-userGroup
    #engine-rbac-userGroup
  • engine-icon-rbac-moreOne
    #engine-rbac-moreOne
  • engine-icon-rbac-clickIconActive
    #engine-rbac-clickIconActive
  • engine-icon-rbac-finance
    #engine-rbac-finance
  • engine-icon-rbac-editor
    #engine-rbac-editor
  • engine-icon-rbac-save
    #engine-rbac-save
  • engine-icon-rbac-trash
    #engine-rbac-trash
  • engine-icon-rbac-clickIcon
    #engine-rbac-clickIcon
  • engine-icon-rbac-search
    #engine-rbac-search
  • engine-icon-rbac-addIcon
    #engine-rbac-addIcon
  • engine-icon-rbac-tree
    #engine-rbac-tree
  • engine-icon-rbac-expand
    #engine-rbac-expand
  • engine-icon-rbac-formInfo
    #engine-rbac-formInfo
  • control
    #engine-editor-control
  • 最小化@1.5x
    #engine-editor-min-circle
  • i灰色@1.5x
    #engine-editor-italic
  • 预览蓝色@1.5x
    #engine-editor-preview
  • x 删除@1.5x
    #engine-custom-delete
  • 数字输入框@1.5x
    #engine-editor-input-number
  • 工具栏 格式刷@1.5x
    #engine-editor-copystyle
  • 工具栏 粘贴@1.5x
    #engine-editor-pastecolor
  • b@1.5x
    #engine-editor-fontbold
  • a 一@1.5x
    #engine-editor-reducefontsize
  • r@1.5x
    #engine-editor-remote
  • a 加@1.5x
    #engine-editor-addfontsize
  • i@1.5x
    #engine-editor-fontstyleitalic
  • u@1.5x
    #engine-editor-underline
  • a@1.5x
    #engine-editor-color
  • 工具栏 图标 1@1.5x
    #engine-editor-flexstart
  • 工具栏 图标 2@1.5x
    #engine-editor-flexcenter
  • 工具栏 图标 3@1.5x
    #engine-editor-flexbottom
  • 工具栏 图标 4@1.5x
    #engine-editor-textleft
  • 工具栏 图标 5@1.5x
    #engine-editor-textcenter
  • 工具栏 图标 6@1.5x
    #engine-editor-textright
  • 工具栏 图标 7@1.5x
    #engine-editor-justifycenter
  • 工具栏 图标 8@1.5x
    #engine-editor-addindent
  • 工具栏 图标 9@1.5x
    #engine-editor-minusindent
  • 工具栏 图标 10@1.5x
    #engine-editor-justifyaround
  • 上@1.5x
    #engine-editor-padding-top
  • 下@1.5x
    #engine-editor-paddingbottom
  • fanhui
    #engine-custom-prev
  • gengduo
    #engine-custom-next
  • 二维码
    #engine-editor-ercode
  • 禁止编辑
    #engine-editor-disable-editor
  • 设置-实色
    #engine-editor-setting
  • help
    #engine-custom-help
  • requires
    #engine-editor-requires
  • interaction
    #engine-editor-interaction
  • copy
    #engine-editor-copy
  • radio
    #engine-editor-radio
  • edit
    #engine-editor-edit
  • insert
    #engine-editor-insert
  • 弹框 删除 白色@1.5x
    #engine-editor-discard
  • property
    #engine-editor-property
  • paste-select
    #engine-editor-paste-select
  • event
    #engine-editor-event
  • import
    #engine-editor-download
  • source
    #engine-editor-chart
  • style1
    #engine-editor-style1
  • style2
    #engine-editor-style2
  • select
    #engine-editor-select
  • read-only
    #engine-editor-read-only
  • pen
    #engine-editor-pen
  • hidden
    #engine-editor-hidden
  • style3
    #engine-editor-style3
  • save
    #engine-editor-save
  • single-row
    #engine-editor-single-row
  • more
    #engine-custom-more
  • multi-line
    #engine-editor-multi-line
  • copy-frame
    #engine-editor-copy-frame
  • split
    #engine-editor-split
  • 合并 蓝色@1.5x
    #engine-editor-combine
  • 工具栏 剪切@1.5x
    #engine-editor-cut
  • 扫 蓝色@1.5x
    #engine-editor-brush
  • 日期选择2@1.5x
    #engine-editor-date-select
  • 日期选择 @1.5x
    #engine-editor-date
  • 右箭头 灰色@1.5x
    #engine-editor-arrows-right
  • 下拉箭头 灰色@1.5x
    #engine-editor-arrows-down
  • 最大化@1.5x
    #engine-editor-min
  • 文本@1.5x
    #engine-editor-text
  • 开始
    #engine-flow-start
  • 结束
    #engine-flow-end
  • 全屏
    #engine-flow-full-screen
  • 缩小
    #engine-flow-narrow
  • 放大
    #engine-flow-magnify
  • 缩小
    #engine-flow-shrink
  • rollback
    #engine-flow-rollback
  • forward
    #engine-flow-forward
  • guanbi
    #engine-flow-close
  • tijiaoquerenwenjian
    #engine-flow-submit
  • zancun
    #engine-flow-save
  • huanyuan
    #engine-flow-restore
  • iconfonts
    #engine-custom-fonts
  • icon-address-book
    #engine-editor-address-book
  • icon_xiazai
    #engine-custom-download
  • icontextwidth
    #engine-editor-text-width
  • upload
    #engine-editor-upload
  • picture-o
    #engine-editor-picture
  • desktop
    #engine-custom-desktop
  • icon_question_circle
    #engine-custom-question-circle
  • 函数
    #engine-menu-func
  • 列表
    #engine-menu-list
  • 数据视图配置
    #engine-menu-dataview-setting
  • 套用流程模板
    #engine-menu-process-temp
  • 样式
    #engine-menu-style
  • 表单引擎
    #engine-menu-formengine
  • list-alt
    #engine-menu-list-alt
  • 返回
    #engine-editor-pre
  • 更多
    #engine-editor-next
  • 表单模板
    #engine-menu-formtemp
  • 数据字典
    #engine-menu-dict
  • 账户管理
    #engine-menu-accout
  • 监听器
    #engine-menu-monitor
  • 流程引擎
    #engine-menu-process-engine
  • print
    #engine-editor-print
  • 角色管理
    #engine-menu-role-manage
  • 可用
    #engine-menu-useable
  • 定时任务
    #engine-menu-timer
  • 菜单管理
    #engine-menu-manage
  • 抄送 (1)
    #engine-menu-copy
  • 综合页面列表配置
    #engine-menu-list-temp
  • 岗位管理
    #engine-menu-position
  • 导出
    #engine-menu-export
  • commenting-o
    #engine-editor-comment
  • 用户与权限
    #engine-menu-user-authority
  • 组织机构
    #engine-menu-org
  • check
    #engine-editor-check
  • search close
    #engine-editor-close
  • 已办
    #engine-menu-done
  • 参数管理
    #engine-menu-paramsmanage
  • 地址管理
    #engine-menu-addressmanage
  • 数据源
    #engine-menu-datasource
  • 首页-选中
    #engine-menu-home
  • 用户组
    #engine-menu-usergroup
  • refresh
    #engine-editor-refresh
  • wpforms
    #engine-editor-wpforms
  • clone
    #engine-editor-clone
  • 待办
    #engine-menu-waiting
  • 流程实例
    #engine-menu-flowinstance
  • 发起
    #engine-menu-launch
  • 数据源
    #engine-menu-datasourcesetting
  • 基础-工具
    #engine-menu-basetool
  • 数据表
    #engine-menu-datatable
  • 数据视图管理
    #engine-menu-dataviewManage
  • http
    #engine-menu-http
  • 编码规则
    #engine-menu-codeRule
  • -_表单实例
    #engine-menu-forminstance
  • 功能按钮管理
    #engine-menu-btnmanage
  • table
    #engine-editor-table
  • 迁移
    #engine-menu-transfer
  • tags
    #engine-editor-tags
  • tree-o
    #engine-editor-tree
  • check-circle-o
    #engine-editor-check-circle
  • check-square-o
    #engine-editor-check-square
  • header
    #engine-editor-header
  • sort-numeric-asc
    #engine-custom-sort-numeric-asc
  • calendar
    #engine-custom-calendar
  • zui28x28icon35
    #engine-custom-text
  • Mobile
    #engine-custom-mobile

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>