WordPress菜單圖標CSS怎麼添加？安裝WP導航圖標字體插件

WordPress菜單圖標CSS怎麼添加？

安裝WP導航圖標字體插件

新媒體人做SEO就是在給網站優化和提升用戶體驗。

你可以在WordPress網站上，添加圖標字體，非常美觀，支持響應式設計的WP主題模板。

圖標字體和小圖像格式的圖標不同：

• 支持視網膜顯示.
• 可以無限放大。
• 將導航菜單上的項目分別個性化為Icon字體。

具體效果圖，可查看陳溈亮博客的導航菜單。

如何使用圖標字體？

第1步：安裝插件

• WP後台→ 插件→ 安裝插件→ 搜索“Font Awesome 4 Menus”，下載並安裝並啟用；
• 你也可以直接在網站上下載，然後上傳後通過FTP上傳或安裝。

第2步：尋找圖標字體

打開圖標字體官方網站，找到我們需要的圖標▼

• 你可以在單擊圖標時顯示的 <i class =“fa fa-home”> </ i>複製fa fa-home。
• 如果主頁圖標名稱為home，那麼我們需要在“菜單CSS類” 中輸入 fas fa-home

第3步：菜單輸入CSS類字體圖標

• WP後台 → 外觀→ 菜單，進入菜單設置頁面。
• 選擇並編輯一個菜單項，
• 在CSS類中，粘貼我們剛剛複制的圖標字體名稱（fa fa-home） ▼

• （其他圖標的操作是相同的）
• 最後點擊保存可以。

注意事項

如果在編輯菜單項面板中沒有CSS類，則可以打開右上角的“顯示選項”，並在顯示菜單的高級屬性中，選中“CSS類” ▼

• 當然，這個圖標字體庫不限於在導航菜單中使用，只要將相應的圖標代碼添加到主題模板的相應位置即可。