如何使用图标字体组件？

图标字体

 

【组件简介】 图标字体组件以开源的图标字体库为核心，通过添加图标字体，实现图标可以像文字一样通过font-size 属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover 状态、透明度、阴影和翻转等效果，可以在任何背景下显示，加载大小明显比图片小很多。

 

【应用场景】图标字体组件的应用场景还是很广泛的，在很多场景起到了画龙点睛的作用，比如在联系我们的字段项前面加上图标字体，既可以像文字一样轻便，可以随意编辑大小、颜色，又可以起到像图片一样的美观效果。使用图标字体的优势：（1）轻量性：一个图标字体比一系列的图像（特别是在 Retina 屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少 HTTP 请求，还可以配合 HTML5 离线存储做性能优化。（2）灵活性：图标字体可以用过 font-size 属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover 状态、透明度、阴影和翻转等效果，可以在任何背景下显示。除了以上优势之外，当然也有劣势：（1）图标字体只能被渲染成单色或者 CSS3 的渐变色，由于此限制使得它不能广泛使用；（2）图标字体在低版本的 IE（IE5、IE6、IE7）兼容性不好，会不显示图标字体，请大家知晓。

 

【使用方法】