++ + +
- Unicode @@ -30,6 +54,138 @@
-
+
+ excel++
+
+
-
+
+ 保存++
+
+
-
+
+ 关 闭++
+
+
-
+
+ pdf++
+
+
-
+
+ 复制++
+
+
-
+
+ 020空心饼图++
+
+
-
+
+ 时间++
+
+
-
+
+ 保存++
+
+
-
+
+ 图片++
+
+
-
+
+ 柱状图++
+
+
-
+
+ 超链接++
+
+
-
+
+ 文本++
+
+
-
+
+ 视频++
+
+
-
+
+ 框架++
+
+
-
+
+ 预览++
+
+
-
+
+ 横向文字++
+
+
-
+
+ 图表 _饼图++
+
+
-
+
+ 漏斗图++
+
+
-
+
+ 图表 折线图++
+
+
-
+
+ 柱线图++
+
+
-
+
+ 图片++
+
+
-
+
+ 仪表盘++
+
-
返回@@ -493,24 +649,20 @@
Unicode 是字体在网页端最原始的应用方式,特点是:
-
-
- 兼容性最好,支持 IE6+,及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小,颜色等等。 -
- 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。 +
- 默认情况下不支持多色,直接添加多色图标会自动去色。
-
注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式
+注意:新版 iconfont 支持两种方式引用多色图标:SVG 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'); + src: url('iconfont.woff2?t=1624608582557') format('woff2'), + url('iconfont.woff?t=1624608582557') format('woff'), + url('iconfont.ttf?t=1624608582557') format('truetype'); }
第二步:定义使用 iconfont 的样式
@@ -536,6 +688,204 @@-
+
-
+
+ + excel ++.iconexcel ++
+
+
-
+
+ + 保存 ++.iconbaocun ++
+
+
-
+
+ + 关 闭 ++.iconguanbi ++
+
+
-
+
+ + pdf ++.iconpdf ++
+
+
-
+
+ + 复制 ++.iconfuzhi ++
+
+
-
+
+ + 020空心饼图 ++.icon020kongxinbingtu ++
+
+
-
+
+ + 时间 ++.iconshijian ++
+
+
-
+
+ + 保存 ++.iconsave ++
+
+
-
+
+ + 图片 ++.icontupian ++
+
+
-
+
+ + 柱状图 ++.iconzhuzhuangtu ++
+
+
-
+
+ + 超链接 ++.iconchaolianjie ++
+
+
-
+
+ + 文本 ++.iconziyuan ++
+
+
-
+
+ + 视频 ++.iconshipin ++
+
+
-
+
+ + 框架 ++.iconkuangjia ++
+
+
-
+
+ + 预览 ++.iconyulan ++
+
+
-
+
+ + 横向文字 ++.iconhengxiangwenzi ++
+
+
-
+
+ + 图表 _饼图 ++.iconicon_tubiao_bingtu ++
+
+
-
+
+ + 漏斗图 ++.iconloudoutu ++
+
+
-
+
+ + 图表 折线图 ++.icontubiaozhexiantu ++
+
+
-
+
+ + 柱线图 ++.iconzhuxiantu ++
+
+
-
+
+ + 图片 ++.icontupian1 ++
+
+
-
+
+ + 仪表盘 ++.iconyibiaopan ++
+
-
@@ -1228,10 +1578,8 @@
font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。
与 Unicode 使用方式相比,具有如下特点:
-
-
- 兼容性良好,支持 IE8+,及所有现代浏览器。
- 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
- 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。 -
- 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
使用步骤如下:
第一步:引入项目下面生成的 fontclass 代码:
@@ -1249,6 +1597,182 @@-
+
-
+
+ excel+#iconexcel+
+
+
-
+
+ 保存+#iconbaocun+
+
+
-
+
+ 关 闭+#iconguanbi+
+
+
-
+
+ pdf+#iconpdf+
+
+
-
+
+ 复制+#iconfuzhi+
+
+
-
+
+ 020空心饼图+#icon020kongxinbingtu+
+
+
-
+
+ 时间+#iconshijian+
+
+
-
+
+ 保存+#iconsave+
+
+
-
+
+ 图片+#icontupian+
+
+
-
+
+ 柱状图+#iconzhuzhuangtu+
+
+
-
+
+ 超链接+#iconchaolianjie+
+
+
-
+
+ 文本+#iconziyuan+
+
+
-
+
+ 视频+#iconshipin+
+
+
-
+
+ 框架+#iconkuangjia+
+
+
-
+
+ 预览+#iconyulan+
+
+
-
+
+ 横向文字+#iconhengxiangwenzi+
+
+
-
+
+ 图表 _饼图+#iconicon_tubiao_bingtu+
+
+
-
+
+ 漏斗图+#iconloudoutu+
+
+
-
+
+ 图表 折线图+#icontubiaozhexiantu+
+
+
-
+
+ 柱线图+#iconzhuxiantu+
+
+
-
+
+ 图片+#icontupian1+
+
+
-
+
+ 仪表盘+#iconyibiaopan+
+
-
+