Font Awesome 图标简介
基本图标
要使用 Font Awesome 图标，请在 HTML 页面的 <head> 部分添加以下行:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
注释: 无需下载或安装！
通过使用前缀 fa 和图标名称放置字体图标。
实例
实例代码:
<!DOCTYPE html><html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>
结果:
亲自试一试 »您可以将Font Awesome 图标使用在几乎任何地方，只需要使用CSS前缀<fa>，再加上图标名称。
Font Awesome 是为使用内联元素而设计的。我们通常更喜欢使用 <i> ，因为它更简洁。 但实际上使用 <span>
才能更加语义化。
还请注意，如果更改图标容器的字体大小或颜色，图标也会更改。同样的事情也适用于阴影，以及任何使用 CSS 继承的东西。
使用 fa-lg (33%递增), fa-2x, fa-3x,
fa-4x, 或 fa-5x 类来放大图标。
实例
实例代码:
<i class="fa fa-car fa-lg"></i><i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
结果:
亲自试一试 »提示: 如果图标的底部和顶部被截断了，您需要增加行高来解决此问题。
使用 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-spinner fa-spin"></i>List icons</li>
<li><i class="fa-li fa fa-square"></i>List icons</li>
</ul>
结果:
- List icons
- List icons
- List icons
使用 fa-border, fa-pull-right 或 fa-pull-left 类可以轻易构造出引用的特殊效果。
实例
实例代码:
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
结果:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 亲自试一试 »使用 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>
结果:
亲自试一试 »注释: IE8 和 IE9 不支持 CSS3 动画。
使用 fa-rotate-* 和 fa-flip-* 类可以对图标进行任意旋转和翻转。
实例
实例代码:
<i class="fa fa-shield"></i><i class="fa fa-shield fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>
结果:
亲自试一试 »如果想要将多个图标组合起来，使用 fa-stack 类作为父容器， fa-stack-1x 作为正常比例的图标， fa-stack-2x 作为大一些的图标。
还可以使用 fa-inverse 类可以用作替代图标颜色。您还可以向父级添加更大的图标类，以进一步控制尺寸。
实例
实例代码:
<span class="fa-stack fa-lg"><i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle-thin<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle<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" style="color:red;"></i>
</span>
fa-ban on fa-camera
结果:
fa-twitter on fa-circle-thinfa-twitter (inverse) on fa-circle
fa-ban on fa-camera 亲自试一试 »
使用 fa-fw 类可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况。 尤其在列表或导航时起到重要作用。 特别适用于 Bootstrap 的导航列表和列表组。
实例
<div class="list-group"><a href="#" class="list-group-item"><i class="fa fa-home fa-fw"></i> Home</a>
<a href="#" class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
<a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i> Applications</a>
<a href="#" class="list-group-item"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div> 亲自试一试 »
Font Awesome 也适用于所有 Bootstrap 组件。
