IconFont 图标
-
更多#icon-msnui-more
-
all#icon-all
-
back#icon-back
-
cart#icon-cart
-
Category#icon-category
-
close#icon-close
-
comments#icon-comments
-
cry#icon-cry
-
delete#icon-delete
-
edit#icon-edit
-
email#icon-email
-
form#icon-form
-
help#icon-help
-
information#icon-information
-
less#icon-less
-
more_unfold#icon-moreunfold
-
more#icon-more
-
pic#icon-pic
-
refresh#icon-refresh
-
RFQ#icon-rfq
-
search#icon-search
-
selected#icon-selected
-
set#icon-set
-
Smile#icon-smile
-
success#icon-success
-
ViewGallery#icon-viewgallery
-
warning#icon-warning
-
wrong#icon-wrong
-
account#icon-account
-
add#icon-add
-
clock#icon-clock
-
remind#icon-remind
-
attachment#icon-attachment
-
discount#icon-discount
-
process#icon-process
-
electronics#icon-electronics
-
scanning#icon-scanning
-
pin#icon-pin
-
cut#icon-cut
-
nav-list#icon-navlist
-
text#icon-text
-
download#icon-icondownload
-
map#icon-map
-
iconfont-laba#icon-iconfontlaba
-
bad#icon-bad
-
good#icon-good
-
skip#icon-skip
-
play#icon-iconfontplay2
-
phone#icon-phone
-
Mobile-phone#icon-mobilephone
-
wxb工具#icon-wxbgongju
-
wxb主页#icon-wxbzhuye
-
copy#icon-copy
-
save#icon-save
-
地址#icon-dizhi
-
edit-b#icon-0602bianji
-
人民币#icon-renminbi
-
email#icon-icon-email
-
更多#icon-ai213
-
hot#icon-hot
-
data#icon-data
-
trade#icon-trade
-
公交#icon-gongjiao
-
地址#icon-dizhi1
-
更多#icon-more-br
-
更多#icon-gengduo-2
-
更多#icon-gengduo-21
-
color#icon-color
-
旗子#icon-qizi
-
logistic#icon-logistic
-
点#icon-dian
-
video#icon-video
-
password#icon-password
-
星#icon-xing
-
code#icon-code
-
动作#icon-dongzuo
-
竞速#icon-jingsu
-
角色#icon-jiaose
-
冒险#icon-maoxian
-
射击#icon-sheji
-
其他#icon-qita
-
体育#icon-tiyu
-
格斗#icon-gedou
-
用户#icon-user
-
公共-红旗#icon-hongqi
-
camera#icon-camera
-
留言#icon-liuyan
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>