矢量图标，图标字体的使用,font awesome

一 介绍

首先，说一下，字体图标有哪些优势吧？下面是在网上找的，基本都是大同小异了。

1、轻量性：一个图标字体比一个图片小，而且一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。

2、灵活性：图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件。

3、兼容性：网页字体支持所有现代浏览器，包括IE低版本。详细兼容性可以点击这里。

除了以上优势之外，当然也有劣势
1、图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用

2、使用版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。

3、创作自已的字体图标很费时间，重构人员后期维护的成本偏高。

二 重点了 免费字体font awesome的使用

图标字体的使用还是涉及到了许多知识的，font-face 字体如何制作，又如何引用的问题，说实话，我看了有点复杂。但是现在有了font awsome,

一切就变得非常简单。下面讲一下如何使用。

1）下载，https://codeload.github.com/FortAwesome/Font-Awesome/zip/master

2）引用 ，需要把下载下来的fonts 文件夹放进项目里，然后引入2个css文件，（如果需要兼容ie的话）

 

<link href="css/font-awesome.min.css" rel="stylesheet" /><!--[if IE]><link href="css/font-awesome-ie7.min.css" rel="stylesheet" /><![endif]-->

3，使用方式  i标签

 <span style="font-size:12px;"><i class="fa fa-link"></i> 链接</span>