選單
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

圖示 教程

圖示主頁 圖示參考

Font Awesome 5

Font Awesome 5 簡介 圖示 可訪問性 圖示 警報 圖示 動物 圖示 箭頭 圖示 音訊與影片 圖示 汽車 圖示 秋季 圖示 飲品 圖示 品牌 圖示 建築 圖示 商業 圖示 露營 圖示 慈善 圖示 聊天 圖示 國際象棋 圖示 童年 圖示 服裝 圖示 程式碼 圖示 通訊 圖示 電腦 圖示 建築 圖示 貨幣 圖示 日期與時間 圖示 設計 圖示 編輯器 圖示 教育 圖示 表情符號 圖示 能源 圖示 檔案 圖示 金融 圖示 健身 圖示 食品 圖示 水果與蔬菜 圖示 遊戲 圖示 性別 圖示 萬聖節 圖示 手 圖示 健康 圖示 節日 圖示 酒店 圖示 家居 圖示 圖片 圖示 介面 圖示 物流 圖示 地圖 圖示 海事 圖示 營銷 圖示 數學 圖示 醫療 圖示 移動 圖示 音樂 圖示 物件 圖示 付款與購物 圖示 藥房 圖示 政治 圖示 宗教 圖示 科學 圖示 科幻 圖示 安全 圖示 形狀 圖示 購物 圖示 社交 圖示 載入動畫 圖示 運動 圖示 春季 圖示 狀態 圖示 夏季 圖示桌面遊戲 圖示 開關 圖示 旅行 圖示 使用者與人物 圖示 車輛 圖示 天氣 圖示 冬季 圖示 書寫

Font Awesome 4

Font Awesome 簡介 圖示 品牌 圖示 圖表 圖示 貨幣 圖示 方向 圖示 檔案型別 圖示 表單 圖示 性別 圖示 手 圖示 醫療 圖示 付款 圖示 載入動畫 圖示 文字 圖示 交通 圖示 影片 圖示 Web 應用

Bootstrap

圖示 BS Glyphicons

Google

Google 圖示簡介 圖示 操作 圖示 警報 圖示 音影片 圖示 通訊 圖示 內容 圖示 裝置 圖示 編輯器 圖示 檔案 圖示 硬體 圖示 圖片 圖示 地圖 圖示 導航 圖示 通知 圖示 地點 圖示 社交 圖示 開關


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.

結果顯示

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-thin 上
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 元件完美配合。


×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援