Font Awesome

参考

• http://www.fengyan.cc/173.html
• http://www.bootcss.com/p/font-awesome/

简介

Font Awesome是一套图标字体库和CSS框架，提供了丰富的矢量字体图标，不依赖JS，通过CSS可以控制所有图标的大小、颜色和阴影，可以Bootstrap等框架一起使用，Font Awesome中文兼容IE7+，完全免费。

官网在这里。

引入

在html的文档部分在 标签 里, 引入 font-awesome.min.css，可以将字体下载到本地，也可以使用国内的CDN来引用。

百度静态资源公共库、BootCDN都提供了Font Awesome的镜像，可以放心使用。

使用

1 使用i标签引用Font Awesome提供的各种矢量图标

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

可以通过CSS控制图标的fong-size、color、引用等。

2 可以为i增加类fa-lg，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

3 固定宽度图标：使用 fa-fw可以固定图标宽度

4 可以在列表中使用图标

<ul class="fa-ul">
    <li><i class="fa-li fa fa-check-square"></i>List icons</li>
    <li><i class="fa-li fa fa-spinner"></i>as bullets</li>
    <li><i class="fa-li fa fa-group"></i>as bullets</li>
</ul>

5 使用fa-border为图标增加边框，使用pull-right 或者 pull-left 将图标置左或置右

<i class="fa fa-group fa-3x pull-right fa-border animated"></i>

6 旋转图标：fa-spin可以使图标旋转，fa-spinner、fa-refresh,、fa-cog是几个比较适合转起来的图标

<i class="fa fa-spinner fa-3x fa-spin"></i>
<i class="fa fa-refresh fa-3x fa-spin"></i>
<i class="fa fa-cog fa-3x fa-spin"></i>

注意：旋转图标只支持IE10+

7 翻转图标，增加fa-rotate-90可以让图标旋转90°、180°和270°，fa-flip-horizontal和fa-flip-vertical可以让图标水平或垂直翻转

<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

8 叠加图标：需要先给完成容器一个fa-stack和控制整体大小的class，比如fa-4x
然后在里面两个相互叠加的i标签增加fa-stack-1x或fa-stack-2x的class

<span class="fa-stack fa-2x">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-twitter fa-stack-1x"></i>
</span>