如何在WordPress中使用Bootstrap圖示？

Bootstrap是最流行的前端框架之一，最初由Twitter開發。該框架的主要目標是使用可重用元件建立對移動裝置友好的網站。

最初Bootstrap提供Glyphicons，然後使用Font Awesome，現在提供他們自己的一組圖示，稱為Bootstrap Icons。您可以在任何網站上使用引導圖示，包括WordPress網站。好的部分是您不需要使用基本框架CSS和JS來使用圖示。

在本文中，我們將解釋如何在WordPress網站中使用Bootstrap圖示。

Bootstrap圖示

直到幾年前，Font Awesome非常受歡迎，幾乎每個開發人員和網站所有者都在使用它們。這最初是為與Bootstrap一起使用而開發的，它基本上被免費的Bootstrap圖示集所取代。您可以在任何專案中以兩種方式使用Bootstrap圖示 – SVG和Web字型。如果SVG無法在您的WordPress網站上執行，您可以使用網路字型選項。

在WordPress中使用圖示涉及兩個步驟：

• 在標題中連結圖示CSS
• 在內容中嵌入HTML

在WordPress中連結Bootstrap圖示CSS

雖然您可以在伺服器上下載和託管圖示，但最簡單的方法是使用他們的CDN連結。這是Bootstrap Icons的最新CDN連結：

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

您需要將此連結插入WordPress網站的header部分。有許多免費外掛可用於在標題中插入CSS連結。但是，此外掛不提供任何僅在少數頁面上插入連結的控制。預設情況下，它將在整個站點的標題中載入CSS檔案。當您只想在少數文章或頁面上使用圖示時，這可能不是必需的。在這種情況下，您可以使用我們將在本文中使用的Header Footer Code Manager外掛。

• 登入到您的WordPress管理面板，然後轉到“外掛 > 安裝外掛”部分。
• 搜尋“header code”以找到Header Footer Code Manager外掛。
• 單擊“安裝”按鈕和“啟用”按鈕開始在您的站點上使用該外掛。

安裝Header Footer Code Manager外掛

啟用外掛後，它將在側邊欄中新增一個名為HFCM的新選單項。將滑鼠懸停在HFCM選單上並選擇“Add New”選項。您將看到兩個部分 – 一個用於控制程式碼段，然後是用於貼上實際程式碼的框。在第一部分填寫以下詳細資訊：

• Snippet Name – 為您的片段輸入名稱，例如Bootstrap圖示。
• Snippet Type – 從下拉選單中選擇CSS。
• Site Display – 在此處選擇“站點範圍”選項以在整個站點中插入 CSS。否則，請從可用選項之一中進行選擇，例如特定文章、頁面、類別、標籤、主頁等。您將看到基於您的選擇的其他選項。例如，選擇特定文章將顯示用於選擇文章的“文章列表”下拉選單。您可以選擇要在其中顯示圖示的單個或多個文章。如果您想在站點範圍內使用，則可以通過從排除列表中選擇它們來排除在某些文章和頁面上載入 CSS。
• Location – 選擇標題選項。
• Device Display——選擇“Show on ALL Devices”選項。如果需要，您可以僅在桌面或移動裝置上進行選擇。
• Status – 選擇“Active”選項。

填寫片段詳細資訊

填寫完所有詳細資訊後，將CDN連結貼上到“Sinppet/Code”部分。

新增CDN CSS連結

單擊“Save”按鈕以應用您的更改。

為圖示插入HTML

現在您已經在標題部分插入了CSS，下一步是為您的圖示嵌入HTML。與Font Awesome圖示類似，每個Bootstrap圖示也有一個程式碼點和相應的CSS類名稱。您可以參考圖示頁面以獲取所有您喜歡的圖示的CSS類名稱的完整列表。您需要做的就是使用自定義HTML區塊嵌入具有正確CSS類名稱的HTML程式碼。您可以使用SVG或Web字型，因為CDN中的連結CSS允許這兩種選擇。

使用網路字型

這是最簡單的選項，因為您只需要知道圖示的CSS類名稱。例如，下面是插入WhatsApp圖示字型的格式。

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

您可以通過新增內聯CSS來更改大小和顏色，如下所示：

<i class="bi bi-whatsapp" style="font-size: 5rem; color: blue;"></i>

您可以簡單地將這段程式碼貼上到自定義HTML區塊中。

插入網頁字型HTML

釋出您的文章，當檢視已釋出的文章時，圖示將如下所示。

已釋出文章中的Bootstrap圖示

您可以在同一自定義HTML區塊內新增其他圖示，以將完整的社交圖示列表顯示為小工具。如果您想為您的圖示新增超連結，只需使用HTML錨標記包裝圖示即可。你也可以使用   在圖示之間新增空間。下面是帶有Facebook、Twitter、YouTube圖示的社交小工具的程式碼。

<a href="https://www.facebook.com/"> <i></i> </a>
<a href="https://twitter.com/"> <i></i> </a>
<a href="https://www.yourtube.com/"> <i></i> </a>

新增更多圖示

它在已釋出的文章上如下所示。

社交小工具圖示

使用SVG圖示

為了使用SVG格式，您需要獲取圖示和CSS類的SVG。您可以通過單擊Bootstrap圖示頁面中的圖示並複製“Copy HTML”部分下的程式碼來獲取此資訊，如下所示。

為Bootstrap圖示複製SVG HTML程式碼

SVG將採用以下格式，預設情況下，圖示大小通過寬度/高度屬性控制。

<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>

您可以使用CSS顏色屬性更改大小並新增自定義顏色，如下所示。

<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>

現在您可以將此程式碼嵌入到您的WordPress網站的自定義HTML中。您可以單擊預覽以檢視圖示，也可以釋出文章以在實時頁面中檢視圖示。

小結

由於Bootstrap圖示是開源的並且免費提供，因此您可以利用它們來美化您的WordPress內容。我們建議使用Web字型選項，它只需要圖示的CSS類名稱。但是，如果您覺得舒服，您可以使用SVG。請注意，如果您已經在使用基於Bootstrap的WordPress主題，則圖示的CSS連結應該是您主題的一部分，您不需要使用外掛插入。