IconFont Demo

# 

- 
  链接
  &#xe7f8;
- 
  打印区域
  &#xe7f5;
- 
  打印页面配置
  &#xe7f6;
- 
  打印标题
  &#xe7f7;
- 
  分页预览
  &#xe7f2;
- 
  普通
  &#xe7f3;
- 
  页面布局
  &#xe7f4;
- 
  表格锁定
  &#xe7ee;
- 
  转到
  &#xe7f1;
- 
  右箭头
  &#xe7ed;
- 
  菜单
  &#xe7ef;
- 
  替换
  &#xe7f0;
- 
  冻结
  &#xe7e1;
- 
  剪
  &#xe7e2;
- 
  加
  &#xe7e3;
- 
  溢出
  &#xe7e4;
- 
  升序
  &#xe7e5;
- 
  内框线
  &#xe7e6;
- 
  清除筛选
  &#xe7e7;
- 
  文本向上
  &#xe7e8;
- 
  降序
  &#xe7e9;
- 
  内框横线
  &#xe7ea;
- 
  内框竖线
  &#xe7eb;
- 
  自定义排序
  &#xe7ec;
- 
  logo2
  &#xe7df;
- 
  logo
  &#xe7e0;
- 
  文本倾斜
  &#xe7de;
- 
  加粗
  &#xe7d9;
- 
  搜索
  &#xe78a;
- 
  关闭
  &#xe78b;
- 
  下一个
  &#xe78c;
- 
  下拉
  &#xe78d;
- 
  文本颜色
  &#xe78e;
- 
  上一个
  &#xe78f;
- 
  数据透视
  &#xe790;
- 
  填充
  &#xe791;
- 
  增加小数位
  &#xe792;
- 
  编辑2
  &#xe793;
- 
  截屏
  &#xe794;
- 
  减小小数位
  &#xe796;
- 
  菜单
  &#xe797;
- 
  数据库
  &#xe798;
- 
  无边框
  &#xe799;
- 
  编辑
  &#xe79a;
- 
  清除样式
  &#xe79b;
- 
  删除
  &#xe79c;
- 
  文本居中对齐
  &#xe79d;
- 
  打印
  &#xe79e;
- 
  文本分割
  &#xe79f;
- 
  函数‘
  &#xe7a0;
- 
  降序
  &#xe7a1;
- 
  顶部对齐
  &#xe7a2;
- 
  图片
  &#xe7a3;
- 
  向下90
  &#xe7a4;
- 
  竖排文字
  &#xe7a5;
- 
  全加边框
  &#xe7a6;
- 
  升序
  &#xe7a7;
- 
  裁剪
  &#xe7a8;
- 
  金额
  &#xe7a9;
- 
  菜单1
  &#xe7aa;
- 
  取消合并
  &#xe7ab;
- 
  文本下划线
  &#xe7ac;
- 
  上边框
  &#xe7ad;
- 
  定位
  &#xe7ae;
- 
  四周加边框
  &#xe7af;
- 
  侧边栏收起
  &#xe7b0;
- 
  合并
  &#xe7b1;
- 
  向上倾斜
  &#xe7b2;
- 
  水平对齐
  &#xe7b3;
- 
  文本删除线
  &#xe7b4;
- 
  文本右对齐
  &#xe7b5;
- 
  前进
  &#xe7b6;
- 
  图表
  &#xe7b7;
- 
  右边框
  &#xe7b8;
- 
  百分号
  &#xe7b9;
- 
  格式刷
  &#xe7ba;
- 
  保存
  &#xe7bb;
- 
  数据验证
  &#xe7bc;
- 
  截断
  &#xe7bd;
- 
  格式条件
  &#xe7be;
- 
  自动换行
  &#xe7bf;
- 
  侧边栏展开
  &#xe7c0;
- 
  筛选2
  &#xe7c1;
- 
  向下倾斜
  &#xe7c2;
- 
  溢出
  &#xe7c3;
- 
  垂直合并
  &#xe7c4;
- 
  文本分散对齐
  &#xe7c5;
- 
  左边框
  &#xe7c6;
- 
  分页查看
  &#xe7c7;
- 
  运行
  &#xe7c8;
- 
  列
  &#xe7c9;
- 
  全屏
  &#xe7ca;
- 
  筛选
  &#xe7cb;
- 
  更新
  &#xe7cc;
- 
  清除
  &#xe7cd;
- 
  行
  &#xe7ce;
- 
  注释
  &#xe7cf;
- 
  剪
  &#xe7d0;
- 
  计算
  &#xe7d1;
- 
  加
  &#xe7d2;
- 
  底部对齐
  &#xe7d3;
- 
  向上90
  &#xe7d4;
- 
  无选装
  &#xe7d5;
- 
  显示隐藏网格
  &#xe7d6;
- 
  冻结
  &#xe7d7;
- 
  文本左对齐
  &#xe7d8;
- 
  后退
  &#xe7da;
- 
  水平合并
  &#xe7db;
- 
  下边框
  &#xe7dc;
- 
  设置
  &#xe7dd;

## Unicode 引用

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

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

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

Unicode 使用步骤如下：

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

    @font-face {
      font-family: 'iconfont';
      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#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"。

- 链接
  .luckysheet-iconfont-lianjie
- 打印区域
  .luckysheet-iconfont-dayinquyu
- 打印页面配置
  .luckysheet-iconfont-dayinyemianpeizhi
- 打印标题
  .luckysheet-iconfont-dayinbiaoti
- 分页预览
  .luckysheet-iconfont-fenyeyulan
- 普通
  .luckysheet-iconfont-putong
- 页面布局
  .luckysheet-iconfont-yemianbuju
- 表格锁定
  .luckysheet-iconfont-biaogesuoding
- 转到
  .luckysheet-iconfont-zhuandao1
- 右箭头
  .luckysheet-iconfont-youjiantou
- 菜单
  .luckysheet-iconfont-caidan2
- 替换
  .luckysheet-iconfont-tihuan
- 冻结
  .luckysheet-iconfont-dongjie1
- 剪
  .luckysheet-iconfont-jian1
- 加
  .luckysheet-iconfont-jia1
- 溢出
  .luckysheet-iconfont-yichu1
- 升序
  .luckysheet-iconfont-shengxu1
- 内框线
  .luckysheet-iconfont-neikuangxian
- 清除筛选
  .luckysheet-iconfont-qingchushaixuan
- 文本向上
  .luckysheet-iconfont-wenbenxiangshang
- 降序
  .luckysheet-iconfont-jiangxu1
- 内框横线
  .luckysheet-iconfont-neikuanghengxian
- 内框竖线
  .luckysheet-iconfont-neikuangshuxian
- 自定义排序
  .luckysheet-iconfont-zidingyipaixu
- logo2
  .luckysheet-iconfont-logo2
- logo
  .luckysheet-iconfont-logo
- 文本倾斜
  .luckysheet-iconfont-wenbenqingxie1
- 加粗
  .luckysheet-iconfont-jiacu
- 搜索
  .luckysheet-iconfont-sousuo
- 关闭
  .luckysheet-iconfont-guanbi
- 下一个
  .luckysheet-iconfont-xiayige
- 下拉
  .luckysheet-iconfont-xiala
- 文本颜色
  .luckysheet-iconfont-wenbenyanse
- 上一个
  .luckysheet-iconfont-shangyige
- 数据透视
  .luckysheet-iconfont-shujutoushi
- 填充
  .luckysheet-iconfont-tianchong
- 增加小数位
  .luckysheet-iconfont-zengjiaxiaoshuwei
- 编辑2
  .luckysheet-iconfont-bianji2
- 截屏
  .luckysheet-iconfont-jieping
- 减小小数位
  .luckysheet-iconfont-jianxiaoxiaoshuwei
- 菜单
  .luckysheet-iconfont-caidan
- 数据库
  .luckysheet-iconfont-shujuku
- 无边框
  .luckysheet-iconfont-wubiankuang
- 编辑
  .luckysheet-iconfont-bianji
- 清除样式
  .luckysheet-iconfont-qingchuyangshi
- 删除
  .luckysheet-iconfont-shanchu
- 文本居中对齐
  .luckysheet-iconfont-wenbenjuzhongduiqi
- 打印
  .luckysheet-iconfont-dayin
- 文本分割
  .luckysheet-iconfont-wenbenfenge
- 函数‘
  .luckysheet-iconfont-hanshu
- 降序
  .luckysheet-iconfont-jiangxu
- 顶部对齐
  .luckysheet-iconfont-dingbuduiqi
- 图片
  .luckysheet-iconfont-tupian
- 向下90
  .luckysheet-iconfont-xiangxia90
- 竖排文字
  .luckysheet-iconfont-shupaiwenzi
- 全加边框
  .luckysheet-iconfont-quanjiabiankuang
- 升序
  .luckysheet-iconfont-shengxu
- 裁剪
  .luckysheet-iconfont-caijian
- 金额
  .luckysheet-iconfont-jine
- 菜单1
  .luckysheet-iconfont-caidan1
- 取消合并
  .luckysheet-iconfont-quxiaohebing
- 文本下划线
  .luckysheet-iconfont-wenbenxiahuaxian
- 上边框
  .luckysheet-iconfont-shangbiankuang
- 定位
  .luckysheet-iconfont-dingwei
- 四周加边框
  .luckysheet-iconfont-sizhoujiabiankuang
- 侧边栏收起
  .luckysheet-iconfont-cebianlanshouqi
- 合并
  .luckysheet-iconfont-hebing
- 向上倾斜
  .luckysheet-iconfont-xiangshangqingxie
- 水平对齐
  .luckysheet-iconfont-shuipingduiqi
- 文本删除线
  .luckysheet-iconfont-wenbenshanchuxian
- 文本右对齐
  .luckysheet-iconfont-wenbenyouduiqi
- 前进
  .luckysheet-iconfont-qianjin
- 图表
  .luckysheet-iconfont-tubiao
- 右边框
  .luckysheet-iconfont-youbiankuang
- 百分号
  .luckysheet-iconfont-baifenhao
- 格式刷
  .luckysheet-iconfont-geshishua
- 保存
  .luckysheet-iconfont-baocun
- 数据验证
  .luckysheet-iconfont-shujuyanzheng
- 截断
  .luckysheet-iconfont-jieduan
- 格式条件
  .luckysheet-iconfont-geshitiaojian
- 自动换行
  .luckysheet-iconfont-zidonghuanhang
- 侧边栏展开
  .luckysheet-iconfont-cebianlanzhankai
- 筛选2
  .luckysheet-iconfont-shaixuan2
- 向下倾斜
  .luckysheet-iconfont-xiangxiaqingxie
- 溢出
  .luckysheet-iconfont-yichu
- 垂直合并
  .luckysheet-iconfont-chuizhihebing
- 文本分散对齐
  .luckysheet-iconfont-wenbenfensanduiqi
- 左边框
  .luckysheet-iconfont-zuobiankuang
- 分页查看
  .luckysheet-iconfont-fenyechakan
- 运行
  .luckysheet-iconfont-yunhang
- 列
  .luckysheet-iconfont-lie
- 全屏
  .luckysheet-iconfont-quanping
- 筛选
  .luckysheet-iconfont-shaixuan
- 更新
  .luckysheet-iconfont-gengxin
- 清除
  .luckysheet-iconfont-qingchu
- 行
  .luckysheet-iconfont-hang
- 注释
  .luckysheet-iconfont-zhushi
- 剪
  .luckysheet-iconfont-jian
- 计算
  .luckysheet-iconfont-jisuan
- 加
  .luckysheet-iconfont-jia
- 底部对齐
  .luckysheet-iconfont-dibuduiqi
- 向上90
  .luckysheet-iconfont-xiangshang90
- 无选装
  .luckysheet-iconfont-wuxuanzhuang
- 显示隐藏网格
  .luckysheet-iconfont-xianshiyincangwangge
- 冻结
  .luckysheet-iconfont-dongjie
- 文本左对齐
  .luckysheet-iconfont-wenbenzuoduiqi
- 后退
  .luckysheet-iconfont-houtui
- 水平合并
  .luckysheet-iconfont-shuipinghebing
- 下边框
  .luckysheet-iconfont-xiabiankuang
- 设置
  .luckysheet-iconfont-shezhi

## font-class 引用

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

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

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

使用步骤如下：

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

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

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

    <span class="iconfont-luckysheet luckysheet-iconfont-xxx"></span>

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

- 链接
  #luckysheet-iconfont-lianjie
- 打印区域
  #luckysheet-iconfont-dayinquyu
- 打印页面配置
  #luckysheet-iconfont-dayinyemianpeizhi
- 打印标题
  #luckysheet-iconfont-dayinbiaoti
- 分页预览
  #luckysheet-iconfont-fenyeyulan
- 普通
  #luckysheet-iconfont-putong
- 页面布局
  #luckysheet-iconfont-yemianbuju
- 表格锁定
  #luckysheet-iconfont-biaogesuoding
- 转到
  #luckysheet-iconfont-zhuandao1
- 右箭头
  #luckysheet-iconfont-youjiantou
- 菜单
  #luckysheet-iconfont-caidan2
- 替换
  #luckysheet-iconfont-tihuan
- 冻结
  #luckysheet-iconfont-dongjie1
- 剪
  #luckysheet-iconfont-jian1
- 加
  #luckysheet-iconfont-jia1
- 溢出
  #luckysheet-iconfont-yichu1
- 升序
  #luckysheet-iconfont-shengxu1
- 内框线
  #luckysheet-iconfont-neikuangxian
- 清除筛选
  #luckysheet-iconfont-qingchushaixuan
- 文本向上
  #luckysheet-iconfont-wenbenxiangshang
- 降序
  #luckysheet-iconfont-jiangxu1
- 内框横线
  #luckysheet-iconfont-neikuanghengxian
- 内框竖线
  #luckysheet-iconfont-neikuangshuxian
- 自定义排序
  #luckysheet-iconfont-zidingyipaixu
- logo2
  #luckysheet-iconfont-logo2
- logo
  #luckysheet-iconfont-logo
- 文本倾斜
  #luckysheet-iconfont-wenbenqingxie1
- 加粗
  #luckysheet-iconfont-jiacu
- 搜索
  #luckysheet-iconfont-sousuo
- 关闭
  #luckysheet-iconfont-guanbi
- 下一个
  #luckysheet-iconfont-xiayige
- 下拉
  #luckysheet-iconfont-xiala
- 文本颜色
  #luckysheet-iconfont-wenbenyanse
- 上一个
  #luckysheet-iconfont-shangyige
- 数据透视
  #luckysheet-iconfont-shujutoushi
- 填充
  #luckysheet-iconfont-tianchong
- 增加小数位
  #luckysheet-iconfont-zengjiaxiaoshuwei
- 编辑2
  #luckysheet-iconfont-bianji2
- 截屏
  #luckysheet-iconfont-jieping
- 减小小数位
  #luckysheet-iconfont-jianxiaoxiaoshuwei
- 菜单
  #luckysheet-iconfont-caidan
- 数据库
  #luckysheet-iconfont-shujuku
- 无边框
  #luckysheet-iconfont-wubiankuang
- 编辑
  #luckysheet-iconfont-bianji
- 清除样式
  #luckysheet-iconfont-qingchuyangshi
- 删除
  #luckysheet-iconfont-shanchu
- 文本居中对齐
  #luckysheet-iconfont-wenbenjuzhongduiqi
- 打印
  #luckysheet-iconfont-dayin
- 文本分割
  #luckysheet-iconfont-wenbenfenge
- 函数‘
  #luckysheet-iconfont-hanshu
- 降序
  #luckysheet-iconfont-jiangxu
- 顶部对齐
  #luckysheet-iconfont-dingbuduiqi
- 图片
  #luckysheet-iconfont-tupian
- 向下90
  #luckysheet-iconfont-xiangxia90
- 竖排文字
  #luckysheet-iconfont-shupaiwenzi
- 全加边框
  #luckysheet-iconfont-quanjiabiankuang
- 升序
  #luckysheet-iconfont-shengxu
- 裁剪
  #luckysheet-iconfont-caijian
- 金额
  #luckysheet-iconfont-jine
- 菜单1
  #luckysheet-iconfont-caidan1
- 取消合并
  #luckysheet-iconfont-quxiaohebing
- 文本下划线
  #luckysheet-iconfont-wenbenxiahuaxian
- 上边框
  #luckysheet-iconfont-shangbiankuang
- 定位
  #luckysheet-iconfont-dingwei
- 四周加边框
  #luckysheet-iconfont-sizhoujiabiankuang
- 侧边栏收起
  #luckysheet-iconfont-cebianlanshouqi
- 合并
  #luckysheet-iconfont-hebing
- 向上倾斜
  #luckysheet-iconfont-xiangshangqingxie
- 水平对齐
  #luckysheet-iconfont-shuipingduiqi
- 文本删除线
  #luckysheet-iconfont-wenbenshanchuxian
- 文本右对齐
  #luckysheet-iconfont-wenbenyouduiqi
- 前进
  #luckysheet-iconfont-qianjin
- 图表
  #luckysheet-iconfont-tubiao
- 右边框
  #luckysheet-iconfont-youbiankuang
- 百分号
  #luckysheet-iconfont-baifenhao
- 格式刷
  #luckysheet-iconfont-geshishua
- 保存
  #luckysheet-iconfont-baocun
- 数据验证
  #luckysheet-iconfont-shujuyanzheng
- 截断
  #luckysheet-iconfont-jieduan
- 格式条件
  #luckysheet-iconfont-geshitiaojian
- 自动换行
  #luckysheet-iconfont-zidonghuanhang
- 侧边栏展开
  #luckysheet-iconfont-cebianlanzhankai
- 筛选2
  #luckysheet-iconfont-shaixuan2
- 向下倾斜
  #luckysheet-iconfont-xiangxiaqingxie
- 溢出
  #luckysheet-iconfont-yichu
- 垂直合并
  #luckysheet-iconfont-chuizhihebing
- 文本分散对齐
  #luckysheet-iconfont-wenbenfensanduiqi
- 左边框
  #luckysheet-iconfont-zuobiankuang
- 分页查看
  #luckysheet-iconfont-fenyechakan
- 运行
  #luckysheet-iconfont-yunhang
- 列
  #luckysheet-iconfont-lie
- 全屏
  #luckysheet-iconfont-quanping
- 筛选
  #luckysheet-iconfont-shaixuan
- 更新
  #luckysheet-iconfont-gengxin
- 清除
  #luckysheet-iconfont-qingchu
- 行
  #luckysheet-iconfont-hang
- 注释
  #luckysheet-iconfont-zhushi
- 剪
  #luckysheet-iconfont-jian
- 计算
  #luckysheet-iconfont-jisuan
- 加
  #luckysheet-iconfont-jia
- 底部对齐
  #luckysheet-iconfont-dibuduiqi
- 向上90
  #luckysheet-iconfont-xiangshang90
- 无选装
  #luckysheet-iconfont-wuxuanzhuang
- 显示隐藏网格
  #luckysheet-iconfont-xianshiyincangwangge
- 冻结
  #luckysheet-iconfont-dongjie
- 文本左对齐
  #luckysheet-iconfont-wenbenzuoduiqi
- 后退
  #luckysheet-iconfont-houtui
- 水平合并
  #luckysheet-iconfont-shuipinghebing
- 下边框
  #luckysheet-iconfont-xiabiankuang
- 设置
  #luckysheet-iconfont-shezhi

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