IconFont 图标
-
close#icon-close
-
emoji#icon-emoji
-
favor_fill#icon-favorfill
-
favor#icon-favor
-
location_fill#icon-locationfill
-
location#icon-location
-
round_check_fill#icon-roundcheckfill
-
round_check#icon-roundcheck
-
round_close_fill#icon-roundclosefill
-
round_close#icon-roundclose
-
time_fill#icon-timefill
-
time#icon-time
-
comment_fill#icon-commentfill
-
comment#icon-comment
-
like_fill#icon-likefill
-
like#icon-like
-
discover#icon-discover
-
more#icon-more
-
top#icon-top
-
delete#icon-delete
-
discover_fill#icon-discoverfill
-
ic_admin_me#icon-me
-
redpacket#icon-redpacket
-
selection_fill#icon-selectionfill
-
forward_fill#icon-forwardfill
-
forward#icon-forward
-
recharge_fill#icon-rechargefill
-
recharge#icon-recharge
-
phone#icon-phone
-
支付宝钱包#icon-zhifubaofill
-
转账#icon-zhuanzhang
-
手机通讯录#icon-contacts
-
设置#icon-shezhi
-
付款码#icon-fukuanma
-
search#icon-search
-
mark_fill#icon-markfill
-
mark#icon-mark
-
flower#icon-flower
-
share#icon-share
-
emoji-smile#icon-emojismile
-
crown_fill#icon-crownfill
-
crown#icon-crown
-
picture#icon-picture
-
Incentive bonuses#icon-bonus
-
link#icon-link
-
lightning#icon-lightning
-
right#icon-right-copy
-
download_2f#icon-download
-
07#icon-activity
-
23#icon-message
-
25#icon-weixin
-
29#icon-qq
-
diamond#icon-diamond
-
二维码#icon-qrcode
-
app#icon-app
-
me#icon-mefill
-
edit#icon-edit
-
diamond#icon-diamond1
-
camera-party-mode#icon-camera
-
home#icon-home
-
发起人#icon-faqiren
-
me1#icon-me1
-
scan#icon-scan
-
discover_line#icon-discoverline
-
discover_shape#icon-discovershape
-
book#icon-book
-
图片#icon-tupian
-
read#icon-readfill
-
pengyouquan#icon-pengyouquanfill
-
朋友圈#icon-pengyouquan
-
yxx_qqzone#icon-qqkongjian
-
yxx_alipay#icon-zhifubao
-
card#icon-card
-
set#icon-setting
-
iocn- left#icon-zuosvg
-
iocn-right#icon-yousvg
-
iocn-upward#icon-shangsvg
-
iocn- down#icon-xiasvg
-
评分#icon-pingfen
-
redpacket_fill#icon-redpacket_fill
-
flower#icon-flower1
-
7点赞2#icon-zaned
-
7点赞#icon-zan
-
QQ2#icon-qq1
-
微信2#icon-weixin1
-
女#icon-nv
-
男#icon-nan
-
selected#icon-selected
-
wifi-#icon-wifi
-
rank#icon-rank
-
example#icon-example
-
lightbulb#icon-light
-
ios-qr-scanner#icon-qr-scanner
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>