IconFont 图标
-
ppt#icon-ppt
-
excel#icon-excel
-
flash#icon-flash
-
word#icon-word
-
music#icon-music
-
pdf#icon-pdf
-
pic#icon-pic
-
video#icon-video
-
answer-wrong#icon-answer-wrong
-
answer-right#icon-answer-right
-
zip#icon-zip
-
txt#icon-txt
-
rar#icon-rar
-
微课#icon-weike
-
加载#icon-jiazai
-
icon_kecheng_h#icon-kecheng
-
icon_picture list#icon-picturelist
-
icon_shouqi#icon-shouqi
-
icon_shouqixq#icon-shouqixq
-
icon_shouye_h#icon-shouye
-
icon_time#icon-time
-
icon_wode_h#icon-wode
-
icon_xiala#icon-xiala
-
icon_xitongshezhi#icon-xitongshezhi
-
icon_zhankaixq#icon-zhankaixq
-
icon_zhankai#icon-zhankai
-
icon_xuanzhong#icon-xuanzhong
-
icon_add#icon-add
-
icon_jibenxinxi#icon-jibenxinxi
-
icon_list#icon-list
-
icon_more#icon-more
-
icon_people#icon-people
-
icon_mima#icon-pwd
-
icon_zhanghaoanquan#icon-zhanghaoanquan
-
icon_zhanghaoming#icon-account
-
icon_shouye_l#icon-shouye_active
-
icon_kecheng_l#icon-kecheng_active
-
icon_kaoshi_l#icon-kaoshi_active
-
icon_wode_l#icon-wode-active
-
icon_kaoshi#icon-kaoshi
-
icon_study_active#icon-study_active
-
icon_study#icon-study
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>