#

- 
  菜单
  &#xe66a;
- 
  保存
  &#xe66b;
- 
  不可见
  &#xe66c;
- 
  编辑
  &#xe66d;
- 
  定位
  &#xe66e;
- 
  打印
  &#xe66f;
- 
  发布
  &#xe670;
- 
  分享
  &#xe671;
- 
  更多
  &#xe672;
- 
  加号
  &#xe673;
- 
  关闭
  &#xe674;
- 
  复制
  &#xe675;
- 
  电话
  &#xe676;
- 
  撤销
  &#xe677;
- 
  减号
  &#xe678;
- 
  放大
  &#xe679;
- 
  可见
  &#xe67a;
- 
  警告
  &#xe67b;
- 
  减少
  &#xe67c;
- 
  个人中心
  &#xe67d;
- 
  拍照
  &#xe67e;
- 
  评论
  &#xe67f;
- 
  列表
  &#xe680;
- 
  门店
  &#xe681;
- 
  日历
  &#xe682;
- 
  链接
  &#xe683;
- 
  删除
  &#xe684;
- 
  扫一扫
  &#xe685;
- 
  上传
  &#xe686;
- 
  刷新
  &#xe687;
- 
  清除
  &#xe688;
- 
  收藏
  &#xe689;
- 
  缩小
  &#xe68a;
- 
  通知
  &#xe68b;
- 
  搜索
  &#xe68c;
- 
  图片
  &#xe68d;
- 
  退出
  &#xe68e;
- 
  文件夹
  &#xe68f;
- 
  向上
  &#xe690;
- 
  完成
  &#xe691;
- 
  筛选
  &#xe692;
- 
  文件
  &#xe693;
- 
  下载
  &#xe694;
- 
  向左
  &#xe695;
- 
  信息
  &#xe696;
- 
  向右
  &#xe697;
- 
  向下
  &#xe698;
- 
  新增
  &#xe699;
- 
  专题
  &#xe69a;
- 
  咨询
  &#xe69b;
- 
  消息
  &#xe69c;
- 
  数据
  &#xe69d;
- 
  技术服务
  &#xe69e;
- 
  架构
  &#xe69f;
- 
  票据
  &#xe6a0;
- 
  数据库
  &#xe6a1;
- 
  API管理
  &#xe6a2;
- 
  性能
  &#xe6a3;
- 
  提醒
  &#xe646;
- 
  位置
  &#xe647;
- 
  通知
  &#xe648;
- 
  文件
  &#xe649;
- 
  向右
  &#xe64a;
- 
  向上
  &#xe64b;
- 
  向左
  &#xe64c;
- 
  向下
  &#xe64d;
- 
  信息
  &#xe64e;
- 
  人
  &#xe64f;
- 
  菜单
  &#xe650;
- 
  票务
  &#xe651;
- 
  客房
  &#xe652;
- 
  数据平台
  &#xe653;
- 
  项目
  &#xe654;
- 
  询问
  &#xe655;
- 
  首页
  &#xe656;
- 
  技术服务
  &#xe657;
- 
  数据源
  &#xe658;
- 
  管理平台
  &#xe659;
- 
  票据
  &#xe65a;
- 
  架构
  &#xe65b;
- 
  字段
  &#xe65c;
- 
  表格
  &#xe65d;
- 
  查询备份
  &#xe65e;
- 
  查询
  &#xe65f;
- 
  过程
  &#xe660;
- 
  输出
  &#xe661;
- 
  血缘
  &#xe662;
- 
  输入
  &#xe663;
- 
  路径
  &#xe664;
- 
  数据源
  &#xe665;
- 
  数据
  &#xe666;
- 
  集团企业
  &#xe667;
- 
  数据平台
  &#xe668;
- 
  管理平台
  &#xe669;
- 
  标签
  &#xe634;
- 
  保存
  &#xe635;
- 
  编辑
  &#xe636;
- 
  撤销
  &#xe637;
- 
  发布
  &#xe638;
- 
  拍照
  &#xe639;
- 
  放大
  &#xe63a;
- 
  门店
  &#xe63b;
- 
  电话
  &#xe63c;
- 
  减少
  &#xe63d;
- 
  日历
  &#xe63e;
- 
  数据
  &#xe63f;
- 
  收藏
  &#xe640;
- 
  设置
  &#xe641;
- 
  删除
  &#xe642;
- 
  文件夹
  &#xe643;
- 
  缩小
  &#xe644;
- 
  图片
  &#xe645;

## Unicode 引用

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

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

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

Unicode 使用步骤如下：

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

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

### 第二步：定义使用 iconfont 的样式

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

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

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

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

- 菜单
  .sxIconFont-caidan1
- 保存
  .sxIconFont-baocun1
- 不可见
  .sxIconFont-bukejian
- 编辑
  .sxIconFont-bianji1
- 定位
  .sxIconFont-dingwei
- 打印
  .sxIconFont-dayin
- 发布
  .sxIconFont-fabu1
- 分享
  .sxIconFont-fenxiang
- 更多
  .sxIconFont-gengduo
- 加号
  .sxIconFont-jiahao
- 关闭
  .sxIconFont-guanbi
- 复制
  .sxIconFont-fuzhi
- 电话
  .sxIconFont-dianhua1
- 撤销
  .sxIconFont-chexiao1
- 减号
  .sxIconFont-jianhao
- 放大
  .sxIconFont-fangda1
- 可见
  .sxIconFont-kejian
- 警告
  .sxIconFont-jinggao
- 减少
  .sxIconFont-jianshao1
- 个人中心
  .sxIconFont-gerenzhongxin
- 拍照
  .sxIconFont-paizhao1
- 评论
  .sxIconFont-pinglun
- 列表
  .sxIconFont-liebiao
- 门店
  .sxIconFont-mendian1
- 日历
  .sxIconFont-rili1
- 链接
  .sxIconFont-lianjie
- 删除
  .sxIconFont-shanchu1
- 扫一扫
  .sxIconFont-saoyisao
- 上传
  .sxIconFont-shangchuan
- 刷新
  .sxIconFont-shuaxin
- 清除
  .sxIconFont-qingchu
- 收藏
  .sxIconFont-shoucang1
- 缩小
  .sxIconFont-suoxiao1
- 通知
  .sxIconFont-tongzhi1
- 搜索
  .sxIconFont-sousuo
- 图片
  .sxIconFont-tupian1
- 退出
  .sxIconFont-tuichu
- 文件夹
  .sxIconFont-wenjianjia1
- 向上
  .sxIconFont-xiangshang1
- 完成
  .sxIconFont-wancheng
- 筛选
  .sxIconFont-shaixuan
- 文件
  .sxIconFont-wenjian1
- 下载
  .sxIconFont-xiazai
- 向左
  .sxIconFont-xiangzuo1
- 信息
  .sxIconFont-xinxi1
- 向右
  .sxIconFont-xiangyou1
- 向下
  .sxIconFont-xiangxia1
- 新增
  .sxIconFont-xinzeng
- 专题
  .sxIconFont-zhuanti
- 咨询
  .sxIconFont-zixun
- 消息
  .sxIconFont-xiaoxi
- 数据
  .sxIconFont-shuju2
- 技术服务
  .sxIconFont-jishufuwu1
- 架构
  .sxIconFont-jiagou1
- 票据
  .sxIconFont-piaoju1
- 数据库
  .sxIconFont-shujuku
- API管理
  .sxIconFont-APIguanli
- 性能
  .sxIconFont-xingneng
- 提醒
  .sxIconFont-tixing
- 位置
  .sxIconFont-weizhi
- 通知
  .sxIconFont-tongzhi
- 文件
  .sxIconFont-wenjian
- 向右
  .sxIconFont-xiangyou
- 向上
  .sxIconFont-xiangshang
- 向左
  .sxIconFont-xiangzuo
- 向下
  .sxIconFont-xiangxia
- 信息
  .sxIconFont-xinxi
- 人
  .sxIconFont-ren
- 菜单
  .sxIconFont-caidan
- 票务
  .sxIconFont-piaowu
- 客房
  .sxIconFont-kefang
- 数据平台
  .sxIconFont-shujupingtai
- 项目
  .sxIconFont-xiangmu
- 询问
  .sxIconFont-xunwen
- 首页
  .sxIconFont-shouye
- 技术服务
  .sxIconFont-jishufuwu
- 数据源
  .sxIconFont-shujuyuan
- 管理平台
  .sxIconFont-guanlipingtai
- 票据
  .sxIconFont-piaoju
- 架构
  .sxIconFont-jiagou
- 字段
  .sxIconFont-ziduan
- 表格
  .sxIconFont-biaoge
- 查询备份
  .sxIconFont-chaxunbeifen
- 查询
  .sxIconFont-chaxun
- 过程
  .sxIconFont-guocheng
- 输出
  .sxIconFont-shuchu
- 血缘
  .sxIconFont-xieyuan
- 输入
  .sxIconFont-shuru
- 路径
  .sxIconFont-lujing
- 数据源
  .sxIconFont-shujuyuan1
- 数据
  .sxIconFont-shuju1
- 集团企业
  .sxIconFont-jituanqiye
- 数据平台
  .sxIconFont-shujupingtai1
- 管理平台
  .sxIconFont-guanlipingtai1
- 标签
  .sxIconFont-biaoqian
- 保存
  .sxIconFont-baocun
- 编辑
  .sxIconFont-bianji
- 撤销
  .sxIconFont-chexiao
- 发布
  .sxIconFont-fabu
- 拍照
  .sxIconFont-paizhao
- 放大
  .sxIconFont-fangda
- 门店
  .sxIconFont-mendian
- 电话
  .sxIconFont-dianhua
- 减少
  .sxIconFont-jianshao
- 日历
  .sxIconFont-rili
- 数据
  .sxIconFont-shuju
- 收藏
  .sxIconFont-shoucang
- 设置
  .sxIconFont-shezhi
- 删除
  .sxIconFont-shanchu
- 文件夹
  .sxIconFont-wenjianjia
- 缩小
  .sxIconFont-suoxiao
- 图片
  .sxIconFont-tupian

## font-class 引用

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

与 Unicode 使用方式相比，具有如下特点：

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

使用步骤如下：

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

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

### 第二步：挑选相应图标并获取类名，应用于页面：

    <span class="sxIconFont sxIconFont-xxx"></span>

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

- 菜单
  #sxIconFont-caidan1
- 保存
  #sxIconFont-baocun1
- 不可见
  #sxIconFont-bukejian
- 编辑
  #sxIconFont-bianji1
- 定位
  #sxIconFont-dingwei
- 打印
  #sxIconFont-dayin
- 发布
  #sxIconFont-fabu1
- 分享
  #sxIconFont-fenxiang
- 更多
  #sxIconFont-gengduo
- 加号
  #sxIconFont-jiahao
- 关闭
  #sxIconFont-guanbi
- 复制
  #sxIconFont-fuzhi
- 电话
  #sxIconFont-dianhua1
- 撤销
  #sxIconFont-chexiao1
- 减号
  #sxIconFont-jianhao
- 放大
  #sxIconFont-fangda1
- 可见
  #sxIconFont-kejian
- 警告
  #sxIconFont-jinggao
- 减少
  #sxIconFont-jianshao1
- 个人中心
  #sxIconFont-gerenzhongxin
- 拍照
  #sxIconFont-paizhao1
- 评论
  #sxIconFont-pinglun
- 列表
  #sxIconFont-liebiao
- 门店
  #sxIconFont-mendian1
- 日历
  #sxIconFont-rili1
- 链接
  #sxIconFont-lianjie
- 删除
  #sxIconFont-shanchu1
- 扫一扫
  #sxIconFont-saoyisao
- 上传
  #sxIconFont-shangchuan
- 刷新
  #sxIconFont-shuaxin
- 清除
  #sxIconFont-qingchu
- 收藏
  #sxIconFont-shoucang1
- 缩小
  #sxIconFont-suoxiao1
- 通知
  #sxIconFont-tongzhi1
- 搜索
  #sxIconFont-sousuo
- 图片
  #sxIconFont-tupian1
- 退出
  #sxIconFont-tuichu
- 文件夹
  #sxIconFont-wenjianjia1
- 向上
  #sxIconFont-xiangshang1
- 完成
  #sxIconFont-wancheng
- 筛选
  #sxIconFont-shaixuan
- 文件
  #sxIconFont-wenjian1
- 下载
  #sxIconFont-xiazai
- 向左
  #sxIconFont-xiangzuo1
- 信息
  #sxIconFont-xinxi1
- 向右
  #sxIconFont-xiangyou1
- 向下
  #sxIconFont-xiangxia1
- 新增
  #sxIconFont-xinzeng
- 专题
  #sxIconFont-zhuanti
- 咨询
  #sxIconFont-zixun
- 消息
  #sxIconFont-xiaoxi
- 数据
  #sxIconFont-shuju2
- 技术服务
  #sxIconFont-jishufuwu1
- 架构
  #sxIconFont-jiagou1
- 票据
  #sxIconFont-piaoju1
- 数据库
  #sxIconFont-shujuku
- API管理
  #sxIconFont-APIguanli
- 性能
  #sxIconFont-xingneng
- 提醒
  #sxIconFont-tixing
- 位置
  #sxIconFont-weizhi
- 通知
  #sxIconFont-tongzhi
- 文件
  #sxIconFont-wenjian
- 向右
  #sxIconFont-xiangyou
- 向上
  #sxIconFont-xiangshang
- 向左
  #sxIconFont-xiangzuo
- 向下
  #sxIconFont-xiangxia
- 信息
  #sxIconFont-xinxi
- 人
  #sxIconFont-ren
- 菜单
  #sxIconFont-caidan
- 票务
  #sxIconFont-piaowu
- 客房
  #sxIconFont-kefang
- 数据平台
  #sxIconFont-shujupingtai
- 项目
  #sxIconFont-xiangmu
- 询问
  #sxIconFont-xunwen
- 首页
  #sxIconFont-shouye
- 技术服务
  #sxIconFont-jishufuwu
- 数据源
  #sxIconFont-shujuyuan
- 管理平台
  #sxIconFont-guanlipingtai
- 票据
  #sxIconFont-piaoju
- 架构
  #sxIconFont-jiagou
- 字段
  #sxIconFont-ziduan
- 表格
  #sxIconFont-biaoge
- 查询备份
  #sxIconFont-chaxunbeifen
- 查询
  #sxIconFont-chaxun
- 过程
  #sxIconFont-guocheng
- 输出
  #sxIconFont-shuchu
- 血缘
  #sxIconFont-xieyuan
- 输入
  #sxIconFont-shuru
- 路径
  #sxIconFont-lujing
- 数据源
  #sxIconFont-shujuyuan1
- 数据
  #sxIconFont-shuju1
- 集团企业
  #sxIconFont-jituanqiye
- 数据平台
  #sxIconFont-shujupingtai1
- 管理平台
  #sxIconFont-guanlipingtai1
- 标签
  #sxIconFont-biaoqian
- 保存
  #sxIconFont-baocun
- 编辑
  #sxIconFont-bianji
- 撤销
  #sxIconFont-chexiao
- 发布
  #sxIconFont-fabu
- 拍照
  #sxIconFont-paizhao
- 放大
  #sxIconFont-fangda
- 门店
  #sxIconFont-mendian
- 电话
  #sxIconFont-dianhua
- 减少
  #sxIconFont-jianshao
- 日历
  #sxIconFont-rili
- 数据
  #sxIconFont-shuju
- 收藏
  #sxIconFont-shoucang
- 设置
  #sxIconFont-shezhi
- 删除
  #sxIconFont-shanchu
- 文件夹
  #sxIconFont-wenjianjia
- 缩小
  #sxIconFont-suoxiao
- 图片
  #sxIconFont-tupian

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