IconFont 图标
-
看板任务#icon-kanbanrenwu
-
阅读#icon-yuedu
-
信息#icon-message
-
评论#icon-pinglun2
-
下载#icon-xiazai1
-
每日食谱#icon-meirishipu
-
信封1#icon-xinfeng1
-
分享#icon-fenxiang
-
儿童#icon-10
-
手机#icon-shouji
-
儿童#icon-ertong
-
添加#icon-tianjia
-
班级#icon-banji
-
个人#icon-iconfont31wode
-
查看#icon-chakan
-
收藏#icon-shoucang1
-
暂停#icon-zanting
-
评论#icon-203
-
后退#icon-guanbi
-
足迹#icon-1
-
编辑 笔#icon-bianjibi
-
选择#icon-choose
-
选择#icon-xuanze
-
密码#icon-mima54
-
搜索#icon-sousuo1
-
返回#icon-4
-
设置#icon-shezhi1
-
收藏#icon-shoucang2
-
20评论#icon-pinglun1
-
笔#icon-bi1
-
14 营养食谱#icon-14yingyangshipu
-
后退#icon-houtui
-
前进#icon-qianjin
-
通知#icon-tongzhi
-
三角形-up#icon-sanjiaoxing-up
-
三角形-down#icon-sanjiaoxing-down
-
图书馆#icon-tushuguan
-
点赞#icon-dianzan1
-
分享#icon-fenxiang2
-
联系#icon-lianxi
-
编辑#icon-bianji
-
客服#icon-linedesign-20
-
笔#icon-bi
-
收藏#icon-shoucang3
-
已通过#icon-yitongguo
-
审核中#icon-shenhezhong
-
play#icon-play
-
图书#icon-tushu
-
考勤#icon-kaoqin
-
未通过#icon-weitongguo
-
pencil#icon-pencil
-
信息#icon-xinxi1
-
考勤#icon-kaoqin1
-
收藏#icon-shoucang
-
员工列表#icon-yuangongliebiao
-
设置#icon-shezhi
-
设置#icon-shezhi2
-
新闻#icon-xinwen2
-
我的请假单#icon-wodeqingjiadan
-
审核不通过#icon-shenhebutongguo
-
偷听#icon-touting
-
公告#icon-bulletin
-
评论小#icon-pinglunxiao
-
签到#icon-qiandao
-
经纪人#icon-jingjiren
-
男#icon-nan
-
女#icon-nv
-
右上箭头#icon-arrow-right-top
-
客服#icon-kefu
-
不通过#icon-butongguo
-
通过#icon-tongguo
-
评论#icon-pinglun
-
审核中#icon-shenhezhong1
-
热门hot#icon-hot
-
删除#icon-shanchu
-
点赞#icon-dianzan
-
班级#icon-banji1
-
挑选绘本#icon-tiaoxuanhuiben1
-
收藏#icon-collection
-
搜索#icon-sousuo
-
班级#icon-banji2
-
三角形-up#icon-sanjiaoxing-up-copy
-
信封#icon-icon---copy
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>