#

- 
  view-stats
  &#xe603;
- 
  System variable
  &#xe6a8;
- 
  流水号字段
  &#xe647;
- 
  generate-line
  &#xe6b5;
- 
  Generate
  &#xe643;
- 
  head
  &#xe63a;
- 
  bug
  &#xe746;
- 
  home
  &#xe6a3;
- 
  home
  &#xe601;
- 
  学院
  &#xe620;
- 
  学院-付费课程1
  &#xe6bd;
- 
  学院
  &#xe655;
- 
  用户反馈
  &#xe637;
- 
  反馈
  &#xe617;
- 
  意见反馈
  &#xe63d;
- 
  意见反馈
  &#xe61d;
- 
  公告
  &#xe630;
- 
  TASK
  &#xea43;
- 
  应用市场
  &#xe616;
- 
  云市场
  &#xe666;
- 
  服务市场
  &#xe7ee;
- 
  project2
  &#xe61c;
- 
  社区
  &#xe6f9;
- 
  查看SQL
  &#xe720;
- 
  datasource
  &#xe615;
- 
  Defaultbbsmode
  &#xe654;
- 
  SQL
  &#xe6a1;
- 
  br_requests
  &#xe892;
- 
  file-transfer
  &#xe8ed;
- 
  SQL
  &#xe635;
- 
  setting
  &#xe676;
- 
  server
  &#xe7f8;
- 
  server
  &#xe8ad;
- 
  setting
  &#xe602;
- 
  setting
  &#xe614;
- 
  server
  &#xe7c6;
- 
  产品
  &#xe611;
- 
  import
  &#xe6a4;
- 
  撤回
  &#xe66b;
- 
  注释
  &#xe60a;
- 
  export
  &#xe6c7;
- 
  query list
  &#xe6dd;
- 
  clear
  &#xe633;
- 
  重做
  &#xe6f3;
- 
  注释
  &#xe607;
- 
  import
  &#xe708;
- 
  export
  &#xe70d;
- 
  close
  &#xe60c;
- 
  save
  &#xe62f;
- 
  注释
  &#xe796;
- 
  paste
  &#xedfb;
- 
  organization
  &#xe665;
- 
  add
  &#xe61f;
- 
  save-as-template-16
  &#xe63c;
- 
  save-as
  &#xe62e;
- 
  execute
  &#xe7d6;
- 
  下载
  &#xe682;
- 
  关闭注释标记
  &#xe6d5;
- 
  取消注释
  &#xe61b;
- 
  icon-redo
  &#xe60d;
- 
  test
  &#xe62d;
- 
  重做
  &#xe79d;
- 
  注释链接
  &#xe600;
- 
  注释
  &#xe636;
- 
  重做
  &#xe60f;
- 
  CLEAR
  &#xe9f5;
- 
  HISTORY_QUERY
  &#xe9fd;
- 
  export
  &#xe672;
- 
  select
  &#xe681;
- 
  19-point
  &#xe613;
- 
  Item query-line
  &#xe9f1;
- 
  撤回
  &#xe612;
- 
  撤回
  &#xe662;
- 
  execute
  &#xe605;
- 
  文本换行
  &#xe6b2;
- 
  product
  &#xe834;
- 
  add-btn
  &#xe835;
- 
  cut
  &#xe839;
- 
  return
  &#xe841;
- 
  upload
  &#xe846;
- 
  元颗粒10
  &#xe604;
- 
  元颗粒09
  &#xe606;
- 
  取消注释
  &#xe608;
- 
  换行
  &#xe6b3;
- 
  注释
  &#xe679;
- 
  copy
  &#xe706;
- 
  键盘
  &#xe627;
- 
  键盘
  &#xe7b2;
- 
  delete
  &#xe61a;
- 
  save-as-24
  &#xe7e4;
- 
  缩进
  &#xe71d;
- 
  缩进
  &#xe71e;
- 
  upload
  &#xe660;
- 
  下载
  &#xe640;
- 
  left
  &#xe628;
- 
  right
  &#xe642;
- 
  down
  &#xe664;
- 
  down
  &#xe610;
- 
  search
  &#xe65a;
- 
  客服
  &#xe68b;
- 
  app
  &#xe60e;
- 
  小程序
  &#xe61e;
- 
  database
  &#xe758;
- 
  待办事项
  &#xec4e;
- 
  refresh
  &#xe6a2;
- 
  布局
  &#xe667;
- 
  folder-5-fill
  &#xe8cb;
- 
  up
  &#xe609;
- 
  notice
  &#xe782;
- 
  up
  &#xe653;
- 
  账单
  &#xe64f;
- 
  left-start
  &#xe7be;
- 
  right-end
  &#xe7c3;
- 
  file
  &#xe671;
- 
  help
  &#xe677;
- 
  ryzh
  &#xe650;
- 
  right to -line
  &#xea11;
- 
  表单
  &#xe60b;
- 
  Table
  &#xe663;
- 
  left
  &#xe83d;
- 
  right
  &#xe840;
- 
  up
  &#xe845;
- 
  code
  &#xe84f;
- 
  布局-布局
  &#xe75d;
- 
  PROJECT
  &#xea42;

## 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>