Font Awesome 简介

Font Awesome 是一种带有网页功能的象形文字语言，并收集在一个集合里。

Font Awesome 字体为您提供可缩放矢量图标，它可以被定制大小、颜色、阴影以及任何可以用 CSS 的样式。

如要使用 Font Awesome 图标，请在 HTML 页面内添加引用，以下三种方式任选一种即可：

1.直接引用国内CDN：

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

2.直接引用国外CDN：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
                

3.本地引用：

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

注：本地引用时一定要将 fonts 文件夹与 css 文件夹并行放置。否则 css 样式找不到字体库。

● 本地引用请下载至本地：

Download

Font Awesome 使用方法

使用很简单，使用 i 标签，在 class 里面加入 Font Awesome 相应的类即可。Font Awesome 相应的类可在 Font Awesome 图标库中查找。形式如下：

<i class="fa fa-qq"></i>
<i class="fa fa-qq" style="font-size:28px;"></i>
<i class="fa fa-qq" style="font-size:42px;color:#ec1313;"></i>
                

另外注意，如果您修改了图标容器的字体大小，图标大小会随之改变。同样也适用于颜色，阴影，阴影等其它任何CSS支持的效果上。

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

<a href="#"><i class="fa fa-home fa-fw"></i>首页</a>
                

使用 fa-ul and fa-li 轻松的替换无序列表中的默认图标。

<ul class="fa-ul">
    <li><i class="fa-li fa fa-check-square"></i>列表</li>
</ul>
                

使用 fa-spin 使任意图标旋转动画，还可以使用 fa-pulse 使其进行8方位旋转动画。尤其适合按中心对称的图标类。CSS3动画不支持IE8-IE9。

<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
                

若要对图标进行任意旋转和翻转角度, 可以使用 fa-rotate-* and fa-flip-* 类。

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