IconFont 图标
-
html#icon-html1
-
格式刷#icon-geshishua
-
投票#icon-svgmoban04
-
撤销#icon-chexiao
-
删除超链接1#icon-shanchuchaolianjie1
-
有序列表#icon-icxiangmufuhaodaishuzi24px
-
段后距#icon-duanhouju1
-
段前距#icon-duanqianju1
-
斜体#icon-xieti
-
右对齐#icon-youduiqi1
-
左对齐#icon-zuoduiqi2
-
右浮动#icon-youfudong1
-
左浮动#icon-zuofudong1
-
清空文档#icon-qingkongwendang
-
居中浮动#icon-juzhongfudong
-
默认#icon-moren
-
字体阴影#icon-zitiyinying
-
视频#icon-shipin
-
702编辑器_重做#icon-702bianjiqi_zhongzuo
-
712编辑器_自动排版#icon-712bianjiqi_zidongpaiban
-
761编辑器_特殊字符#icon-761bianjiqi_teshuzifu
-
加粗#icon-jiacu
-
word#icon-word1
-
列表无序#icon-liebiaowuxu
-
超链接#icon-chaolianjie
-
背景色#icon-beijingse
-
字体颜色#icon-zitiyanse
-
居中#icon-juzhong2
-
行间距_icon#icon-hangjianju_icon
-
投票#icon-toupiao
-
图片 (1)#icon-tupian
-
分割线#icon-fengexian
-
全屏#icon-quanping
-
表情#icon-comment-face3
-
下划线#icon-xiahuaxian
-
采集文章#icon-caijiwenzhang
-
删除线#icon-shanchuxian
-
音频#icon-yinpin
-
清除格式#icon-qingchugeshi
-
表格#icon-biaoge
-
两边对齐#icon-liangbianduiqi1
-
上标#icon-shangbiao
-
下标#icon-xiabiao
-
缩进#icon-suojin
-
字符边框#icon-zifubiankuang
-
引用#icon-yinyong
symbol引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:
- 支持多色图标了,不再受单色限制。
- 通过一些技巧,支持像字体那样,通过
font-size,color来调整样式。 - 兼容性较差,支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般,还不如png。
使用步骤如下:
第一步:引入项目下面生成的symbol代码:
<script src="./iconfont.js"></script>
第二步:加入通用css代码(引入一次就行):
<style type="text/css">
.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>