初识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 类来切换