IconFont 图标
-
图片#drag-i-tupian
-
模块#drag-i-mokuai
-
图片#drag-i-photo
-
配置#drag-i-peizhi
-
list#drag-i-list
-
微考试#drag-i-weikaoshi
-
分享#drag-i-share
-
右对齐#drag-i-a-right
-
笑脸#drag-i-xiaolian
-
style#drag-i-style
-
抢购#drag-i-qianggou
-
分享#drag-i-fenxiang
-
浏览#drag-i-121
-
左对齐#drag-i-a-left
-
保存#drag-i-baocun
-
轮播组图#drag-i-lbt
-
项目#drag-i-xiangmu
-
下#drag-i-xia
-
搜索#drag-i-sc
-
会员#drag-i-huiyuan
-
表单#drag-i-form
-
时间#drag-i-shijian
-
关闭#drag-i-guanbi
-
提示#drag-i-tuli
-
时间#drag-i-time
-
搜索#drag-i-sousuo1
-
导航#drag-i-daohang1
-
分类#drag-i-fenlei
-
编辑器B#drag-i-bold
-
编辑器I#drag-i-Italic
-
编辑器U#drag-i-underline
-
当前页面-01#drag-i-page
-
增加#drag-i-zengjia
-
课程#drag-i-course
-
拖动#drag-i-drag
-
轮播图组件#drag-i-lunbotuzujian
-
list#drag-i-list1
-
当前版本#drag-i-page2
-
files-html#drag-i-fileshtml
-
文字#drag-i-wenzi
-
文件#drag-i-wenjian1
-
正在授课#drag-i-are-taught
-
sql#drag-i-sql
-
文件#drag-i-wenjian
-
导航#drag-i-daohang
-
文章#drag-i-wenzhang
-
yes#drag-i-yes
-
导航#drag-i-nav
-
排版#drag-i-compose
-
按钮#drag-i-anniu
-
按钮#drag-i-btn
-
user#drag-i-xingming
-
表单#drag-i-biaodan
-
中对齐#drag-i-a-center
-
课程#drag-i-kecheng1
-
删除#drag-i-del
-
链接#drag-i-lianjie
-
商品#drag-i-shangpin
-
HTML#drag-i-HTML
-
课程#drag-i-kecheng
-
pen#drag-i-pen
-
考试#drag-i-exam
-
编辑#drag-i-edit
-
文章#drag-i-active
-
文件夹#drag-i-wenjianjia
-
品牌设置#drag-i-pinpaishezhi
-
bottom1#drag-i-xiangxia
-
模版统计#drag-i-mobantongji
-
style#drag-i-style1
-
选择组件#drag-i-xuanzezujian
-
换皮肤#drag-i-style2
-
color#drag-i-color
-
模板#drag-i-moban
-
问题#drag-i-wenti1
-
公告#drag-i-gonggao
-
配置#drag-i-config
-
专家#drag-i-zhuanjia
-
所属机构#drag-i-suoshujigou
-
文件夹#drag-i-wenjianjia1
-
下#drag-i-up
-
预览#drag-i-yulan
-
老师答疑#drag-i-laoshidayi
-
list#drag-i-list2
-
分享链接2#drag-i-link
-
list#drag-i-liebiao
-
下#drag-i-left
-
下#drag-i-right
-
ykq_tab3_试卷#drag-i-ykq_tab_shijuan
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="#drag-i-xxx"></use>
</svg>