WordPress菜单美化进阶：手把手教你插入Font Awesome 4.7图标教程

想要让你的WordPress网站导航菜单更具视觉吸引力，提升用户体验？在菜单项旁边添加小巧精致的图标无疑是一个绝佳的选择。Font Awesome作为一套广受欢迎的图标字体库，凭借其丰富的图标种类和易用性，成为WordPress菜单美化的常用利器。主题铺今天就为大家带来一篇详细教程，教你如何在WordPress菜单中巧妙地插入Font Awesome 4.7图标。

为什么选择Font Awesome 4.7？

虽然Font Awesome已经更新到更新的版本（如Font Awesome 5或6），但Font Awesome 4.7仍然在许多旧主题和插件中广泛使用，并且其CDN链接易于集成。它提供了一套稳定且丰富的图标，足以满足大多数菜单美化需求。

实现原理

Font Awesome图标本质上是一种字体，通过CSS来控制其显示。每个图标都有一个对应的CSS类（例如 fa fa-home 代表一个“家”的图标）。我们将通过WordPress菜单的“CSS类”选项，将这些图标的CSS类添加到菜单项中，从而让图标在菜单旁边显示。

教程开始：详细操作步骤

第一步：在WordPress网站中引入Font Awesome 4.7库

在WordPress菜单中使用Font Awesome图标的前提是，你的网站必须能够加载Font Awesome的CSS文件。如果你的主题或某个插件已经引入了Font Awesome，你可以跳过这一步。如果不确定，或者想确保使用特定版本（例如4.7），可以手动引入。

方法A：通过CDN引入 (推荐，简单快捷)

这是最简单直接的方法。我们将通过CDN（内容分发网络）加载Font Awesome 4.7的CSS文件。

登录WordPress后台：进入你的WordPress网站后台。

编辑主题的 functions.php 文件：

• 在左侧菜单导航到 “外观” > “主题文件编辑器” (或“主题编辑器”)。在右侧文件列表中，找到并点击 functions.php 文件。将以下代码粘贴到 functions.php 文件的末尾（在 ?> 之前，如果存在的话）。

<?php
// 在WordPress中加载Font Awesome 4.7
function theme_enqueue_fontawesome_47() {
    wp_enqueue_style( 'font-awesome', '//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), '4.7.0' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_fontawesome_47' );
?>

主题铺说明： 这里我们使用了国内的CDN（bootcss），速度可能会更快。如果你更倾向于官方CDN，可以将URL替换为 //maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css，但是有可能加载会很慢。

更新文件：点击“更新文件”或“保存更改”按钮。

方法B：通过插件引入 (适合不熟悉代码的用户)

如果你不想修改代码，可以使用一些插件来引入Font Awesome。在WordPress插件市场搜索“Font Awesome”即可找到相关插件。安装并激活后，插件通常会自动处理Font Awesome的加载。

主题铺建议： 无论哪种方法，引入后请访问你的网站前台，右键查看页面源代码，搜索 font-awesome.min.css，确认是否已成功加载。

第二步：启用WordPress菜单的CSS类选项

WordPress菜单默认不会显示“CSS类”输入框，我们需要手动开启它。

1. 进入菜单编辑页面：在WordPress后台，导航到 “外观” > “菜单”。
2. 打开屏幕选项：在菜单页面的右上角，找到并点击 “屏幕选项”。
3. 勾选CSS类：在弹出的“屏幕选项”面板中，找到“显示高级菜单属性”下方的 “CSS类” 选项，并将其勾选。

勾选后，你会发现每个菜单项的下方多了一个“CSS类”的输入框。

第三步：查找并插入Font Awesome 4.7图标的CSS类

现在，我们可以开始为菜单项添加图标了。

1. 访问Font Awesome 4.7图标库：
   打开浏览器，访问Font Awesome 4.7的官方图标列表页面。你可以搜索 Font Awesome 4.7 icons 找到它，通常是 https://fontawesome.com/v4.7.0/icons/。
2. 选择你喜欢的图标：浏览图标列表，找到你想要使用的图标。例如，如果你想为“首页”菜单项添加一个家的图标。
   • 点击你选择的图标（例如“home”图标）。
   • 在图标详情页面，你会看到一个示例代码，其中包含了图标的CSS类，例如：
     <i class="fa fa-home" aria-hidden="true"></i>
   • 我们需要的就是 fa fa-home 这个CSS类。
3. 将CSS类添加到菜单项：
   • 回到WordPress后台的 “外观” > “菜单” 页面。
   • 找到你想要添加图标的菜单项（例如“首页”）。
   • 点击该菜单项右侧的向下箭头，展开其设置选项。
   • 在新增的 “CSS类” 输入框中，输入你刚刚复制的图标CSS类，例如 fa fa-home。
   主题铺提醒： 如果你想在图标和文字之间添加空格，可以在菜单项的“导航标签”中手动添加一个空格，或者通过CSS来控制。
4. 重复操作：对其他需要添加图标的菜单项重复步骤3。例如：
   • 新闻：fa fa-newspaper-o
   • 联系我们：fa fa-envelope-o
   • 关于我们：fa fa-info-circle
   • 购物车：fa fa-shopping-cart
5. 保存菜单：完成所有图标添加后，务必点击右下角的 “保存菜单” 按钮。

比如主题铺在菜单那里添加联系我们的图标，如下

效果如下：

第四步：查看效果并进行CSS微调 (可选)

现在，访问你的网站前台，刷新页面，你应该就能看到菜单项旁边显示出漂亮的Font Awesome图标了！

CSS微调 (可选)

有时，图标可能与菜单文字靠得太近，或者大小不合适。你可以通过添加一些自定义CSS来进一步美化。

进入自定义CSS编辑器：在WordPress后台，导航到 “外观” > “自定义”，然后点击 “额外CSS” (或“附加CSS”)。

添加自定义CSS代码：
以下是一些常用的CSS微调示例，你可以根据需要调整其中的数值：

/* 调整菜单图标与文字的间距 */
.menu-item .fa {
    margin-right: 5px; /* 图标右侧留出5像素的间距 */
    vertical-align: middle; /* 垂直居中对齐 */
}

/* 调整菜单图标的大小 */
/* 注意：这会影响所有菜单中的图标 */
.menu-item .fa {
    font-size: 16px; /* 调整图标大小 */
}

/* 针对特定菜单项的图标进行调整（例如，只调整id为menu-item-XX的图标） */
/* 你可以在浏览器开发者工具中查看菜单项的id */
#menu-item-123 .fa {
    color: #ff0000; /* 改变特定图标的颜色 */
    font-size: 18px;
}

发布更改：添加完CSS代码后，点击“发布”按钮保存更改。

最后总结

通过以上四个简单的步骤，你就可以为你的WordPress导航菜单添加Font Awesome 4.7图标了。主题铺认为，这种视觉上的增强不仅能让你的网站看起来更专业，也能帮助用户更快地识别和理解菜单项的功能，从而提升整体的用户体验。无论是个人博客还是企业网站，这些小小的图标都能带来大大的不同！