IconFont 图标
-
锁#icon-suo
-
分类#icon-type
-
790-太平洋保险#icon-CPIC
-
dot#icon-dot
-
单选#icon-radio
-
睁眼#icon-zhengyan
-
箭头#icon-jiantou
-
关闭#icon-guanbi
-
已使用#icon-yishiyong
-
emi成功#icon-emichenggong
-
iPhone#icon-iphone
-
eye#icon-eye
-
闭眼#icon-biyan
-
login#icon-login
-
分类#icon-fenlei
-
time#icon-time
-
返回#icon-fanhui
-
优惠券#icon-weibiaoti1
-
iphone#icon-iphone1
-
更多#icon-gengduo
-
已过期#icon-yiguoqi
-
add#icon-add
-
top#icon-top
-
记录#icon-jilu
-
分类#icon-fenlei1
-
icon_date#icon-icondate
-
箭头#icon-jiantou-copy
-
coupon#icon-coupon1
-
购物车#icon-gouwuche-01
-
搜索 (2)#icon-sousuo
-
我的#icon-wode
-
选中#icon-xuanzhong
-
提示#icon-tishi
-
safe#icon-safe
-
对号#icon-finish
-
fresh#icon-fresh
-
定位#icon-dingwei
-
疑问#icon-yiwen
-
购物车空#icon-gouwuchekong
-
首页#icon-shouye
-
优惠券#icon-youhuiquan
-
失败#icon-shibai
-
首页#icon-shouye1
-
编辑#icon-bianji
-
购物车空#icon-gouwuchekong1
-
车#icon-che
-
关闭#icon-guanbi1
-
输入图片验证码14*14#icon-tyam
-
设置#icon-shezhi
-
icon_My coupon#icon-icon_Mycoupon
-
删 除 (1)#icon-shanchu
-
网页版首页#icon-menu1
-
网页版首页2#icon-menu2
-
网页版首页3#icon-menu3
-
网页版首页4#icon-menu4
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>