IconFont 图标
-
微信#icon-weixin
-
书法#icon-shufa
-
密码#icon-mima1
-
删除#icon-icon
-
qq#icon-qq
-
高考#icon-icon2
-
剪刀#icon-jiandao
-
时间#icon-shijian
-
展开#icon-zhankai
-
小提琴#icon-xiaotiqin
-
消息#icon-xiaoxi
-
正确#icon-zhengque
-
蛋糕西点#icon-dangaoxidian
-
我的#icon-wode
-
运动#icon-badaxilietubiao01
-
密码#icon-mima
-
外语#icon-waiyu
-
日本语#icon-ribenyu
-
推荐#icon-tuijian
-
支付宝#icon-zhifubao
-
坐标-0#icon-zuobiao0
-
棋牌游戏#icon-102360
-
坡度尺#icon-poduchi
-
证#icon-zheng
-
声乐合唱类#icon-weixinduansvgtubiao03
-
致优英语图#icon-yingyu
-
课程#icon-icon1
-
箭头左#icon-jiantouzuo
-
学校#icon-xuexiao
-
艺术2#icon-art02-alt
-
报考新规#icon-baokaoxingui
-
钱包#icon-552cd71a8a190
-
博士帽#icon-boshimao-copy
-
头像#icon-touxiang-copy
-
健康指导#icon-jiankangzhidao
-
推荐#icon-tuijian1
-
叉#icon-artboard1
-
帐篷#icon-zhangpeng
-
首页#icon-shouye
-
奶瓶#icon-naiping
-
其它#icon-other
-
舞蹈#icon-wudao
-
日历#icon-rili1
-
ic_函数_24px#icon-ichanshu24px
-
勾选#icon-gouxuan-copy
-
补课次数#icon-bukecishu
-
绘画#icon-huihua
-
手机#icon-shouji
-
运动-武术#icon-hfenlei8-copy
-
书#icon-shu
-
学校#icon-xuexiao1
-
日历#icon-rili
-
留学考试#icon-liuxuekaoshi
-
韩国#icon-hanguo
-
支付#icon-zhifu
-
媒体档案#icon-meitidangan
-
箭头右箭头#icon-jiantouyoujiantou
-
外卖服务-使用方便#icon-waimaifuwu-shiyongfangbian
-
分享#icon-fenxiang
-
iconfont-5#icon-iconfont5
-
chevron-thin-down#icon-chevron-thin-down
-
chevron-thin-up#icon-chevron-thin-up
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>