IconFont 图标
-
资料库#icon-book-2
-
插件#icon-chajian
-
用研#icon-pen
-
通知#icon-tongzhi
-
认证#icon-renzheng
-
图书#icon-tushu
-
皇冠#icon-huangguan
-
进口商品#icon-jinkoushangpin
-
生鲜水果#icon-shengxianshuiguo
-
直播间#icon-zhibojian
-
备注#icon-beizhu
-
round_check_fill#icon-roundcheckfill
-
round_check#icon-roundcheck
-
round_close_fill#icon-roundclosefill
-
round_close#icon-roundclose
-
warn_fill#icon-warnfill
-
question_fill#icon-questionfill
-
more_android#icon-more
-
关联 绑定#icon-guanlianbangding
-
天猫提示-提醒#icon-tixing
-
搜索#icon-search
-
换一批#icon-refresh
-
朋友圈#icon-pengyouquan
-
新浪#icon-xinlang
-
微信#icon-weixin
-
返回7#icon-fanhui7
-
返回5#icon-fanhui5
-
更多#icon-more-b
-
收藏-选中#icon-shoucangxuanzhong
-
creative_fill#icon-creativefill
-
creative#icon-creative
-
旅游特惠#icon-find
-
城市服务#icon-city
-
教育缴费#icon-school
-
服务窗B#icon-flag-star
-
探索A#icon-earth-a
-
探索B#icon-earth
-
头像#icon-iconfontnanshangjia
-
会员客户#icon-huiyuankehu
-
present_fill#icon-presentfill
-
图片_填充#icon-images
-
community_fill#icon-communityfill
-
3.1关注-选中#icon-31guanzhuxuanzhong
-
3.1关注#icon-31guanzhu
-
3.1我的-选中#icon-mine
-
3.1我的#icon-mine-a
-
3.1 签到#icon-31qiandao
-
ios-cog#icon-ioscog
-
hot_fill#icon-hotfill
-
write_fill#icon-writefill
-
kuaisufan#icon-kuaisufan
-
wbdicon-android#icon-android
-
wbdicon-apple#icon-ios
-
优惠#icon-youhui
-
不可见#icon-bukejian
-
其他文档#icon-qitawendang
-
性别男#icon-xingbienan
-
性别女#icon-xingbienv
-
iconfont-5#icon-iconfont5
-
同步收藏#icon-tongbushoucang
-
二维码#icon-qrcode
-
链接#icon-link
-
上翻#icon-up
-
设置#icon-set
-
声音#icon-shengyin
-
下翻#icon-down
-
向右箭头#icon-xiangyoujiantou
-
向左箭头#icon-xiangzuojiantou
-
另存为#icon-lingcunwei
-
火#icon-hot
-
其他#icon-qita
-
代码#icon-ai-code
-
but-状态标记#icon-flag-2
-
隐藏#icon-yincang
-
skin_fill#icon-skinfill
-
对号#icon-right
-
关闭箭头#icon-close
-
滤镜#icon-lvjing
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>