Font Awesome 圖標(biāo)

ont Awesome 是一套絕佳的圖標(biāo)字體庫和CSS框架。

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

要使用Font Awesome圖標(biāo)，請?jiān)贖TML頁面的部分中添加以下行：

1、國內(nèi)推薦 CDN：

<linkrel="stylesheet">

2、海外推薦 CDN

<linkrel="stylesheet">

3、直接下載到本地

Download

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

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

實(shí)例

<!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>

結(jié)果:

點(diǎn)擊 "嘗試一下" 按鈕查看在線實(shí)例

Font Awesome 設(shè)計(jì)為與內(nèi)聯(lián)元素一起使用。 和 元素廣泛用于圖標(biāo)。

另外注意，如果更改圖標(biāo)容器的字體大小或顏色，圖標(biāo)會(huì)更改。

大圖標(biāo)

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

實(shí)例

<!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>

結(jié)果:

提示：如果你的圖標(biāo)在頂部和底部被切斷，請?jiān)黾有懈摺?/p>

列表圖標(biāo)

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

實(shí)例

<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>

結(jié)果:

List icons
List icons
List icons

邊界和被拉的圖標(biāo)

fa-border，fa-pull-right 或 fa-pull-left 類用于拉式引用或文章圖標(biāo)。

實(shí)例

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

結(jié)果:

動(dòng)態(tài)圖標(biāo)

fa-spin 類可以讓圖標(biāo)旋轉(zhuǎn), fa-pulse 類可以使圖標(biāo)以 8 步為周期進(jìn)行旋轉(zhuǎn)。

實(shí)例

<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">

結(jié)果:

嘗試一下 ?

注意: IE8 和 IE9 不支持 CSS3 動(dòng)畫。

旋轉(zhuǎn)和翻轉(zhuǎn)的圖標(biāo)

fa-rotate-* 和 fa-flip-* 類用于旋轉(zhuǎn)和翻轉(zhuǎn)圖標(biāo)。

實(shí)例

<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">

結(jié)果:

嘗試一下 ?

堆疊的圖標(biāo)

要堆疊多個(gè)圖標(biāo)，請使用父級上的 fa-stack 類，fa-stack-1x 類用于常規(guī)大小的圖標(biāo)，fa-stack-2x 用于較大的圖標(biāo)。

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

實(shí)例

<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

結(jié)果:

fa-twitter on fa-circle-thin

fa-twitter (inverse) on fa-circle

fa-ban on fa-camera

嘗試一下 ?

固定寬度圖標(biāo)

fa-fw 類用于設(shè)置固定寬度的圖標(biāo)。當(dāng)不同的圖標(biāo)寬度偏離對齊時(shí)，此類非常有用。特別適用于Bootstrap的導(dǎo)航列表和列表組。

實(shí)例

<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是用于開發(fā)響應(yīng)式和移動(dòng)優(yōu)先的網(wǎng)站的CSS框架。Bootstrap增加了一個(gè)功能，人們可以使用Bootstrap提供的優(yōu)質(zhì)圖標(biāo)。這些圖標(biāo)可以用SVG或網(wǎng)頁字體格式。

Bootstrap提供了一千多個(gè)高質(zhì)量的圖標(biāo)，你可以在你的項(xiàng)目中使用它們。你還可以根據(jù)需要改變這些圖標(biāo)的顏色和大小。

是什么讓Bootstrap框架中的圖標(biāo)與眾不同，我們?yōu)槭裁匆褂盟?/p>

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

使用Bootstrap圖標(biāo)的基本語法：

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

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

例子：這是在提交按鈕中使用Bootstrap的搜索圖標(biāo)的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>

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

1、安裝

Bootstrap 圖標(biāo)庫已被發(fā)布到了 npm，但是仍然可以手動(dòng)下載并安裝。

1.1、通過 npm 安裝

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

npm i bootstrap-icons

1.2、下載安裝包

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

1.3、通過公共 CDN 加載

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

<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 圖標(biāo)庫的所有圖標(biāo)都是 SVG 格式的，因此你可以通過以下幾種方式將它們添加到你的 HTML 中，具體使用哪種方式取決于你的項(xiàng)目是如何設(shè)置的。我們建議設(shè)置 width: 1em（以及可選的 height: 1em），便于你通過 font-size 屬性重置圖標(biāo)的大小。

2.1、內(nèi)嵌

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

<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> 元素即可插入任何圖標(biāo)。使用圖標(biāo)的文件名作為片段標(biāo)識符（例如 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 圖標(biāo)庫的 SVG 文件復(fù)制到你所選擇的目錄中，并像引用普通圖片一樣通過 <img> 元素引入 SVG 圖標(biāo)。

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

2.4、圖標(biāo)字體

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

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

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

2.5、CSS

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

如果需要使用 background-size 來調(diào)整圖標(biāo)的大小，則必須設(shè)置 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、設(shè)置樣式

可以通過設(shè)置 .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、無障礙

對與純裝飾性圖標(biāo)，請?zhí)砑?aria-hidden="true" 屬性。否則，請?zhí)峁┻m當(dāng)?shù)奶娲晕谋尽８鶕?jù)添加圖標(biāo)的方法和使用位置（例如，作為獨(dú)立的圖片，或者作為按鈕等類似組件上的唯一內(nèi)容），有多種使用方式。以下是幾個(gè)示例：

<!-- 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 相關(guān)問題

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

已知問題包括：

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

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

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

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

NO.1 Justin Windle 的 30,000 個(gè)粒子

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

NO.2 Alex Safayan 在水中的魚

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

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

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

NO.4 Marco Dell'Anna的星塵

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

NO.5 Akimitsu Hamamuro 的重力點(diǎn)

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

NO.6 Nate Wiley 的 Particle Orb CSS

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

NO.7 Kevin Rajaram 的粒子波

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

非正統(tǒng)用途

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

NO.8 Tamino Martinius 的交互式粒子標(biāo)志

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

NO.9 Louis Hoebregts 的文本到粒子

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

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

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

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

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

引人注目的效果

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

粒子動(dòng)畫在企業(yè)網(wǎng)站建設(shè)中的運(yùn)用案例

圖片來源：素馬設(shè)計(jì)

在線咨詢

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

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

Font Awesome 圖標(biāo)

使用Bootstrap圖標(biāo)的基本語法：

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

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

1、安裝

1.1、通過 npm 安裝

1.2、下載安裝包

1.3、通過公共 CDN 加載

2、用法

2.1、內(nèi)嵌

2.2、Sprite

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

2.4、圖標(biāo)字體

2.5、CSS

3、設(shè)置樣式

4、無障礙

5、SVG 相關(guān)問題

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

NO.4 Marco Dell'Anna的星塵

NO.5 Akimitsu Hamamuro 的重力點(diǎn)

NO.6 Nate Wiley 的 Particle Orb CSS

NO.7 Kevin Rajaram 的粒子波

非正統(tǒng)用途

NO.8 Tamino Martinius 的交互式粒子標(biāo)志

NO.9 Louis Hoebregts 的文本到粒子

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

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

引人注目的效果

您的項(xiàng)目需求