ContextQMD
Back to Luckysheet

IconFont Demo

src/assets/iconfont/demo_index.html

2.1.134.2 KB
Original Source
  •  链接

  •  打印区域

  •  打印页面配置

  •  打印标题

  •  分页预览

  •  普通

  •  页面布局

  •  表格锁定

  •  转到

  •  右箭头

  •  菜单

  •  替换

  •  冻结

  •  剪

  •  加

  •  溢出

  •  升序

  •  内框线

  •  清除筛选

  •  文本向上

  •  降序

  •  内框横线

  •  内框竖线

  •  自定义排序

  •  logo2

  •  logo

  •  文本倾斜

  •  加粗

  •  搜索

  •  关闭

  •  下一个

  •  下拉

  •  文本颜色

  •  上一个

  •  数据透视

  •  填充

  •  增加小数位

  •  编辑2

  •  截屏

  •  减小小数位

  •  菜单

  •  数据库

  •  无边框

  •  编辑

  •  清除样式

  •  删除

  •  文本居中对齐

  •  打印

  •  文本分割

  •  函数‘

  •  降序

  •  顶部对齐

  •  图片

  •  向下90

  •  竖排文字

  •  全加边框

  •  升序

  •  裁剪

  •  金额

  •  菜单1

  •  取消合并

  •  文本下划线

  •  上边框

  •  定位

  •  四周加边框

  •  侧边栏收起

  •  合并

  •  向上倾斜

  •  水平对齐

  •  文本删除线

  •  文本右对齐

  •  前进

  •  图表

  •  右边框

  •  百分号

  •  格式刷

  •  保存

  •  数据验证

  •  截断

  •  格式条件

  •  自动换行

  •  侧边栏展开

  •  筛选2

  •  向下倾斜

  •  溢出

  •  垂直合并

  •  文本分散对齐

  •  左边框

  •  分页查看

  •  运行

  •  列

  •  全屏

  •  筛选

  •  更新

  •  清除

  •  行

  •  注释

  •  剪

  •  计算

  •  加

  •  底部对齐

  •  向上90

  •  无选装

  •  显示隐藏网格

  •  冻结

  •  文本左对齐

  •  后退

  •  水平合并

  •  下边框

  •  设置

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"。