IconFont 图标
-
列表#icon-liebiao
-
电脑#icon-diannao
-
日历#icon-rili
-
home#icon-home7
-
关闭#icon-guanbi
-
垃圾桶#icon-lajitong
-
退出#icon-tuichu
-
完成#icon-icon51
-
垃圾桶#icon-lajitong1
-
向下#icon-icon123
-
文件删除#icon-wenjianshanchu
-
公告#icon-gonggao
-
通知#icon-tongzhi
-
消息#icon-xiaoxi
-
人力资源管理#icon-iconfontrenliziyuan
-
右#icon-right
-
个人中心#icon-gerenzhongxinb
-
列表#icon-listpress
-
右#icon-icon
-
列表#icon-work
-
配置#icon-peizhi
-
密码#icon-mima
-
消息#icon-xiaoxizhongxin
-
公告#icon-gonggao1
-
信息#icon-xinxi
-
公告#icon-gonggao2
-
右#icon-right-circle-true
-
左#icon-left-circle-ture
-
成本-实心#icon-chengbenshixin
-
全屏#icon-quanping
-
省略号#icon-shenglvehao
-
电脑#icon-compute
-
列表#icon-liebiao-copy
-
右侧菜单#icon-youcecaidan
-
箭头#icon-u-arrow3-left
-
箭头#icon-u-arrow3-right
-
add#icon-add
-
降低成本#icon-jiangdichengben
-
文件夹#icon-wenjianjia
-
保存#icon-baocun
-
箭头#icon-arrow-left-copy
-
箭头#icon-arrow-left-copy1
-
问市场#icon-wenshichang
-
列表#icon-liebiao1
-
个人中心#icon-gerenzhongxin
-
上传#icon-shangchuan
-
向下#icon-xiangxia
-
944菜单_机制#icon-944caidan_jizhi
-
个人中心#icon-gerenzhongxin1
-
审批#icon-shenpi
-
项目#icon-xiangmu
-
上传#icon-upload-copy
-
校园门户#icon-xiaoyuanmenhu
-
任务#icon-renwu
-
箭头#icon-arrow
-
箭头#icon-jiantou
-
我的任务#icon-woderenwu
-
文件夹#icon-wenjianjia1
-
左边#icon-zuobian
-
首页_首页#icon-shouye_shouye
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>