在项目开发中,难免在标签栏,工具栏等应用各类各样的小图标。css
而后老旧的作法就是要UI设计出各类图标并生成图片给到咱们,可是这样就存在了一个问题,每次请求页面的时候就须要发送请求请求图片,这样难免就增长了http的请求,加大了页面的载入速度,再则图片数量的增多也加大了服务器的压力。web
如今,咱们能够通用应用iconfont,阿里巴巴的图标库:浏览器
http://www.iconfont.cn/
直接获取知足需求的各类小图标,而且知足各类格式的转换,字体,图标等。能够经过字体的方式在页面中绘制出图标来。服务器
能够有三种格式的图标选择:Unicode,Font Class,Symbolsvg
unicode是字体在网页端最原始的应用方式,特色是:工具
注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,若是有需求建议使用symbol的引用方式性能
unicode使用步骤:字体
第一步:拷贝项目下面生成的font-face编码
1 @font-face { 2 font-family: 'iconfont'; 3 src: url('iconfont.eot'); 4 src: url('iconfont.eot?#iefix') format('embedded-opentype'), 5 url('iconfont.woff') format('woff'), 6 url('iconfont.ttf') format('truetype'), 7 url('iconfont.svg#iconfont') format('svg'); 8 }
第二步:定义使用iconfont的样式url
1 .iconfont{ 2 font-family:"iconfont" !important; 3 font-size:16px;font-style:normal; 4 -webkit-font-smoothing: antialiased; 5 -webkit-text-stroke-width: 0.2px; 6 -moz-osx-font-smoothing: grayscale; 7 }
第三步:挑选相应图标并获取字体编码,应用于页面
<i class="iconfont">3</i>
font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。
与unicode使用方式相比,具备以下特色:
font-class使用步骤:
第一步:引入项目下面生成的fontclass代码:
备注:也可运用在线生成的css
<link rel="stylesheet" type="text/css" href="./iconfont.css">
第二步:挑选相应图标并获取类名,应用于页面:
<i class="iconfont icon-xxx"></i>
这是一种全新的使用方式,应该说这才是将来的主流,也是平台目前推荐的用法。相关介绍能够参考这篇文章 这种用法实际上是作了一个svg的集合,与另外两种相比具备以下特色:
font-size
,color
来调整样式。使用步骤以下:
第一步:引入项目下面生成的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>