- Iconfont 是指用字体文件取代图片文件,来展示图标、特殊字体等元素的一种方法。很多网站都会用它,比如手淘、新浪微博等。
- 在使用它之前,先来了解一下它的优缺点:
- 优点:(1)文件加载体积小;(2)可以直接通过css的font-size,color修改它的大小和颜色,对于需要缩放多个尺寸的图标,是个很好的解决方案;(3)支持一些css3对文字的效果,例如:阴影、旋转、透明度;(4)兼容低版本浏览器。
- 缺点:(1)矢量图只能是纯色的。(2)制作门槛高,耗时长,维护成本也很高。
- 使用:
在index.html
中加载资源文件。
<!-- 加载资源文件 -->
<link rel="stylesheet" href="<%= BASE_URL %>iconfont/iconfont.css">
在需要的地方引用:<i class="iconfont icon-agriculture"></i>
即可。