图标字形(icon font)

什么是图标字形(icon font)

图标是图形界面中必不可少的设计元素。在传统网页中,图标往往使用图片格式,以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。

如何制作icon font