Font Awesome矢量图标使用，主要是彻底开源免费

首先分享下github地址:Font Awesome。

中文网址：Font Awesome 4.7.0 中文文档。

官网：http://fontawesome.io

若是使用网上资源地址，直接引用就能够了。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

若是下载资源到本地的话，须要注意一点，就是保持css文件和fonts文件相对路径保持不变。

若是矢量图没有出现的话能够修改css文件

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

View Code

修改下src的路径就能够了。

另外还要注意的是，新版本的Font Awesome 开始不支持IE7了。

下面记录下使用方法，虽然网上能够查的到，记录在这里方便查阅。

基本图标

您能够将Font Awesome图标使用在几乎任何地方，只须要使用CSS前缀 fa ，再加上图标名称。 Font Awesome是为使用内联元素而设计的。咱们一般更喜欢使用 <i> ，由于它更简洁。 但实际上使用 <span> 才能更加语义化。

<i class="fa fa-camera-retro"></i> fa-camera-retro

大图标

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

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

固定宽度

使用 fa-fw 能够将图标设置为一个固定宽度。主要用于不一样宽度图标没法对齐的状况。 尤为在列表或导航时起到重要做用。

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>

用于列表

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

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

边框与对齐

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

<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
...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 。

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

旋转与翻转

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

 

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical

组合使用

若是想要将多个图标组合起来，使用 fa-stack 类做为父容器， fa-stack-1x 做为正常比例的图标， fa-stack-2x 做为大一些的图标。还能够使用 fa-inverse 类来切换图标颜色。您能够在父容器中 经过添加 大图标 类来控制总体大小。

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera

 本文参考：

http://fontawesome.dashgame.com/

http://jingyan.baidu.com/article/77b8dc7f9c5b1c6174eab605.html