IconFont 图标
-
照片#icon-zhaopian
-
个人资料#icon-gerenziliao
-
设置#icon-shezhi
-
微信#icon-weixin
-
QQ#icon-QQ
-
发布#icon-fabu
-
问号#icon-14052218
-
下箭头#icon-xiajiantou
-
箭头右#icon-jiantouyou
-
favor_fill#icon-favorfill
-
comment#icon-comment
-
帮助#icon-bangzhu
-
wifi#icon-wifi1
-
垃圾箱#icon-lajixiang
-
收藏#icon-35
-
下载#icon-xiazai
-
右箭头#icon-youjiantou
-
日历#icon-rili
-
赞#icon-zan
-
新浪#icon-xinlang
-
男#icon-shouyezhuyetubiao06
-
女#icon-shouyezhuyetubiao07
-
下箭头#icon-xiajiantou1
-
设置#icon-set
-
右箭头#icon-youjiantou1
-
关闭#icon-androidcancel
-
扫一扫#icon-saoyisao
-
箭头右_Line#icon-jiantouyouline
-
关闭#icon-guanbi
-
个人资料#icon-gerenziliao1
-
分享#icon-share
-
系统#icon-xitong
-
城市#icon-chengshi
-
清除缓存#icon-qingchuhuancun
-
反馈#icon-fankui
-
attention_fill#icon-attentionfill
-
添加#icon-icon02
-
课程#icon-lesson
-
password#icon-password
-
右箭头#icon-dashangpinglun18
-
钱#icon-qian1
-
星星#icon-wodedingdan21
-
分享#icon-fenxiang1
-
关闭#icon-guanbi1
-
收藏#icon-shoucang1
-
评论#icon-pinglun1
-
收藏藏#icon-shoucangcang
-
搜索类别#icon-sousuoleibie
-
问号#icon-wenhao
-
关于#icon-guanyu
-
发布#icon-plus1187514easyiconnet
-
爱心#icon-aixin
-
时间#icon-time
-
密码不可见#icon-iconfont32pxmimabukejian
-
退出登录#icon-iconfontguanji
-
帮助#icon-iconfontlipinduihuanbangzhu
-
修改密码#icon-iconfontmima
-
wifi#icon-wifi
-
热门城市#icon-remenchengshi
-
评论#icon-chat
-
课程#icon-icon
-
查看#icon-204
-
眼睛#icon-iconset0207
-
积分#icon-integral
-
用户#icon-iconyonghu
-
关闭#icon-guanbi2
-
童锁#icon-tongsuo
-
建议#icon-jianyi
-
评论#icon-iconfontpinglun
-
提醒#icon-tixing
-
地址#icon-dizhi1
-
地址#icon-dizhi
-
时间#icon-shijian
-
地址#icon-location
-
升级#icon-shengji
-
男#icon-nan
-
女#icon-nv
-
实名认证#icon-shimingrenzheng
-
手机认证#icon-shoujirenzheng
-
我的动态#icon-wodedongtai
-
收藏#icon-shoucang
-
未手机认证#icon-weishoujirenzheng
-
未实名认证#icon-weishimingrenzheng
-
我的收藏#icon-wodeshoucang
-
back#icon-back
-
close#icon-close
-
search#icon-search
-
jzuojiantou#icon-jzuojiantou
-
下箭头#icon-xiajiantou2
-
积分#icon-jifen
-
宝宝#icon-weibiaoti202-copy
-
积分#icon-jifen1
-
烤箱#icon-kaoxiang
-
实名认证#icon-shimingrenzheng1
-
分销商品#icon-fenxiaoshangpin
-
爱心#icon-aixin2
-
分销-商品佣金#icon-fenxiaoshangpinyongjin
-
历史记录#icon-lishijilu
-
清除缓存#icon-qingchuhuancun1
-
性别-女#icon-xingbienv
-
历史记录#icon-lishijilu3
-
日历#icon-rili1
-
发布#icon-btnpublishdefault
-
历史记录#icon-lishijilu1
-
问号#icon-wenhao2
-
钱#icon-qian
-
向右#icon-xiangyou
-
退出登录#icon-tuichudenglu
-
昵称#icon-nicheng
-
搜索#icon-sousuo
-
标签#icon-biaoqian
-
share_light#icon-share_light
-
appreciate_light#icon-appreciate_light
-
appreciate_fill_light#icon-appreciate_fill_light
-
评论#icon-pinglun
-
订单#icon-dingdan
-
爱心#icon-aixin1
-
历史记录#icon-lishijilu2
-
星星#icon-xingxing
-
垃圾桶#icon-lajitong
-
历史记录#icon-lishijilu_huabanfuben
-
优惠券#icon-youhuiquan
-
皇冠#icon-king
-
活动专题#icon-tubiaozhizuomoban
-
订单#icon-dingdan1
-
购物车#icon-gouwuche
-
知识#icon-zhishi
-
皇冠#icon-huangguan
-
每月提醒#icon-memo_month
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>