如何將字體真棒圖標添加到您的 WordPress 菜單

已發表: 2022-09-15

將 Font Awesome 圖標添加到您的 WordPress 菜單是為您的網站添加一些視覺風格的好方法。有幾種不同的方法可以做到這一點，但我們將重點關注兩種：使用插件和手動添加代碼。如果您不是開發人員或不習慣使用代碼，那麼使用插件是最佳選擇。我們推薦 Font Awesome Icons 插件，它免費且易於使用。只需安裝並激活插件，然後轉到 WordPress 儀表板中的外觀 > 菜單。從那裡，您可以單擊“Font Awesome”選項卡以選擇要使用的圖標。如果您習慣使用代碼，則可以通過在主題中添加幾行 CSS 來將 Font Awesome 圖標添加到菜單中。首先，您需要下載 Font Awesome圖標字體。然後，打開主題的 style.css 文件並在底部粘貼以下代碼：@font-face { font-family: 'FontAwesome'; src: url('fontawesome.eot'); src: url('fontawesome.eot?#iefix') 格式('embedded-opentype'), url('fontawesome.woff2') 格式('woff2'), url('fontawesome.woff') 格式('woff' ), url('fontawesome.ttf') 格式('truetype'), url('fontawesome.svg#FontAwesome') 格式('svg'); 字體粗細：正常；字體樣式：正常；將“fontawesome.eot”替換為你的 Font Awesome 圖標字體文件的路徑。然後，將以下代碼添加到您的菜單項中： .fa-icon { font-family: 'FontAwesome'; 填充權：0.5em；確保保存您的更改並將文件上傳到您的服務器。現在您的 Font Awesome 圖標將顯示在您的 WordPress 菜單中！

在本文中，我們將引導您了解如何將 Font Awesome 圖標添加到 WordPress 菜單。啟用插件後，您將能夠從單擊擴展程序時出現的新菜單訪問帖子的圖標，稱為“Font Awesome Icon”。使用最新版本的插件，通過簡碼或 HTML 片段添加字體圖標將更加容易。圖標現在可以在 WordPress 4.0 之後的短代碼中包含 CSS 類。因此，您可以使用一些 CSS 類（如 Sizing、Rotating 和 Animating）將一些令人驚嘆的 Font Awesome 圖標添加到您的代碼中。由於圖標字體 IcoMoon ，它僅由一堆不同樣式的字母組成，每個字母都有不同的圖標。在您的 WordPress 菜單中使用 Font Awesome 圖標是一個簡單的過程，只需幾分鐘。在第二種方法中您將不得不更加努力，但您將能夠控制菜單的外觀。這是向訪問者展示您緊跟時尚最新趨勢的好方法。

本文將引導您完成在不使用任何插件的情況下將 Font Awesome 主題添加到您的 WordPress 平台的過程。如果您想手動將圖標添加到您的站點，請轉到Font Awesome 圖標庫，然後一一選擇您要使用的圖標。如果您希望將主題的嵌入代碼直接添加到您的網站，請輸入您的電子郵件地址。

如何在 WordPress 中將圖標添加到菜單？

信用：堆棧溢出

選擇您已經創建的任何菜單項以添加 WordPress 菜單圖標。通過單擊圖標，您可以訪問內容。鏈接將被選中。要添加菜單項圖標，請單擊它並導航到您希望它出現的部分。對於基於 Themeisle 構建的 Menu Icons 插件，它包含來自 Dashicons 集合的圖標選項。

在您的網站上，WordPress 菜單通常充滿純文本，並帶有指向各個內容部分的鏈接。如果添加圖標或圖形，它們將更加用戶友好。使用 ThemeIsle 的菜單圖標，我們將向您展示如何將菜單圖標添加到您的 WordPress 網站。要將圖像用作菜單圖標，請轉到全局選項卡並啟用它。通過單擊菜單項，您可以訪問菜單的結構。確定您為菜單項選擇了適當的圖標。類別放置在每個圖標類型的右下角，更容易找到您需要的圖標類型。

如何將圖標添加到您的 WordPress 菜單

圖標很難添加到您的 WordPress 菜單中，但只要有一點訣竅和一些插件，您就不必擔心它們。首先從菜單欄中選擇外觀。啟動它後，您將能夠看到您的菜單項。當您通過單擊向下箭頭展開要添加圖標的菜單項時，會出現一些字段。在導航標籤字段中，我們可以添加我們的圖標 HTML。下一步是找到我們要使用的圖標。我們有多種選擇。我們可以在線查找圖標，或者我們可以下載並安裝 IconFinder 之類的插件，這將允許我們上傳和管理我們自己的圖標。創建圖標後，我們需要弄清楚如何將它們包含在我們的 WordPress 菜單中。這可以通過將圖標上傳到我們的 WordPress 網站或將圖標 URL 複製到記事本文件並使用 WordPress 菜單來完成。如果我們願意，有必要找到一種方法將圖標上傳到我們的網站。通過在記事本文件中輸入圖標 URL 並在我們的 WordPress 菜單中引用它們，我們可以將圖標上傳到我們的 WordPress 網站或簡單地鏈接它們。我們必須找到一種方法來保存記事本文件，以便將圖標 URL 粘貼到記事本文件中，然後在我們的 WordPress 菜單中引用它們。為此，我們可以使用 IconFinder 的 Icons 等插件，也可以將記事本文件直接保存到我們的 WordPress 網站。我們的自定義圖標將在我們的 WordPress 菜單中保存和引用後立即出現在我們的 WordPress 菜單中。

如何修復 WordPress 中未顯示的字體真棒圖標？

如果您無法在 WordPress 中顯示 Font Awesome 圖標，您可以嘗試一些方法。首先，確保您已經安裝了 Font Awesome 插件並且它已被激活。接下來，檢查您嘗試使用的圖標是否受 Font Awesome 支持。如果是，那麼您可能需要將該圖標添加到您的 WordPress 菜單中。最後，如果一切都失敗了，您可以嘗試手動將圖標添加到您的 WordPress 菜單中。有關如何執行此操作的更多說明，請參閱Font Awesome 網站。

如何解決字體問題？ WordPress 沒有顯示一些最引人注目的圖標。上面的視頻幫助了許多人解決他們網站上字體真棒圖標的問題。因此，我將此頁面作為資源提供以提供幫助。因此，我可以根據需要添加新的字體修復和解決方案。一些 Font Awesome 圖標沒有出現在我的 WordPress 博客上，但其他的卻出現了。當我切換主機時，我發現問題仍然存在。

Font Awesome 插件現已更名為 Font Awesome 插件。如果您使用 CDN，上面提到的一些解決方案可能會很有用。為什麼 Font Awesome 中的圖標消失了？在我努力解決此問題時，您可以觀看本頁頂部的視頻，該視頻向您展示了我的思考過程。首先，我找到了一個名為 Awesome Stylesheet 的樣式表的鏈接。第二步，我從靜態代碼切換到動態代碼。通過搜索我的插件區域，我可以看到我找到了一些與“字體真棒”相關的結果。

根據這個證據，其中一些丟失的圖標可能是由於樣式表錯誤造成的。當圖標停止在您身上工作時，您如何讓圖標再次工作？如果您在使用同一個圖標時遇到問題，請在 fontawesome 中查找它並將其更改為其他設計或版本。

免費或替代字體真棒版本不會顯示專業圖標

在任何情況下，當您使用 Free 或 Alternative Font Awesome 版本並且在您的頁面上安裝了 Pro 圖標時，Pro 圖標都不會出現。您可以使用Alternative Font Awesome 圖標或購買 Pro 訂閱以充分利用字體。當您在 Gutenberg 文本塊中（或 WordPress Classic 編輯器中的格式欄上方）時，您需要使用圖標選擇器搜索按圖標名稱、類別或關鍵字查找 Font Awesome 圖標。

如何在沒有插件的情況下將圖標添加到 WordPress 菜單？

學分：WPMU DEV

在管理儀表板上，轉到左側菜單並選擇外觀。在新屏幕中，選擇右上角的“屏幕”選項，然後選中“在菜單項中顯示 CSS 類”旁邊的框，以查看要在其中添加圖標到沒有插件的 WordPress 自定義菜單的菜單。

通過在站點的導航菜單中添加圖標，您可以為訪問者提供有關內容的一些視覺線索，並為設計添加漂亮的觸感。大多數 WordPress 菜單都是純文本鏈接，但您可以添加圖像圖標以使其更具交互性。但是，在執行此操作之前，您必須先添加 Font。圖標使 WordPress 如此易於使用。要安裝和激活 Better Font Awesome 插件，只需按照以下步驟操作。無需從“CSS 類”字段複製每個圖標或導航菜單項的 CSS 類。圖標也可以單獨設置樣式和放大。

如果您想使用插件，請務必為您的 WordPress 版本找到正確的插件。

WordPress 用戶可以選擇使用內置菜單系統或使用第三方插件來創建自定義菜單。內置菜單系統是最直接的，但它可能沒有您需要的圖標，或者圖標可能無法正常顯示。要使用插件，請確保找到適合您的 WordPress 版本的插件。
在 WordPress 中，可以使用內置菜單系統或使用第三方插件將圖標添加到菜單中。這是最簡單的選項，但它可能有也可能沒有您想要的圖標，或者它可能無法正確顯示圖標。

如何在 WordPress 中添加字體真棒圖標

將 Font Awesome 圖標添加到您的 WordPress 網站是輕而易舉的事。在插件的幫助下，您可以輕鬆地將 Font Awesome 圖標添加到您的 WordPress 菜單、側邊欄和內容中。在本文中，我們將逐步向您展示如何將 Font Awesome 圖標添加到 WordPress。
首先，您需要安裝並激活 Font Awesome for WordPress 插件。有關更多信息，請參閱我們關於如何安裝 WordPress 插件的指南。
激活插件後，您需要訪問 Font Awesome for WordPress 設置頁面來配置插件設置。
在設置頁面上，您需要選擇要在 WordPress 網站上加載的圖標集。默認情況下，插件會加載 Font Awesome 4.7.0 圖標。
接下來，您需要決定要在 WordPress 網站上顯示圖標的位置。您可以選擇在 WordPress 管理欄、內容中或在這兩個地方顯示圖標。
最後，您需要單擊“保存更改”按鈕來存儲您的設置。而已！您已成功將 Font Awesome 圖標添加到您的 WordPress 網站。

如何將 Font Awesome 圖標添加到您的 WordPress 網站？顧名思義，它們是圖標字體而不是圖像，這是圖標最吸引人的方面。首先，我將向您展示如何使用手動方法或插件將它們添加到您的站點。（無論您選擇哪種方法，我都會向您展示如何應用和操作樣式和編輯。）向您的 WordPress 網站添加 Font Awesome 支持應該以與添加子主題相同的方式完成：使用 enqueue 和 WordPress兒童主題。通過轉到 Font Awesome 圖標搜索，您可以找到、配置和插入您自己的 Font Awesome 圖標。您唯一需要做的就是將圖標放在 WordPress 編輯器的文本選項卡中。

第一步是將 Font Awesome 添加到您的 WordPress 網站。在第 2 步中，您將使用插件插入 Font Awesome 圖標。第三步是為您的圖標設置動畫以使它們更大。第四步是使用來自 Font Awesome 網站的簡碼或嵌入代碼來更改大小和方向。您可以通過兩種不同的方式使用 Font Awesome 將旋轉應用於圖標。最好將這些動畫與圓形圖標配對。如果與其他形狀奇特的圖標一起使用，可能會使效果看起來很奇怪。

更改字體應隨時進行。這是一種很棒的圖標顏色，但沒有任何內置修飾符。為此，將需要一些自定義 CSS。

如何將圖標添加到您的 WordPress 菜單

可在 WordPress 經典編輯器中使用的圖標選擇器允許您向 WordPress 網站添加圖標。字體可以在谷歌中找到。使用圖標選擇器搜索工具，您可以找到包含圖標名稱、類別或關鍵字的精美圖標。如果您想要 WordPress 菜單圖標，請選擇您已經創建的菜單項。以下是如何找到您的圖標。您選擇的鏈接將帶您到該網站。單擊該按鈕後，您將進入可以將符號添加到特定菜單項的部分。如果您使用的是 Gutenberg 編輯器，則可以從擴展格式欄中訪問Font Awesome Icon 菜單選項。

在沒有插件的情況下向 WordPress 添加 Font Awesome

在沒有插件的情況下向 WordPress 添加 Font Awesome 是一件輕而易舉的事。您需要做的就是在您的functions.php 文件中添加幾行代碼。首先，您需要將 Font Awesome 樣式表排入隊列。您可以通過將以下代碼添加到您的 functions.php 文件中來做到這一點： function enqueue_font_awesome(){ wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-真棒.css'）； } add_action('wp_enqueue_scripts', 'enqueue_font_awesome'); 接下來，您需要將 Font Awesome 類添加到您的菜單中。您可以通過將以下代碼添加到您的 functions.php 文件中來做到這一點： function font_awesome_menu_icons(){ $args = array( 'menu_class' => 'font-awesome-icons', 'container' => false, 'depth' = > 1); wp_nav_menu($args); } add_action('init', 'font_awesome_menu_icons'); 就是這樣！你已經成功地將 Font Awesome 添加到沒有插件的 WordPress 中。

您可以使用 WordPress 圖標生成器 Font Awesome 向 WordPress 添加圖標，而無需學習如何編程或設計。由於使用了響應式和完全可定制的圖標，一些圖標已被圖像或精靈表所取代。它有超過 80,000 個活動安裝，並且與 WordPress 版本 6 完全兼容。可以像控制任何其他日常圖標一樣控製字體圖標。可以更改顏色、對齊方式、高度、樣式等。幾乎每個瀏覽器都支持使用字體圖標。因為我們在網絡上有數以千計的字體圖標可用，所以無法將圖片合併到我們的網站中。

大多數設計師已經用 Font Awesome 圖標取代了傳統圖像。可以通過多種方式修改圖標，但最簡單的修改是最直接的。可以通過多種方式更改小圖標，例如其大小、旋轉和顏色。將以下代碼複製並粘貼到您的 WordPress 編輯器中以完成該過程。 Elementor 中的 Font Awesome 是什麼？安裝和編輯主題的核心文件很簡單。 Elementor 的高級版本已經可以訪問 Font Awesome 的圖標。使用 Better Font Awesome 插件，您可以使用由 Font Awesome Icons 和 Font Awesome Shortcodes 框架創建的簡碼。

如何在 WordPress 中添加圖標

在 WordPress 中添加圖標很容易。您可以使用圖標字體或上傳自定義圖標。
要使用圖標字體，只需在 FontAwesome 等網站上找到您要使用的圖標，然後復制它們提供的代碼。接下來，轉到您的 WordPress 儀表板並導航到外觀 > 菜單頁面。在此頁面上，您將看到菜單列表。找到要添加圖標的菜單，然後單擊“編輯”按鈕。
在“編輯菜單項”窗口中，向下滾動到“導航標籤”字段。將圖標的代碼粘貼到此字段中，然後單擊“保存菜單項”按鈕。
要上傳自定義圖標，首先創建或找到您要使用的圖標。確保圖標為 PNG 格式並具有透明背景。然後，轉到您的 WordPress 儀表板並導航到外觀 > 菜單頁面。單擊“上傳圖標”按鈕，然後選擇要使用的圖標。上傳圖標後，單擊“保存菜單項”按鈕。

使用新的圖標選擇器、簡碼或 HTML 片段將圖標添加到您的頁面和帖子。當您輸入 Gutenberg 文本塊時，可以在擴展格式欄中找到 Font Awesome Icon 菜單選項。所有 Pro 圖標都可以通過圖標選擇器以及上傳的圖標來查看。它搜索所有 Pro 圖標，以及系列和样式中的圖標。選擇圖標後，您會注意到短代碼已添加到內容中。在 HTML 之上創建偽元素時，可以在 HTML 中的內容之前或之後添加或刪除圖標。也可以使用它們在短代碼或 HTML 中的名稱來添加圖標。因為 Kit 是一個比較昂貴的選項，所以我們在使用 CDN 時擁有的選項與使用它時的選項是不一樣的。在禁用它們之前，請確保您的網站缺少圖標。

如何將圖像添加到我的 WordPress 圖標？

添加站點圖標通過單擊它，您可以選擇一個站點圖標。通過單擊它，您將能夠訪問您的媒體庫。選擇現有圖像或上傳新圖像。

排隊字體真棒WordPress

在 WordPress 中排隊 Font Awesome 是一件輕而易舉的事。您可以通過在 functions.php 文件中添加幾行代碼或使用 Better Font Awesome 之類的插件來實現。

字體圖標允許我們創建完全響應的、可自定義的圖標，而無需額外的圖像或精靈表。 字體圖標本質上是各種意義上的圖標，聽起來就是這樣。將 Font Awesome 與 WordPress 集成非常簡單；您需要做的就是遵循簡單的步驟。本教程將使用圖標字體 Font Awesome 及其樣式表。您可以從 Web 服務器或 CDN 獲取 Font Awesome；這些選項中的任何一個都允許您在服務器上加載文件。添加圖標時，您需要使用:before 或:after 偽 CSS 選擇器對其進行樣式設置。通過將 Font Awesome 類分配給一個元素，您可以輕鬆地使用它。

當您以這種方式使用字體圖標時，它將在目標元素之前/之後生成一個偽元素，以生成字體圖標的樣式。一旦您的項目具有其基本 fa 類，您可以添加與您要顯示的圖標相對應的類名稱。例如，如果您想顯示相機圖標，您可以包含復古類。如下所示，您可以通過單擊輕鬆導航到垂直菜單。您還可以以使它們看起來不同的方式排列圖標。