ContextQMD
Back to Chat2db

iconfont Demo

chat2db-client/src/assets/font/demo_index.html

3.4.16.6 KB
Original Source
  •  right_on_5

  •  right_off_5-01

  •  left_on_2

  •  left_off

  •  minimize21

  •  restore

  •  resize

  •  close

  •  筛选

  •  排序

  •  305信息-线性圆框

  •  加号

  •  列表

  •  减去

  •  database

  •  筛选

  •  刷新

  •  加号_o

  •  数据库_jurassic

  •  权限

  •  sharpicons_add-database

  •  组织管理

  •  空间

  • 𐂾 下箭头-copy

𐂾

  •  查看

  •  clone

  •  提交

  •  查看

  •  复制

  •  icon_answer

  •  icon_question

  • 𐂽 发送

𐂽

  •  重启

  •  提醒

  •  提醒

  •  提醒

  •  升级

  •  全局_升级

  •  关于我们

  •  ico版本更新

  •  对话气泡

  •  角色权限

  •  preview

  •  导入

  •  终止

  •  退出

  •  控桩终端

  •  撤销

  •  向上

  •  查看

  •  编辑数据_编辑录入操作_jurassic

  •  编辑表格_编辑录入操作_jurassic

  •  报表数据录入

  •  播放5

  •  清空@3x

  •  删除

  •  new-document-worksheet

  •  file-excel

  •  file-markdown

  •  file-word

  •  HTML5

  •  HTML

  •  pdf

  •  个人用户

  •  后台管理

  •  字体代码

  •  版本

  •  车位管理

  •  dictate

  •  circle-f

  •  图表-函数

  •  视图管理器

  •  回车

  •  缺省

  •  进入箭头

  •  右箭头

  •  向右箭头

  •  数据源

  •  question

  •  星星-copy

  •  控制台

  •  星系

  •  暂无数据 (1)

  •  开始

  •  关闭

  •  下箭头

  •  more

  •  设置

  •  对话-未选

  •  图表-未选

  •  编组 13备份 3

  •  编组备份

  •  表格

  •  收藏 (1)

  •  guthub-未选

  •  数据-未选

  •  编组 4

  •  编组 14备份

  •  guthub-未选

  •  24gl-folderMinus

  •  24gl-folderOpen

  •  24gf-folderOpen

  •  云数据库

  •  报表

  •  工作台

  •  mongodb

  •  Redis

  •  HIVE_2

  •  Kingbase

  •  仪表盘

  •  presto

  •  DB2

  •  oceanbase

  •  达梦

  •  proxy

  •  openai

  •  关于

  •  衣服

  •  数据库

  •  数据源配置

  •  服务器_数据库_jurassic

  •  数据库

  •  数据库

  •  数据库数据

  •  数据库

  •  配置数据源

  •  SQL历史查询

  •  重命名

  •  ico_数据查询与统计_预约情况查询

  •  clickhouse-云数据库ClickHouse

  •  rds_mariadb

  •  减少减去减号

  •  sqlserver

  •  sqlite

  •  缺省页_暂无数据

  •  未完成

  •  完成-01

  •  成功

  •  机器人

  •  换一换

  •  icon_infomation

  •  key

  •  mysql

  •  oracle

  •  postgresql

  •  h2

  •  cc-schema

  •  新建表格

  •  export

  •  角色管理

  •  console

  •  24gf-folderMinus

  •  查看

  •  复制_o

  •  执行

  •  m-格式化文字

  •  github-fill

  •  保存

  •  箭头_向左两次_o

  •  新建窗口

  •  loading

  •  链接克隆

  •  SQL升级文件

  •  sql

  •  连接流

  •  跳转/退出

  •  key

  •  播放记录

  •  成功

  •  失败

  •  收回 上下

  •  展开 上下

  •  数据库

  •  保存

  •  查询

  •  对勾

  •  check

  •  概览

  •  概览

  •  编辑

  •  刷新

  •  菜单/列表

  •  表格

  •  展开

  •  收起

  •  主题_o

  •  断开连接

  •  修改

  •  删除

  •  更多

  •  减少

  •  加

  •  加号

  •  arrow drop down

  •  search

  •  download

  •  向右箭头

  •  删除线型

  •  cross

  •  刷新

  •  提醒

  •  138设置、系统设置、功能设置、属性

  •  执行sql脚本

  •  虚拟数据库管理

Unicode 引用

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

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

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

Unicode 使用步骤如下：

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1704794525154') format('woff2'),
       url('iconfont.woff?t=1704794525154') format('woff'),
       url('iconfont.ttf?t=1704794525154') format('truetype');
}

第二步：定义使用 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"。