目前很多页面中的图标都是使用字体图标完成的
1.[优势]
矢量化：字体是矢量格式，因此能够轻松的适配不同的设备，而不必为不同分辨率的屏幕准备不同的图片资源;
轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，            还可以配合HTML5离线存储做性能优化;
可扩展性：图标字体可以用过font-size属性设置其任何大小。这使您能够随时输出不同大小的图标，然而，使用位图，你必须得为每个不同大小的图像输出一个不同文件。
灵活性：文字效果可以很容易地应用到你的图标上，包括颜色，阴影和翻转等效果。他们还可以在任何背景下显示。
兼容性：网页字体支持所有现代浏览器，包括IE低版。[ http://caniuse.com/#feat=fontface ]
2.[弊端]
     图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用。使用版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。创作自已的字体图标很费时间，重构人员后期维护的成本偏高。3.常用字体图标网址

阿里字体图标库：http://iconfont.cn/   

Font Awesome：http://fontawesome.dashgame.com/

icomoon：http://icomoon.io/app/

4.字体图标的使用

1：解压下载后的文件夹，我们需要的是fonts文件夹和style.css, 将这个文件放入你的项目中,style.css文件中引入了字体文件，所以会有路径，这个时候你在使用的时候要注意路径问题，代码如下：（这里的多种字体文件是为了兼容浏览器）

2.在 css里面

@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?7kkyc2');
    src:  url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('../fonts/icomoon.woff?7kkyc2') format('woff'),
    url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
3.需要添加的地方应用
.icomoon {
        font-family: 'icomoon';
}
这样，我们的页面中就可以显示相应的图标了。

目前很多页面中的图标都是使用字体图标完成的
1.[优势]
矢量化：字体是矢量格式，因此能够轻松的适配不同的设备，而不必为不同分辨率的屏幕准备不同的图片资源;
轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，            还可以配合HTML5离线存储做性能优化;
可扩展性：图标字体可以用过font-size属性设置其任何大小。这使您能够随时输出不同大小的图标，然而，使用位图，你必须得为每个不同大小的图像输出一个不同文件。
灵活性：文字效果可以很容易地应用到你的图标上，包括颜色，阴影和翻转等效果。他们还可以在任何背景下显示。
兼容性：网页字体支持所有现代浏览器，包括IE低版。[ http://caniuse.com/#feat=fontface ]
2.[弊端]
     图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用。使用版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。创作自已的字体图标很费时间，重构人员后期维护的成本偏高。3.常用字体图标网址

阿里字体图标库：http://iconfont.cn/   

Font Awesome：http://fontawesome.dashgame.com/

icomoon：http://icomoon.io/app/

4.字体图标的使用

1：解压下载后的文件夹，我们需要的是fonts文件夹和style.css, 将这个文件放入你的项目中,style.css文件中引入了字体文件，所以会有路径，这个时候你在使用的时候要注意路径问题，代码如下：（这里的多种字体文件是为了兼容浏览器）

2.在 css里面

@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?7kkyc2');
    src:  url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('../fonts/icomoon.woff?7kkyc2') format('woff'),
    url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
3.需要添加的地方应用
.icomoon {
        font-family: 'icomoon';
}
这样，我们的页面中就可以显示相应的图标了。