来使用font-awesome吧,可以部分抛弃png了

字体图标

---

1.什么是字体图标

一般我们如果设置一个span或者是i的背景的时候都会用图片.但是今天我们学习一种更方便更好用的一个东西,就叫做:字体图片.
那么为什么要使用字体图标这个东西呢?这个才是我们最关心的东西.她有什么优点值的我们去学习?见下面的分析:
为什么我要使用font-awesome

---

Font Awesome是一款很流行的字体图标工具。随着Bootstrap的流行而逐渐被人所认识，现在FontAwesome不仅仅可以在bt上使用，还可以应用在各种web前端开发中。
优点:
相对于传统的使用背景图片作为图标，字体图标主要是

• 支持自适应
• 可以使用字体的各种特性（比如变色、变大变小、字体阴影等）
• 减少数据加载,可以提高页面的加载速度.
• 样式更容易定义等

---

2.关于字体图标的特性认识

由于字体图标使用的是svg来做的,所以是矢量图.在任何分辨率下面都不会失真.即使是苹果的视网膜屏幕,效果依然完美,赞一个.
下面是字体图标的特性列表:

• 一个字体文件,369 个图标,现在更多.
• 不需要javascript要求：更快的载入速度.
• 无限的可扩展性：可伸缩矢量图形意味着每一个图标在任何大小看起来真棒.SVG技术.
• 自由免费：你可以将它应用到你的商业中。
• CSS控制：轻松的定义图标的颜色，大小，阴影，和任何与CSS相关的特性。
• 完美的视网膜显示：使用矢量字体，这意味着他们可以完美的显示在高分辨率显示器中
• 为BootStrap而生：完全的兼容BootStrap新版3.0
• 桌面友好：你可以查看字体的样式列表- 兼容屏幕阅读器：不像其他字体图标不兼容屏幕阅读器

---

3.如何应用

上面已经介绍了很多关于字体图标的知识了,那么如何在项目中进行应用呢?很简单,看下面的链接
Font-awesome
点击上面的链接即可访问font-awesome 官网,获取更多帮助!

---

1.只需要去官网下载包,然后放到你的项目中就可以了.点我下载,然后在你的html头部的head里面添加对相应的font-awesome的样式.

//导入对应的CSS文件
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

2.按照这里的案例开始你的项目点我开始学习如何使用到你的项目中
3.如需兼容IE浏览器，可以使用Font-awesome的3.2.1版本。下载font-awesome-ie7.css或者是font-awesome-ie7.min.css。然后在项目中引入该样式文件。

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

结束语

关于字体图片今天我们就学到这里,这篇博文权当抛砖引玉.还需要多多练习...say you soon...