初识font-awesome

最近在学习html和css的时候接触到了font-awesome，特地整理一些相关知识在这里，望各位指点补充，不胜感激。

使用方法：

1.到font-awesome官网上下载这套款基于css框架的网页字体图标库，值得一提的是，这款字体图标库从下载到应用都是完全免费的。
2.下载后，解压源文件。将其中的CSS（样式文件），fonts（字体）将两个文件夹拷贝到站点中。
3.在HMTL文件中，在head部分引入CSS(发布使用min（压缩版本），如果调试可以使用未压缩的）。代码实例如下：<link rel="stylesheet" href="./css/font-awesome.min.css">
4.有了以上的操作，接下来我们就可以在界面设计中使用这套字体图标了。如，在html主体部分直接在i标签对内使用css类fa fa-[icon],此处icon代表了相应的图标类，如：<i class="fa fa-search"></i>，就可以在界面里呈现出一个搜索图标。

优势

1. 一个字库，675个图标
   仅一个Font Awesome字库，就包含了与网页相关的所有形象图标。
2. 无需依赖JavaScript
   Font Awesome完全不依赖JavaScript，因此无需担心兼容性。
3. 无限缩放
   无论在任何尺寸下，可缩放的矢量图形都会为您呈现出完美的图标。
4. 如言语一般自由
   Font Awesome完全免费，哪怕是商业用途。请查看许可。
5. CSS控制
   只要CSS支持，无论颜色、大小、阴影或者其它任何效果，都可以轻易展现。
6. 高分屏完美呈现
   Font Awesome的矢量图标，将使您的网站在视网膜级的高分屏上大放异彩。
7. 完美兼容其它框架
   尽管是为Bootstrap设计，但Font Awesome同样能与其它框架完美协同运作。
8. 可适配于屏幕阅读器
   与其它字体不同，Font Awesome不会影响屏幕阅读器正常工作。

注：不兼容IE7

使用实例

1. 基本图标
   您可以将Font Awesome图标使用在几乎任何地方，只需要使用CSS前缀 fa ，再加上 图标名称。 Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用 <i> ，因为它更简洁。 但实际上使用 <span> 才能更加语义化。
2. 大图标
   使用 fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 类 来放大图标。固定宽度.使用 fa-fw 可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况。 尤其在列表或导航时起到重要作用。
3. 用于列表
   使用 fa-ul 和 fa-li 便可以简单的将无序列表的默认符号替换掉。
4. 边框与对齐
   使用 fa-border 以及 pull-right 或 pull-left 可以轻易构造出引用的特殊效果。
5. 动画
   使用 fa-spin 类来使任意图标旋转，现在您还可以使用 fa-pulse 来使其进行8方位旋转。尤其适合 fa-spinner、fa-refresh 和 fa-cog
6. 旋转与翻转
   使用 fa-rotate- 和 fa-flip- 类可以对图标进行任意旋转和翻转。
7. 组合使用
   如果想要将多个图标组合起来，使用 fa-stack 类作为父容器， fa-stack-1x 作为正常比例的图标， fa-stack-2x 作为大一些的图标。还可以使用 fa-inverse 类来切换