如何使用 Divi 創建圖標字體按鈕

圖標字體按鈕在網頁設計領域有很多用途。 由於字體圖標在縮放到不同大小時保持清晰的顏色和設計，因此在按鈕中使用它們是有意義的。 而且，使用 Elegant Icon Font 在 Divi 中創建圖標字體按鈕實際上非常容易。 在本教程中，我將向您展示如何使用帶有 Divi 按鈕模塊的圖標字體來創建單個圖標按鈕。

本教程的一些亮點包括：

• 如何使用優雅字體將圖標添加為按鈕文本
• 如何添加填充和邊框半徑以確保按鈕呈現完美的正方形或圓形
• 如何在懸停時用不同的圖標替換按鈕圖標
• 如何定位按鈕圖標以重疊圖像
• 和更多…

搶先看

這是即將發生的事情的先睹為快……

你需要什麼

對於本教程，我將使用以下內容：

• Divi 主題（顯然）
• The Elegant Font Icons – 一旦您從博客文章中下載了 zip 文件，我們將拖入 eleganticons.ttf 字體文件以用作我們按鈕模塊的自定義字體。
• Bed & Breakfast 主頁佈局（可從 Divi Builder 免費獲得）

讓我們開始吧！

將優雅的圖標字體添加到您的按鈕模塊

添加按鈕模塊

首先，創建一個新頁面並部署可視化構建器。 選擇“從頭開始構建”，然後在部署可視化構建器後，向該部分添加一列行，然後向該行添加一個按鈕模塊。

拖入優雅的圖標字體

要獲得 Elegant Icon Font，請訪問 Elegant Icon Font 博客文章並下載字體文件。 解壓縮 zip 文件內容並通過導航到優雅的字體 > HTML CSS > 字體找到優雅的圖標字體文件。 然後將文件“ElegantIcons.ttf”從您的計算機文件中拖放到可視化構建器中。

這將自動打開上傳字體模式。 只需單擊上傳按鈕即可將字體上傳到 Divi Builder。

現在，在可視化構建器中自定義任何模塊字體時，您將可以使用優雅的圖標字體。

轉到按鈕模塊設置並使用您剛剛上傳的新優雅圖標字體更新按鈕字體。 它將顯示在“自定義字體”下的圖標列表中。

您可能會注意到，現在您的按鈕文本已轉換為一堆圖標。 這是因為輸入到按鈕文本輸入框中的每個字符現在都有一個對應於當前使用的字母/字符的圖標。

由於我們只需要一個圖標用於我們的按鈕，您可以選擇鍵盤上的任何字符來生成與該字符相關聯的圖標。 例如，為按鈕文本輸入數字 5 以獲得右 V 形箭頭。

懸停時交換按鈕圖標

如您所知，按鈕模塊包括在懸停時添加圖標的選項。 我們可以使用此功能將圖標字體替換為懸停圖標，以獲得不錯的懸停效果。 我們需要做的就是修改按鈕設置如下：

按鈕文字大小：30px
按鈕圖標：見截圖（這將是將替換用於按鈕的圖標字體的圖標）
按鈕圖標顏色：#0c71c3（這應該與用於按鈕文本的顏色相匹配）
按鈕圖標位置：左
按鈕懸停文本顏色：rgba(255,255,255,0)（這是完全透明的，以便在懸停時隱藏按鈕圖標字體）
自定義填充：左 1em，右 1em（此填充將覆蓋按鈕的默認填充並防止其在懸停時擴展）

現在我們需要做的就是覆蓋自定義 css 中 before 元素的邊距。 轉到“高級”選項卡並在“之前”框中輸入以下 CSS：

margin-left: 0 !important;

現在您的按鈕圖標將被懸停時的懸停圖標替換。

創建可隨按鈕文本大小縮放的完美圓形圖標按鈕

圓形按鈕設計對於單個圖標按鈕非常有效。 而且，如果您了解按鈕模塊間距的內部工作原理，您就可以創建完美的圓形按鈕，根據按鈕文本大小進行縮放。

訣竅是使用“em”長度單位來分隔按鈕。 此長度單位與您的按鈕文本大小有關。 因此，如果您的按鈕文本大小為 30 像素，則 1em 也是 30 像素（2em 將是 60 像素，依此類推……）。 知道了這一點，我們只需要確保按鈕周圍的填充在所有 4 個邊上都相同。 但是你可能沒有想到的是，按鈕文本的 line-height 默認是 1.7em。 這意味著我們需要在添加頂部和底部填充值時考慮到這一點。

對於那些想知道創建圓形按鈕所需的填充值背後的數學原理的人，這裡是：

對於 Left 和 Right 填充，將它們都設置為 1em。 這意味著我們的按鈕總寬度將為 90px（或 3em），因為……

左內邊距 30 像素 + 圖標字體 30 像素 + 右內邊距 30 像素 = 總共 90 像素

按鈕文本行高為 1.7em，相當於按鈕文本大小 (30px) 的 170%，即 51px。

對於頂部和底部填充，將它們都設置為 0.65em。 0.65em 相當於按鈕文本大小 (30px) 的 65%，也就是 19.5px。

所以…

頂部填充 19.5 像素 + 行高 51 像素 + 底部填充 19.5 像素 = 總共 90 像素

這意味著當按鈕文本設置為 30 像素時，按鈕的總大小將為 90 像素 x 90 像素（一個完美的正方形）。 事實上，你可以這樣想。 無論您將按鈕文本大小設置為什麼，按鈕的總大小將是該值的 3 倍。 因此，一個 40 像素的按鈕文本將創建一個 120 像素 x 120 像素的按鈕，依此類推。

現在，按鈕具有正確的尺寸，但它仍然是方形的。 我們需要做的就是添加 50% 的邊框半徑以將方形按鈕更改為完美的圓形按鈕。

以下是將按鈕更改為圓形按鈕所需的內容：

按鈕邊框半徑：50%
自定義填充：頂部 0.65em，底部 0.65em，右側 1em，左側 1em

不要忘記，您可以調整按鈕文本大小，當填充縮放到文本大小時，按鈕將保持完美的圓形。

將圖標按鈕添加到您的 Divi 佈局

Divi 可以輕鬆添加和自定義單個圖標按鈕以適應任何預製佈局的設計。

對於此示例，我將向您展示如何將單個圖標按鈕添加到 Bed & Breakfast Home Page 佈局。

要將佈局添加到您的頁面，請單擊頁面底部的紫色圖標打開設置菜單（確保啟用了可視化構建器）。 然後單擊從庫中加載圖標。 選擇 Bed & Breakfast Home Page 佈局，然後單擊“使用此佈局”按鈕將佈局部署到頁面。

向圖像添加圖標按鈕

假設您想添加一個小圖標按鈕來覆蓋圖像的一角，以獲得鏈接到特定產品或服務的附加 CTA。 您需要做的就是在圖像下添加一個按鈕模塊並對其進行自定義以包含圖標字體，並使其以一些自定義間距與圖像重疊。

在主頁佈局上找到“關於我們”部分。 然後在用於展示“雙人房”的圖像中直接添加一個按鈕模塊（它是三列行的第一列中的第一個）。

然後打開按鈕設置並在按鈕文本框中輸入一個大寫的“P”。 一旦您選擇優雅字體作為按鈕字體，這將變成我們的圖標。

要快速開始將按鈕的設計與佈局相匹配，請保存您的按鈕設置並在佈局的頂部找到“立即預訂”按鈕。 打開按鈕設置並通過右鍵單擊按鈕選項切換標題並從列表中選擇“複製按鈕樣式”選項來複製按鈕樣式。

現在右鍵單擊您在圖像下添加的按鈕模塊，然後選擇“粘貼按鈕樣式”。

然後更新按鈕設置如下：

按鈕字體：優雅字體
按鈕邊框寬度：0px
顯示按鈕圖標：否

然後讓我們添加我們漂亮的自定義填充以確保按鈕是一個完美的正方形：

自定義填充：頂部 0.65em，底部 0.65em，左側 1em，右側 1em

要定位按鈕使其與圖像的右下角重疊，您首先需要去掉上面圖像模塊的底部邊距。 打開按鈕正上方圖片的圖片模塊設置，設置下邊距為0px。

現在我們需要使用等於按鈕高度的自定義負邊距值將按鈕拉到圖像上。 為此，我們需要確定按鈕的高度。 正如本文前面提到的，使用自定義填充就位，我們可以根據當前按鈕文本大小知道按鈕的確切大小。 由於按鈕文本大小為 20px，我們知道按鈕的高度為 3em（按鈕文本大小的 3 倍），即 60px。 因此，我們需要為我們的按鈕設置自定義邊距，如下所示：

自定義邊距：-60px 頂部

然後我們可以通過將按鈕對齊調整為右側來將按鈕定位在右側。

現在我們已經為我們的圖像和按鈕設計了一個可行的設計。 我們需要做的就是向該部分中的所有圖像添加相同的按鈕。

由於我們去掉了圖像的底部邊距，我們可以使用擴展樣式輕鬆地將該更改應用於該部分中的所有圖像。 右鍵單擊圖像並選擇“擴展圖像樣式”。

在“擴展樣式”彈出窗口中，為“貫穿”選項選擇“本節”，然後單擊擴展按鈕。 現在所有圖像的底部邊距都是 0px。

最後一步是簡單地複制和粘貼每個圖像下的按鈕模塊。

這是最終的設計。

而且因為我們使用了適當的間距技術，該按鈕也將在移動設備上保持原位......

使用按鈕模塊可用的圖標

由於按鈕模塊按鈕文本僅限於鍵盤上可用的字符，因此您需要探索這些鍵以找到與每個鍵關聯的可用圖標。 一個簡單的方法是創建一個按鈕模塊，將按鈕字體設置為優雅字體，然後在按鈕文本框中鍵入字符。

這是帶有相應字體圖標的字符的屏幕截圖：

如果您發現此過程受到限制，您始終可以使用文本模塊使用此處列出的 unicode 創建圖標鏈接。

最後的想法

使用帶有 Divi 按鈕模塊的優雅圖標字體是為您的網站創建單個圖標按鈕的便捷方式。 這為通過模塊設置獲得創意打開了一些大門，以使用獨特的文本樣式、懸停效果等自定義按鈕。 我特別喜歡那些自定義按鈕間距值，它確保按鈕呈現完美的正方形或圓形。

圖標按鈕有很多用途。 希望我介紹的示例用例將為您自己的項目增添一點靈感。

有關更多想法，請查看如何使用 Elegant Icon Font 或如何在您的網站上嵌入圖標字體。

我很樂意在下面的評論中提出您的一些想法。

乾杯!