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
` 和圖示名稱來放置 Font Awesome 圖示。
示例
以下程式碼
<!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 被設計用於內聯元素。`<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>列表圖示</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>列表圖示</li>
<li><i class="fa-li fa fa-square"></i>列表圖示</li>
</ul>
結果顯示
- 列表圖示
- 列表圖示
- 列表圖示
帶邊框和拉取的圖示
可以使用 `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.
結果顯示
動畫圖示
可以使用 `fa-spin
` 類使任何圖示旋轉,使用 `fa-pulse
` 類使任何圖示以 8 步旋轉。
示例
以下程式碼
<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 在 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(反色)在 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 在 fa-camera 上
結果顯示
fa-twitter(反色)在 fa-circle 上
fa-ban 在 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>
自己試試 »
Bootstrap
Font Awesome 也與所有 Bootstrap 元件完美配合。