Font Awesome图标
Font Awesome提供矢量文字图标，并支持更改大小，颜色，阴影和其他支持的效果，并开源免费，几乎包含网页所需所有文字图标(675个)
加载方式
最简单的方式：BootstrapCDN
将Font Awesome直接通过link标签加入到head中即可使用，复制以下代码即可使用
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
使用方式
将链接加载到head中后，即可使用
在添加图标时，可以使用span标签也可以使用i标签，在class中先添加前缀fa，然后再添加对应fa-图标名称
基本图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font Awesome</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
/*对样式颜色进行修改*/
.fa-windows{
color: red;
}
</style>
</head>
<body>
<i class="fa fa-camera-retro"></i>
<i class="fa fa-windows"></i>
</body>
</html>
大图标
使用
fa-lg(33%递增)、fa-2x、fa-3x、fa-4x，或者fa-5x类 来放大图标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font Awesome</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<i class="fa fa-camera-retro fa-lg"></i>
<i class="fa fa-camera-retro fa-2x"></i>
<i class="fa fa-camera-retro fa-3x"></i>
<i class="fa fa-camera-retro fa-4x"></i>
<i class="fa fa-camera-retro fa-5x"></i>
</body>
</html>
图标固定宽度
使用
fa-fw可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况。 尤其在列表或导航时起到重要作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font Awesome</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>
</body>
</html>
用于列表
使用
fa-ul和fa-li便可以简单的将无序列表的默认符号替换掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font Awesome</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<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"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
</body>
</html>
边框与对齐
使用
fa-border以及pull-right或pull-left可以轻易构造出引用的特殊效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font Awesome</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<i class="fa fa-quote-left 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.
<i class="fa fa-quote-left pull-right fa-border fa-flip-horizontal"></i>
</body>
</html>
动画效果
使用 fa-spin 类来使任意图标旋转，现在您还可以使用 fa-pulse来使其进行8方位旋转。尤其适合
fa-spinner、fa-refresh和fa-cog
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font Awesome</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<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>
</body>
</html>
旋转与翻转
- normal 是正常效果
- fa-rotate-90 旋转90°
- fa-rotate-180 旋转180°
- fa-rotate-270 旋转270°
- fa-flip-horizontal 水平翻转
- fa-flip-vertical 垂直翻转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font Awesome</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<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
</body>
</html>
组合使用
如果想要将多个图标组合起来，使用
fa-stack类作为父容器，fa-stack-1x作为正常比例的图标，fa-stack-2x作为大一些的图标。还可以使用fa-inverse类来切换图标颜色。您可以在父容器中 通过添加 大图标 类来控制整体大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font Awesome</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<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
</body>
</html>