IconFont 图标
-
app#icon-app
-
computer#icon-computer
-
edit#icon-edit
-
folder#icon-folder
-
information#icon-information
-
mail#icon-mail
-
mark#icon-mark
-
message#icon-message
-
phone#icon-phone
-
rest#icon-rest
-
edit#icon-edit1
-
pic#icon-pic
-
survey#icon-survey
-
account#icon-account
-
calendar#icon-calendar
-
3column#icon-3column
-
4column#icon-4column
-
box#icon-box
-
pin#icon-pin
-
product-features#icon-productfeatures
-
supplier-features#icon-supplierfeatures
-
office#icon-office
-
personal-center#icon-gerenzhongxin
-
rejected-order#icon-rejectedorder
-
bussiness-man#icon-bussinessman
-
Mobile-phone#icon-mobilephone
-
wxb报表#icon-wxbbaobiao
-
wxb工具#icon-wxbgongju
-
list view#icon-listview
-
人文#icon-renwen
-
适中#icon-shizhong
-
图片#icon-tupian
-
悠闲#icon-youxian
-
娱乐#icon-yule
-
智能优化#icon-zhinengyouhua
-
中转#icon-zhongzhuan
-
自然风光#icon-ziranfengguang
-
自行车#icon-zixingche
-
综合#icon-zonghe
-
起飞#icon-qifei
-
步行#icon-buxing
-
差评#icon-chaping
-
好评#icon-haoping
-
提醒#icon-tixing
-
其他#icon-qita
-
舒适度#icon-shushidu
-
inquiry-template#icon-inquirytemplate
-
template-default#icon-templatedefault
-
safari#icon-safari
-
iconfont-youhuiquan#icon-iconfontyouhuiquan
-
iconfont-mingpian#icon-iconfontmingpian
-
如期发货#icon-ruqifahuo
-
隐藏可见#icon-yingckjian
-
赞_S#icon-zans
-
list_组合#icon-listzuhe
-
survey#icon-survey1
-
data#icon-data
-
all#icon-all
-
account#icon-account1
-
browse#icon-browse
-
text#icon-text
-
signboard#icon-signboard
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>