IconFont 图标
-
订单#icon-order
-
充值#icon-chongzhi
-
上三角#icon-shangsanjiao
-
社区#icon-shequ
-
cart#icon-cart
-
任务#icon-renwu
-
账户充值#icon-czlog
-
icon_商品分类#icon-iconshangpinfenlei
-
产品#icon-product
-
右#icon-you
-
左#icon-zuo
-
出价竞拍#icon-chujiajingpai
-
menu#icon-menu
-
minus#icon-minus
-
plus#icon-plus
-
unfold#icon-unfold
-
top#icon-gotop
-
home#icon-home
-
评论#icon-comment
-
留言板#icon-guest
-
用户#icon-yonghu
-
全部#icon-quanbu
-
search#icon-search
-
fold#icon-fold
-
轻松收货#icon-shdz
-
关闭#icon-close
-
文章#icon-article
-
主题排行#icon-paihang
-
热门产品#icon-remenchanpin
-
关于#icon-about
-
user#icon-user
-
product#icon-product1
-
育心日记本#icon-riji
-
11 home#icon-home-sx
-
上传#icon-upload
-
分享#icon-fenxiang
-
phone#icon-phoner
-
返回#icon-back
-
拍照#icon-paizhao
-
我的店铺#icon-shop
-
search#icon-search1
-
注销#icon-logout
-
逛街#icon-guangjie
-
收支明细#icon-szlog
-
手机#icon-telephone
-
写评论#icon-xiepinglun
-
手#icon-shou
-
菜单#icon-liebiao
-
消息D#icon-bell-kx
-
消息提醒#icon-bell
-
icon_Write#icon-write
-
雨滴3#icon-yudi
-
enclosure#icon-desc
-
map#icon-map
-
赞#icon-love
-
账单付费#icon-zhangdan
-
user#icon-user-kx
-
兑换订单#icon-dhdd
-
商家名称#icon-shopadmin
-
修改密码#icon-pwd
-
外卖#icon-waimai
-
兼职招聘#icon-job
-
便民工具#icon-bianmin
-
国内配送#icon-peisong
-
星星#icon-xingxing
-
评论#icon-wx-tan
-
更多信息#icon-more
-
时间#icon-time
-
评论#icon-wx-comment
-
下拉三角#icon-xiasanjiao
-
奖杯#icon-jiangbei
-
icon_约跳聊天#icon-chat
-
便民#icon-bianmin1
-
热门主题#icon-hottopic
-
保存#icon-save
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>
实际情况中"iconfont"(font-family)需要修改为你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。