Font Awesome 圖標

ont Awesome 是一套絕佳的圖標字體庫和CSS框架。

Font Awesome 字體為您提供可縮放矢量圖標,它可以被定制大小、顏色、陰影以及任何可以用CSS的樣式。

要使用Font Awesome圖標，請在HTML頁面的部分中添加以下行：

1、國內推薦 CDN：

<linkrel="stylesheet">

2、海外推薦 CDN

<linkrel="stylesheet">

3、直接下載到本地

Download

注意： 不太建議下載來安裝，直接在 html 文檔頭部引用 CDN 文件即可。
注意： 本教程使用的是 4.7.0 版本。

您可以使用前綴 fa 和圖標的名稱來放置 Font Awesome 圖標。

實例

<!DOCTYPEhtml><html><head><linkrel="stylesheet"fa fa-car"><iclass="fa fa-car"style="font-size:48px;"><iclass="fa fa-car"style="font-size:60px;color:red;"></body></html>

結果:

點擊 "嘗試一下" 按鈕查看在線實例

Font Awesome 設計為與內聯元素一起使用。 和 元素廣泛用于圖標。

另外注意，如果更改圖標容器的字體大小或顏色，圖標會更改。

大圖標

fa-lg (增加33％)，fa-2x，fa-3x， fa-4x，或 fa-5x 類用于增加相對于其容器的圖標大小。

實例

<!DOCTYPEhtml><html><head><linkrel="stylesheet"fa fa-car fa-lg"><iclass="fa fa-car fa-2x"><iclass="fa fa-car fa-3x"><iclass="fa fa-car fa-4x"><iclass="fa fa-car fa-5x"></body></html>

結果:

提示：如果你的圖標在頂部和底部被切斷，請增加行高。

列表圖標

fa-ul 和 fa-li 類用于替換無序列表中的默認前綴。

實例

<ulclass="fa-ul"><li><iclass="fa-li fa fa-check-square">List icons</li><li><iclass="fa-li fa fa-spinner fa-spin">List icons</li><li><iclass="fa-li fa fa-square">List icons</li></ul>

結果:

List icons
List icons
List icons

邊界和被拉的圖標

fa-border，fa-pull-right 或 fa-pull-left 類用于拉式引用或文章圖標。

實例

<iclass="fa fa-quote-left fa-3x fa-pull-left fa-border">學的不僅是技術，更是夢想！！！ 學的不僅是技術，更是夢想！！！ 學的不僅是技術，更是夢想！！！ 學的不僅是技術，更是夢想！！！

結果:

動態圖標

fa-spin 類可以讓圖標旋轉, fa-pulse 類可以使圖標以 8 步為周期進行旋轉。

實例

<iclass="fa fa-spinner fa-spin"><iclass="fa fa-circle-o-notch fa-spin"><iclass="fa fa-refresh fa-spin"><iclass="fa fa-cog fa-spin"><iclass="fa fa-spinner fa-pulse">

結果:

嘗試一下 ?

注意: IE8 和 IE9 不支持 CSS3 動畫。

旋轉和翻轉的圖標

fa-rotate-* 和 fa-flip-* 類用于旋轉和翻轉圖標。

實例

<iclass="fa fa-shield"><iclass="fa fa-shield fa-rotate-90"><iclass="fa fa-shield fa-rotate-180"><iclass="fa fa-shield fa-rotate-270"><iclass="fa fa-shield fa-flip-horizontal"><iclass="fa fa-shield fa-flip-vertical">

結果:

嘗試一下 ?

堆疊的圖標

要堆疊多個圖標，請使用父級上的 fa-stack 類，fa-stack-1x 類用于常規大小的圖標，fa-stack-2x 用于較大的圖標。

fa-inverse 類可以用作替代圖標顏色。您還可以向父級添加更大的圖標類，以進一步控制尺寸。

實例

<spanclass="fa-stack fa-lg"><iclass="fa fa-circle-thin fa-stack-2x"><iclass="fa fa-twitter fa-stack-1x">fa-twitter on fa-circle-thin <spanclass="fa-stack fa-lg"><iclass="fa fa-circle fa-stack-2x"><iclass="fa fa-twitter fa-stack-1x fa-inverse">fa-twitter (inverse) on fa-circle <spanclass="fa-stack fa-lg"><iclass="fa fa-camera fa-stack-1x"><iclass="fa fa-ban fa-stack-2x text-danger"style="color:red;">fa-ban on fa-camera

結果:

fa-twitter on fa-circle-thin

fa-twitter (inverse) on fa-circle

fa-ban on fa-camera

嘗試一下 ?

固定寬度圖標

fa-fw 類用于設置固定寬度的圖標。當不同的圖標寬度偏離對齊時，此類非常有用。特別適用于Bootstrap的導航列表和列表組。

實例

<divclass="list-group"><ahref="#"class="list-group-item"><iclass="fa fa-home fa-fw"> Home</a><ahref="#"class="list-group-item"><iclass="fa fa-book fa-fw"> Library</a><ahref="#"class="list-group-item"><iclass="fa fa-pencil fa-fw"> Applications</a><ahref="#"class="list-group-item"><iclass="fa fa-cog fa-fw"> Settings</a></div>

ootstrap是用于開發響應式和移動優先的網站的CSS框架。Bootstrap增加了一個功能，人們可以使用Bootstrap提供的優質圖標。這些圖標可以用SVG或網頁字體格式。

Bootstrap提供了一千多個高質量的圖標，你可以在你的項目中使用它們。你還可以根據需要改變這些圖標的顏色和大小。

是什么讓Bootstrap框架中的圖標與眾不同，我們為什么要使用它？

靈活性 “是使它與其他圖標解決方案不同的原因。如果你在Bootstrap框架中使用圖標，你可以借助CSS的color屬性來改變圖標的顏色。
你也可以通過使用CSS的font-size屬性來改變圖標的大小。
在你的項目中使用Bootstrap的圖標不是必須的，你可以在有Bootstrap或沒有Bootstrap的情況下使用它。

使用Bootstrap圖標的基本語法：

<i class="bi-class-name"></i>

元素是一個容器元素，用于添加Bootstrap圖標。字符串’bi-‘總是附在圖標的類名之前。它指的是Bootstrap圖標。類名基本上是我們正在使用的圖標的類別。Bootstrap為我們提供了許多類別的圖標，如Facebook、Twitter、地球、星星和搜索等。

例子：這是在提交按鈕中使用Bootstrap的搜索圖標的HTML代碼。

<!DOCTYPE html>
<html>
  
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
  
    <!--Bootstrap Icons CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
  
</head>
  
<body class="container">
    <h2>Welcome To GFG</h2>
    <p>
        The below button is using the bi-search 
        class to display the search icon.
    </p>
  
    <!-- We made a button on which Bootstrap 
        icon of 'search' class present -->
    <button type="submit" class="btn btn-primary">
        <span class="bi-search"></span>
        Search
    </button>
</body>
  
</html>

輸出：你在按鈕上看到的搜索圖標是由Bootstrap框架提供的圖標，屬于類名search.。

1、安裝

Bootstrap 圖標庫已被發布到了 npm，但是仍然可以手動下載并安裝。

1.1、通過 npm 安裝

通過 npm 安裝 Bootstrap 圖標庫，包括 SVG 圖片、sprite 圖標和圖標字體。

npm i bootstrap-icons

1.2、下載安裝包

GitHub 上有所有已發布的版本，并且在壓縮包內包含了所有 SVG 格式的圖標、許可證和 readme 文件。package.json 文件也被包含在內，不過這些 npm 腳本主要用于我們的開發流程。

1.3、通過公共 CDN 加載

利用我們提供的公共 CDN 服務并將圖標字體的樣式表添加到網站的 <head> 標簽內（或通過 CSS 的 @import 指令加載）就能立即使用 Bootstrap 圖標庫了。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css">

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css");

2、用法

Bootstrap 圖標庫的所有圖標都是 SVG 格式的，因此你可以通過以下幾種方式將它們添加到你的 HTML 中，具體使用哪種方式取決于你的項目是如何設置的。我們建議設置 width: 1em（以及可選的 height: 1em），便于你通過 font-size 屬性重置圖標的大小。

2.1、內嵌

將圖標嵌入你的 HTML 頁面中（與引用外部圖像文件相反）。如下例子中我們對 width 和 height 屬性進行了重新設置。

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>

2.2、Sprite

利用 SVG sprite 和 <use> 元素即可插入任何圖標。使用圖標的文件名作為片段標識符（例如 toggles 就是 #toggles）。SVG sprites 允許你像 <img> 元素一樣引用外部文件，并支持 currentColor 的功能以便主題化。

注意！在 chrome 瀏覽器中，<use> 不能跨域使用。

<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#toggles"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#shop"/>
</svg>

2.3、作為外部圖片文件引用

將 Bootstrap 圖標庫的 SVG 文件復制到你所選擇的目錄中，并像引用普通圖片一樣通過 <img> 元素引入 SVG 圖標。

<img src="/assets/img/bootstrap.svg" alt="Bootstrap" width="32" height="32">

2.4、圖標字體

Bootstrap 圖標庫還提供了圖標字體文件，并且包括了每個圖標及其對應 class 名稱。通過在頁面中引入圖標字體文件，然后根據需要為 HTML 標簽添加對應的 class 名稱即可（例如 ）。

使用 font-size 和 color 樣式屬性可以更改圖標的外觀。

<i class="bi-alarm"></i>
<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>

2.5、CSS

你還可以在 CSS 中使用 SVG 圖標（當指定十六進制顏色值時務必對某些字符進行轉義，例如將 # 字符替換為 %23）。如果未指定 <svg> 元素的 width 和 height 屬性，則圖標將填滿所有可用空間。

如果需要使用 background-size 來調整圖標的大小，則必須設置 viewBox 屬性。請注意，xmlns 屬性是必需的。

.bi::before {
  display: inline-block;
  content: "";
  vertical-align: -.125em;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

3、設置樣式

可以通過設置 .text-* 類或自定義 CSS 來改變顏色

<svg class="bi bi-exclamation-triangle text-success" width="32" height="32" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
  ...
</svg>

4、無障礙

對與純裝飾性圖標，請添加 aria-hidden="true" 屬性。否則，請提供適當的替代性文本。根據添加圖標的方法和使用位置（例如，作為獨立的圖片，或者作為按鈕等類似組件上的唯一內容），有多種使用方式。以下是幾個示例：

<!-- alt="..." on <img> element -->
<img src="/assets/img/bootstrap.svg" alt="Bootstrap" ...>

<i class="bi-github" role="img" aria-label="GitHub"></i>

<svg class="bi" ... role="img" aria-label="Tools">
  <use xlink:href="bootstrap-icons.svg#tools"/>
</svg>

<!-- aria-label="..." on the control -->
<button ... aria-label="Mute">
  <svg class="bi bi-volume-mute-fill" aria-hidden="true" ...>
  ...
  </svg>
</button>

5、SVG 相關問題

SVG 是非常棒的技術，但仍然存在一些需要處理的怪異行為。考慮到 SVG 有多種使用方式，我們在代碼中沒有包含以下這些屬性和處理手段。

已知問題包括：

在 Internet Explorer 和舊版本的 Edge 瀏覽器鐘 SVG 可以獲取焦點。在嵌入 SVG 時，請為 <svg>元素添加 focusable="false" 屬性。在 Stack Overflow 上有詳細解釋。
當 SVG 與 <img> 元素一起使用時，屏幕閱讀器可能不會將它們視為圖片來處理，也可能會完全跳過這類圖片。為 <img> 元素設置role="img" 可以避免此類問題。
引用外部的 SVG sprites 圖可能在 Internet Explorer 瀏覽器中無法正常使用。請根據需要使用svg4everybody polyfill。

年前，粒子動畫席卷了網絡，并成功地為自己開辟了一個利基市場。當前對具有高科技氛圍和幾何裝飾的設計的巨大癡迷使它們成為當今更受歡迎的解決方案之一。

使用粒子動畫給人留下深刻印象
隨著時間的推移，技術成熟了。從散落在畫布上的雜亂無章的小白點，它變成了一種潛力巨大的工具。這不是什么特別的東西，但它有一定的令人驚嘆的因素。此外，它完美地為高科技、幾何和商務美學做出了貢獻——自然而然地完成了它們。

前提是：粒子動畫要給人留下深刻印象。而且，開發人員始終堅持這一假設，充分利用它。讓我們考慮一下這個解決方案的真正粉絲創建的一些驚人的代碼片段。

NO.1 Justin Windle 的 30,000 個粒子

這里的標題不言自明。船上有 30,000 個粒子，您會期待一些宏偉的東西。賈斯汀溫德爾當然達到了我們的期望。他的概念令人難以置信。用你的鼠標到處玩。物理學只是例外。這個版本的粒子動畫在開發者中很受歡迎，盡管規模沒有那么大。

NO.2 Alex Safayan 在水中的魚

Alex Safayan 提出了幾乎相同的解決方案，但在這種情況下，粒子越來越大。鼠標光標也將這些點推開，形成帶有微妙漣漪效果的痕跡。動畫的行為讓人想起魚靠近水面時的運動。注意物理學：點之間的相互作用是經過深思熟慮的。

NO.2 浮游生物——Marco Dell'Anna 的粒子生命

獲得 2017 年度最受關注項目獎的 Plankton 無疑是值得關注的。該項目不僅著迷于想法，還著迷于實現。從像手套一樣適合這里的微妙色彩到看起來令人難以置信的自然的華麗行為，Marco Dell'Anna 對細節有著敏銳的洞察力。

NO.4 Marco Dell'Anna的星塵

我喜歡這里華麗的復古氛圍、霓虹燈和華麗的色彩。很難把你的眼睛從它身上移開。Stardust 是設計和編碼的共生體，是一部鼓舞人心的杰作。

NO.5 Akimitsu Hamamuro 的重力點

Akimitsu Hamamuro 邀請您在他的游樂場添加所謂的“重力點”。它們侵入點的混亂運動，像磁鐵一樣拉動它們。雖然它們不扮演軌道中心的角色；然而，它們形成了迫使粒子向其方向移動的焦點。

NO.6 Nate Wiley 的 Particle Orb CSS

如今，球體是英雄區域非常流行的風格選擇。Nate Willey 對這一趨勢的看法令人印象深刻。由于微小的顆粒，球體看起來很脆弱，同時由于經過深思熟慮的行為而堅固。他分解和重新形成球體的程序非常棒。

NO.7 Kevin Rajaram 的粒子波

Kevin Rajarm 汲取了粒子動畫的美麗和優雅，并用Three.js的強大來增強它，帶來了一個精致但真正復雜的概念。令人驚嘆的海浪景色讓人感覺未來主義、人工和迷人。

非正統用途

還有更令人印象深刻的使用粒子動畫的方法。讓我們走出常規，開箱即用地思考：這種方法很容易使標識和字母等元素受益。

NO.8 Tamino Martinius 的交互式粒子標志

Interactive Particle Logo 就是一個典型的例子。它看起來像是上面提到的 Justin Windle 片段的重新設想的解決方案。雖然沒有 30,000 個點，但它由數量驚人的粒子組成，巧妙地組成了“CODEPEN”這個詞。這是該概念找到實際用途的案例之一。

NO.9 Louis Hoebregts 的文本到粒子

Louis Hoebregts 在這支筆中提供了先前解決方案的彩色版本。這里的文本是由一千個彩色實心圓圈組成的，這些圓圈通過與上一個示例相同的交互性來豐富。

NO.10 粒子由 Marco Dell'Anna 書寫文本

雖然這不是一個戲劇性的入口，但它有一些令人著迷的東西。流暢的動畫慢慢揭開人物的面紗，點燃我們的興趣。這個概念有某種神秘的風格，類似于“陌生人”的介紹。

NO.11 馬可·戴爾安娜 (Marco Dell'Anna) 就這樣做

這是Marco Dell'Anna的又一杰作。這一次，粒子動畫參與塑造了著名的耐克標志。從晦澀、半透明到明快、立體，動畫逐漸暴露了標志，不顯眼地抓住了整體的注意力。

引人注目的效果

粒子動畫是越小越好的情況之一。點越小，可以實現的效果就越令人印象深刻。一方面，由于涉及幾何和物理，它看起來很復雜。另一方面，由于精致的形狀，它看起來脆弱而微妙。這種獨特的融合使粒子動畫與眾不同且引人注目。

粒子動畫在企業網站建設中的運用案例

圖片來源：素馬設計

在線咨詢

上一篇：使用 ASP.NET Core 構建 Web API
下一篇：曬背、坐石墩，另類養生靠譜嗎？提醒：這些人群切勿跟風

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Font Awesome 圖標

使用Bootstrap圖標的基本語法：

例子：這是在提交按鈕中使用Bootstrap的搜索圖標的HTML代碼。

輸出：你在按鈕上看到的搜索圖標是由Bootstrap框架提供的圖標，屬于類名search.。

1、安裝

1.1、通過 npm 安裝

1.2、下載安裝包

1.3、通過公共 CDN 加載

2、用法

2.1、內嵌

2.2、Sprite

2.3、作為外部圖片文件引用

2.4、圖標字體

2.5、CSS

3、設置樣式

4、無障礙

5、SVG 相關問題

NO.2 浮游生物——Marco Dell'Anna 的粒子生命

NO.4 Marco Dell'Anna的星塵

NO.5 Akimitsu Hamamuro 的重力點

NO.6 Nate Wiley 的 Particle Orb CSS

NO.7 Kevin Rajaram 的粒子波

非正統用途

NO.8 Tamino Martinius 的交互式粒子標志

NO.9 Louis Hoebregts 的文本到粒子

NO.10 粒子由 Marco Dell'Anna 書寫文本

NO.11 馬可·戴爾安娜 (Marco Dell'Anna) 就這樣做

引人注目的效果

您的項目需求