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>