图标是图形界面中必不可少的设计元素。在传统网页中,图标往往使用图片格式,以img标签或者css background的形式在页面中渲染出来。
使用img标签显示一个图标:
<img src="assets/04/icon_rocket.png" alt="">
使用css background显示一个图标:
.rocket-bg{
background-image: url(icon_rocket.png);
background-size: contain;
width:50px;
height:50px;
}
上面的方法虽然可以把图标显示出来,但也有一些显著的缺点:
为了在网页上显示清晰锐利的图标,同时又确保浏览器兼容性,开发人员使用工具将所有图标都打包为一个字体文件,让页面中的图标以字形(而不是位图)方式渲染,这种字形化的图标就是icon font。