Font Awesome使用方法

Font Awesome（中文站点）是一套为Bootstrap而创造的图标字体库及CSS框架，在业界享有盛誉。

FA包含了常规web开发所需要用到的几乎所有图标，并且免费授权使用，只需要下载即可。
所有的图标列表查看

加入文件

1.最简单的方式：CDN （由BootCDN提供）

一句话将Font Awesome加入您的网页中。您完全不用下载或者安装任何东西！

将以下代码粘贴到网页HTML代码的 <head> 部分.

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

2.下载文件，使用默认CSS

如果您使用了默认的Bootstrap CSS样式，那么你可以使用这种方式来引入默认的Font Awesome CSS样式。

复制整个 font-awesome 文件夹到您的项目中。
在HTML的 <head> 中引用font-awesome.min.css。

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

3.LESS Ruby Gem

使用官方 Font Awesome LESS Ruby Gem 可以简单方便的将 Font Awesome LESS 集成到Rails项目中。由 @supercodepoet 维护。

将下面这行代码加入到应用的Gemfile中：

gem 'font-awesome-less'

然后执行：

$ bundle

或者自行安装：

$ gem install font-awesome-less

4.SASS Ruby Gem

使用官方 Font Awesome SASS Ruby Gem 可以简单方便的将 Font Awesome SASS 集成到Rails项目中。由 @supercodepoet 维护。

将下面这行代码加入到应用的Gemfile中：

gem 'font-awesome-sass'

然后执行：

$ bundle

或者自行安装：

$ gem install font-awesome-sass

5.进阶方式：自定义 LESS 或 SASS

使用LESS或SASS的方法来自定义 Font Awesome 4.7.0 。

复制 font-awesome/ 目录到您的项目中。
打开 font-awesome/less/variables.less 文件或 font-awesome/scss/_variables.scss文件，然后修改 @fa-font-path 或 $fa-font-path 为您的字体目录。注：@fa-font-path: "../font";//字体路径是相对于编译的CSS目录。
如果使用了静态编译器，那么重新编译LESS或SASS文件。如果没有，那么现在应该一切OK了。
参考示例，然后开始使用Font Awesome吧!

如果需要支持IE7，那真的十分抱歉。Font Awesome从4.1.0版本开始不再支持IE7，但更早的版本仍然支持。您可以查看 3.2.1 的IE7支持说明。然后呢，您可以去找那个非要支持IE7的人算账 :)

参考示例，然后开始使用Font Awesome吧!

icon使用方法

基本图标

您可以将Font Awesome图标使用在几乎任何地方，只需要使用CSS前缀 fa ，再加上图标名称。 Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用  ，因为它更简洁。但实际上使用  才能更加语义化。

fa-camera-retro

大图标

使用 fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 类来放大图标。

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

固定宽度

使用 fa-fw 可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况。尤其在列表或导航时起到重要作用。

<div class="list-group">
<a class="list-group-item" href="#">  Home</a>
<a class="list-group-item" href="#">  Library</a>
<a class="list-group-item" href="#">  Applications</a>
<a class="list-group-item" href="#">  Settings</a>
</div>

用于列表

使用 fa-ul 和 fa-li 便可以简单的将无序列表的默认符号替换掉。

<ul class="fa-ul">
<li>List icons</li>
<li>can be used</li>
<li>as bullets</li>
<li>in lists</li>
</ul>

边框与对齐

使用 fa-border 以及 pull-right 或 pull-left 可以轻易构造出引用的特殊效果。

...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.

动画

使用 fa-spin 类来使任意图标旋转，现在您还可以使用 fa-pulse 来使其进行8方位旋转。尤其适合 fa-spinner、fa-refresh 和 fa-cog

CSS3动画不支持IE8-IE9。

旋转与翻转

使用 fa-rotate-* 和 fa-flip-* 类可以对图标进行任意旋转和翻转。

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
icon-flip-vertical

组合使用

如果想要将多个图标组合起来，使用 fa-stack 类作为父容器， fa-stack-1x 作为正常比例的图标， fa-stack-2x 作为大一些的图标。还可以使用 fa-inverse 类来切换图标颜色。您可以在父容器中通过添加大图标类来控制整体大小。

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera