Font Awesome 字体图标的使用小记

提到Font Awesome 可能大家都不陌生，它是Bootstrap中的一员，可以在前端开发时将图标以矢量的形式保存在字体中，然后在web前端通过调用这个字体来显示对应的图标。在早先的文章图标字体运用以及其优势与劣势中提到过关于字体图标的详细介绍。

以往做web页面图标时，都是采用的gif或者png的透明格式对图标进行处理。这些图标体积小、数量多，虽然使用css sprite可以解决请求数和图片体积的问题，但是这些图标的大小是固定的。而且在透明度的处理上，始终无法那么的完美，尤其是用在具有调换背景色功能的页面中，该缺陷更是明显。

与图片图标相比，字体图标的优势就要大的多。由于字体图标是矢量图，因此无论将其放大多少倍都可以保持其最原始的形态，不会出现模糊与变形的问题。其次是字体图标不用考虑如何处理透明度的问题，而且字体图标可以通过css样式来修改它的颜色，使其更容易操控与改变。

Font Awesome目前已经升级到3.0版本，其中包含了249 个图标，并且能够支持IE7以上浏览器。在frontopen2主题的v1.4.03.08版本中已经进行了实装。总体来看效果不错。

图标字体与图片字体使用时的差别

1.字体图标不能以background的方式进行调用，因此想要使其能够自适应垂直居中比较困难，应用时需要多注意一下。

2.字体需要完全加载到用户的客户端时，才能将图标显示出来。目前来看字体包的大小为61K，而SVG文件则有191K的大小，如果服务器带宽过小的话，可能图标展现时会略显滞后。

3.页面偶尔会出现图标显示不出来的情况，需要用户重复刷新页面一次。

4.Font Awesome字体图标调用时，必须嫁接与一个元素上，因此占位元素的浮动属性需要把握好。

总体来说，字体图标由于其矢量性非常适合用在当今流行的响应式页面设计中。尤其是在移动设备的展现效果上尤为突出。目前在frontopen主提的应用中，尚未发现比较明显的问题。