• view-stats
    
  • System variable
    
  • 流水号字段
    
  • generate-line
    
  • Generate
    
  • head
    
  • bug
    
  • home
    
  • home
    
  • 学院
    
  • 学院-付费课程1
    
  • 学院
    
  • 用户反馈
    
  • 反馈
    
  • 意见反馈
    
  • 意见反馈
    
  • 公告
    
  • TASK
    
  • 应用市场
    
  • 云市场
    
  • 服务市场
    
  • project2
    
  • 社区
    
  • 查看SQL
    
  • datasource
    
  • Defaultbbsmode
    
  • SQL
    
  • br_requests
    
  • file-transfer
    
  • SQL
    
  • setting
    
  • server
    
  • server
    
  • setting
    
  • setting
    
  • server
    
  • 产品
    
  • import
    
  • 撤回
    
  • 注释
    
  • export
    
  • query list
    
  • clear
    
  • 重做
    
  • 注释
    
  • import
    
  • export
    
  • close
    
  • save
    
  • 注释
    
  • paste
    
  • organization
    
  • add
    
  • save-as-template-16
    
  • save-as
    
  • execute
    
  • 下载
    
  • 关闭注释标记
    
  • 取消注释
    
  • icon-redo
    
  • test
    
  • 重做
    
  • 注释链接
    
  • 注释
    
  • 重做
    
  • CLEAR
    
  • HISTORY_QUERY
    
  • export
    
  • select
    
  • 19-point
    
  • Item query-line
    
  • 撤回
    
  • 撤回
    
  • execute
    
  • 文本换行
    
  • product
    
  • add-btn
    
  • cut
    
  • return
    
  • upload
    
  • 元颗粒10
    
  • 元颗粒09
    
  • 取消注释
    
  • 换行
    
  • 注释
    
  • copy
    
  • 键盘
    
  • 键盘
    
  • delete
    
  • save-as-24
    
  • 缩进
    
  • 缩进
    
  • upload
    
  • 下载
    
  • left
    
  • right
    
  • down
    
  • down
    
  • search
    
  • 客服
    
  • app
    
  • 小程序
    
  • database
    
  • 待办事项
    
  • refresh
    
  • 布局
    
  • folder-5-fill
    
  • up
    
  • notice
    
  • up
    
  • 账单
    
  • left-start
    
  • right-end
    
  • file
    
  • help
    
  • ryzh
    
  • right to -line
    
  • 表单
    
  • Table
    
  • left
    
  • right
    
  • up
    
  • code
    
  • 布局-布局
    
  • PROJECT
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1724571763467') format('woff2'),
       url('iconfont.woff?t=1724571763467') format('woff'),
       url('iconfont.ttf?t=1724571763467') format('truetype'),
       url('iconfont.svg?t=1724571763467#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"。

  • view-stats
    .icon-tb-mainview-stats
  • System variable
    .icon-tb-mainSystemvariable
  • 流水号字段
    .icon-tb-mainliushuihaoziduan
  • generate-line
    .icon-tb-maingenerate-line
  • Generate
    .icon-tb-mainGenerate
  • head
    .icon-tb-mainhead
  • bug
    .icon-tb-mainbug
  • home
    .icon-tb-mainhome
  • home
    .icon-tb-mainhome1
  • 学院
    .icon-tb-mainxueyuan
  • 学院-付费课程1
    .icon-tb-mainxueyuan-fufeikecheng
  • 学院
    .icon-tb-mainxueyuan1
  • 用户反馈
    .icon-tb-mainfeedback
  • 反馈
    .icon-tb-mainfankui
  • 意见反馈
    .icon-tb-mainyijianfankui
  • 意见反馈
    .icon-tb-mainyijianfankui1
  • 公告
    .icon-tb-maingonggao
  • TASK
    .icon-tb-mainTASK
  • 应用市场
    .icon-tb-main04
  • 云市场
    .icon-tb-mainyunshichang
  • 服务市场
    .icon-tb-mainfuwushichang
  • project2
    .icon-tb-mainxiangmu
  • 社区
    .icon-tb-mainshequ
  • 查看SQL
    .icon-tb-mainchakanSQL
  • datasource
    .icon-tb-maindatasource
  • Defaultbbsmode
    .icon-tb-mainDefaultbbsmode
  • SQL
    .icon-tb-mainlujing
  • br_requests
    .icon-tb-mainbr_requests
  • file-transfer
    .icon-tb-mainfile-transfer
  • SQL
    .icon-tb-mainSQL
  • setting
    .icon-tb-mainsetting
  • server
    .icon-tb-mainserver
  • server
    .icon-tb-mainserver1
  • setting
    .icon-tb-mainsetting1
  • setting
    .icon-tb-mainsetting2
  • server
    .icon-tb-mainserver2
  • 产品
    .icon-tb-mainproduct
  • import
    .icon-tb-mainimport
  • 撤回
    .icon-tb-mainchehui
  • 注释
    .icon-tb-maincomment
  • export
    .icon-tb-mainexport
  • query list
    .icon-tb-mainquerylist
  • clear
    .icon-tb-mainclear
  • 重做
    .icon-tb-mainzhongzuo
  • 注释
    .icon-tb-maintubiaozhizuomoban
  • import
    .icon-tb-mainimport1
  • export
    .icon-tb-mainexport1
  • close
    .icon-tb-mainclose
  • save
    .icon-tb-mainsave
  • 注释
    .icon-tb-mainzhushi
  • paste
    .icon-tb-mainpaste
  • organization
    .icon-tb-mainorganization
  • add
    .icon-tb-mainadd
  • save-as-template-16
    .icon-tb-mainsave-as-template-
  • save-as
    .icon-tb-mainsave-as
  • execute
    .icon-tb-mainexecute
  • 下载
    .icon-tb-mainxiazai1
  • 关闭注释标记
    .icon-tb-mainguanbizhushibiaoji
  • 取消注释
    .icon-tb-mainquxiaozhushi
  • icon-redo
    .icon-tb-mainicon-06
  • test
    .icon-tb-maintest
  • 重做
    .icon-tb-mainzhongzuo1
  • 注释链接
    .icon-tb-mainzhushilianjie
  • 注释
    .icon-tb-mainzhushi1
  • 重做
    .icon-tb-mainzhongzuo2
  • CLEAR
    .icon-tb-mainCLEAR
  • HISTORY_QUERY
    .icon-tb-mainHISTORY_QUERY
  • export
    .icon-tb-mainexport2
  • select
    .icon-tb-mainselect
  • 19-point
    .icon-tb-mainpoint-01
  • Item query-line
    .icon-tb-maina-Itemquery-line
  • 撤回
    .icon-tb-mainchehui1
  • 撤回
    .icon-tb-mainchehui2
  • execute
    .icon-tb-mainexecute1
  • 文本换行
    .icon-tb-mainwenbenhuanhang
  • product
    .icon-tb-mainproduct1
  • add-btn
    .icon-tb-mainadd-btn
  • cut
    .icon-tb-maincut
  • return
    .icon-tb-mainreturn
  • upload
    .icon-tb-mainupload1
  • 元颗粒10
    .icon-tb-mainindent-increasesvg
  • 元颗粒09
    .icon-tb-mainindent-decreasesvg
  • 取消注释
    .icon-tb-mainquxiaozhushi1
  • 换行
    .icon-tb-mainhuanhang
  • 注释
    .icon-tb-mainzhushi2
  • copy
    .icon-tb-maincopy
  • 键盘
    .icon-tb-mainjianpan
  • 键盘
    .icon-tb-mainjianpan1
  • delete
    .icon-tb-maindelete
  • save-as-24
    .icon-tb-mainsaveas24
  • 缩进
    .icon-tb-mainsuojinindent2
  • 缩进
    .icon-tb-mainsuojinindent3
  • upload
    .icon-tb-mainupload
  • 下载
    .icon-tb-mainxiazai
  • left
    .icon-tb-mainleft
  • right
    .icon-tb-mainright
  • down
    .icon-tb-maindown
  • down
    .icon-tb-main552cc1b6033d0
  • search
    .icon-tb-mainsearch
  • 客服
    .icon-tb-mainwodekefu
  • app
    .icon-tb-mainapp
  • 小程序
    .icon-tb-mainxiaochengxu
  • database
    .icon-tb-maindatabase
  • 待办事项
    .icon-tb-maindaibanshixiang
  • refresh
    .icon-tb-mainrefresh
  • 布局
    .icon-tb-mainbuju
  • folder-5-fill
    .icon-tb-mainfolder--fill
  • up
    .icon-tb-mainup
  • notice
    .icon-tb-mainnotice
  • up
    .icon-tb-mainup1
  • 账单
    .icon-tb-mainzhangdan
  • left-start
    .icon-tb-mainleft-start
  • right-end
    .icon-tb-mainright-end
  • file
    .icon-tb-mainfile
  • help
    .icon-tb-mainhelp
  • ryzh
    .icon-tb-mainriyezhuanhuan
  • right to -line
    .icon-tb-maina-rightto-line
  • 表单
    .icon-tb-mainbiaodan
  • Table
    .icon-tb-mainTable
  • left
    .icon-tb-mainleft1
  • right
    .icon-tb-mainright1
  • up
    .icon-tb-mainup2
  • code
    .icon-tb-maincode
  • 布局-布局
    .icon-tb-mainbuju-buju
  • PROJECT
    .icon-tb-mainPROJECT

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="iconfont icon-tb-mainxxx"></span>

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

  • view-stats
    #icon-tb-mainview-stats
  • System variable
    #icon-tb-mainSystemvariable
  • 流水号字段
    #icon-tb-mainliushuihaoziduan
  • generate-line
    #icon-tb-maingenerate-line
  • Generate
    #icon-tb-mainGenerate
  • head
    #icon-tb-mainhead
  • bug
    #icon-tb-mainbug
  • home
    #icon-tb-mainhome
  • home
    #icon-tb-mainhome1
  • 学院
    #icon-tb-mainxueyuan
  • 学院-付费课程1
    #icon-tb-mainxueyuan-fufeikecheng
  • 学院
    #icon-tb-mainxueyuan1
  • 用户反馈
    #icon-tb-mainfeedback
  • 反馈
    #icon-tb-mainfankui
  • 意见反馈
    #icon-tb-mainyijianfankui
  • 意见反馈
    #icon-tb-mainyijianfankui1
  • 公告
    #icon-tb-maingonggao
  • TASK
    #icon-tb-mainTASK
  • 应用市场
    #icon-tb-main04
  • 云市场
    #icon-tb-mainyunshichang
  • 服务市场
    #icon-tb-mainfuwushichang
  • project2
    #icon-tb-mainxiangmu
  • 社区
    #icon-tb-mainshequ
  • 查看SQL
    #icon-tb-mainchakanSQL
  • datasource
    #icon-tb-maindatasource
  • Defaultbbsmode
    #icon-tb-mainDefaultbbsmode
  • SQL
    #icon-tb-mainlujing
  • br_requests
    #icon-tb-mainbr_requests
  • file-transfer
    #icon-tb-mainfile-transfer
  • SQL
    #icon-tb-mainSQL
  • setting
    #icon-tb-mainsetting
  • server
    #icon-tb-mainserver
  • server
    #icon-tb-mainserver1
  • setting
    #icon-tb-mainsetting1
  • setting
    #icon-tb-mainsetting2
  • server
    #icon-tb-mainserver2
  • 产品
    #icon-tb-mainproduct
  • import
    #icon-tb-mainimport
  • 撤回
    #icon-tb-mainchehui
  • 注释
    #icon-tb-maincomment
  • export
    #icon-tb-mainexport
  • query list
    #icon-tb-mainquerylist
  • clear
    #icon-tb-mainclear
  • 重做
    #icon-tb-mainzhongzuo
  • 注释
    #icon-tb-maintubiaozhizuomoban
  • import
    #icon-tb-mainimport1
  • export
    #icon-tb-mainexport1
  • close
    #icon-tb-mainclose
  • save
    #icon-tb-mainsave
  • 注释
    #icon-tb-mainzhushi
  • paste
    #icon-tb-mainpaste
  • organization
    #icon-tb-mainorganization
  • add
    #icon-tb-mainadd
  • save-as-template-16
    #icon-tb-mainsave-as-template-
  • save-as
    #icon-tb-mainsave-as
  • execute
    #icon-tb-mainexecute
  • 下载
    #icon-tb-mainxiazai1
  • 关闭注释标记
    #icon-tb-mainguanbizhushibiaoji
  • 取消注释
    #icon-tb-mainquxiaozhushi
  • icon-redo
    #icon-tb-mainicon-06
  • test
    #icon-tb-maintest
  • 重做
    #icon-tb-mainzhongzuo1
  • 注释链接
    #icon-tb-mainzhushilianjie
  • 注释
    #icon-tb-mainzhushi1
  • 重做
    #icon-tb-mainzhongzuo2
  • CLEAR
    #icon-tb-mainCLEAR
  • HISTORY_QUERY
    #icon-tb-mainHISTORY_QUERY
  • export
    #icon-tb-mainexport2
  • select
    #icon-tb-mainselect
  • 19-point
    #icon-tb-mainpoint-01
  • Item query-line
    #icon-tb-maina-Itemquery-line
  • 撤回
    #icon-tb-mainchehui1
  • 撤回
    #icon-tb-mainchehui2
  • execute
    #icon-tb-mainexecute1
  • 文本换行
    #icon-tb-mainwenbenhuanhang
  • product
    #icon-tb-mainproduct1
  • add-btn
    #icon-tb-mainadd-btn
  • cut
    #icon-tb-maincut
  • return
    #icon-tb-mainreturn
  • upload
    #icon-tb-mainupload1
  • 元颗粒10
    #icon-tb-mainindent-increasesvg
  • 元颗粒09
    #icon-tb-mainindent-decreasesvg
  • 取消注释
    #icon-tb-mainquxiaozhushi1
  • 换行
    #icon-tb-mainhuanhang
  • 注释
    #icon-tb-mainzhushi2
  • copy
    #icon-tb-maincopy
  • 键盘
    #icon-tb-mainjianpan
  • 键盘
    #icon-tb-mainjianpan1
  • delete
    #icon-tb-maindelete
  • save-as-24
    #icon-tb-mainsaveas24
  • 缩进
    #icon-tb-mainsuojinindent2
  • 缩进
    #icon-tb-mainsuojinindent3
  • upload
    #icon-tb-mainupload
  • 下载
    #icon-tb-mainxiazai
  • left
    #icon-tb-mainleft
  • right
    #icon-tb-mainright
  • down
    #icon-tb-maindown
  • down
    #icon-tb-main552cc1b6033d0
  • search
    #icon-tb-mainsearch
  • 客服
    #icon-tb-mainwodekefu
  • app
    #icon-tb-mainapp
  • 小程序
    #icon-tb-mainxiaochengxu
  • database
    #icon-tb-maindatabase
  • 待办事项
    #icon-tb-maindaibanshixiang
  • refresh
    #icon-tb-mainrefresh
  • 布局
    #icon-tb-mainbuju
  • folder-5-fill
    #icon-tb-mainfolder--fill
  • up
    #icon-tb-mainup
  • notice
    #icon-tb-mainnotice
  • up
    #icon-tb-mainup1
  • 账单
    #icon-tb-mainzhangdan
  • left-start
    #icon-tb-mainleft-start
  • right-end
    #icon-tb-mainright-end
  • file
    #icon-tb-mainfile
  • help
    #icon-tb-mainhelp
  • ryzh
    #icon-tb-mainriyezhuanhuan
  • right to -line
    #icon-tb-maina-rightto-line
  • 表单
    #icon-tb-mainbiaodan
  • Table
    #icon-tb-mainTable
  • left
    #icon-tb-mainleft1
  • right
    #icon-tb-mainright1
  • up
    #icon-tb-mainup2
  • code
    #icon-tb-maincode
  • 布局-布局
    #icon-tb-mainbuju-buju
  • PROJECT
    #icon-tb-mainPROJECT

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>