WordPress导航菜单文字前添加图标

实用教程
20年1月13日
编辑

小莲姐姐官方认证

经常看到别人的WordPress网站导航菜单前面有图标，右上角有角标，高逼格的导航菜单让我十分羡慕。经过研究发现，现在的很多主题都支持了WordPress自定义菜单功能。不需要安装插件，只需要略微调整，就能实现想要的效果，今天object哥哥就来带大家一起为导航菜单添加图标和角标。本教程以WordPress中文版5.3.2–zh_CN为例。

一、导航菜单添加图标

1、进入WordPress后台，点击左侧导航菜单【外观】，再点击【菜单】，然后选择导航菜单，以【价格】菜单为例，点击向下的三角形箭头。

WordPress导航菜单文字前添加图标

注意：

如何添加导航菜单，相信您已经非常熟悉。这里的提示仅仅为小白用户准备：如上图中的页面，可以看到在左侧有一些项目，例如页面、分类目录、自定义链接等，只需要将左边的项目选中，然后点击添加到菜单，即可添加一个菜单链接，添加后会出现在右侧菜单结构里面，这个界面可以通过拖动改变顺序，也可以通过往右侧拖动实现二级菜单的设置，这样就可以建立好一个菜单了。
如果主题不支持WordPress原生菜单设置，请移步主题设置里面进行。

2、在导航菜单设置页面，您能看到【导航标签】一栏，“价格”的前面多了一行代码 <i class=”fa fa-tags”></i> ，没错，这行代码就是价格前面的小图标。

WordPress导航菜单文字前添加图标

3、如果想要添加其他图标，修改代码中的tags即可。大多数主题都使用的是Font Awesome的免费图标，我们可以在http://www.fontawesome.com.cn/faicons/ 中查找符合自己需求的图标，点击进入图标详情页即可复制图标名称，然后进行替换。

WordPress导航菜单文字前添加图标

二、导航菜单添加角标

1、仍然在导航菜单设置页面，以“价格”为例，点击向下的三角形箭头。可以看到【 CSS类（可选）】项下面填入了menu-jiage。这就是CSS标签的名称，可以根据自己的需要进行命名。

WordPress导航菜单文字前添加图标

注意：如果这里看不到【CSS类（可选）】，童鞋请不要惊慌，点后台右上角的显示内容，在CSS类前面打上√号即可出现。

2、在主题中的CSS文件中新增角标样式，以justnews主题为例，只需要在【主题设置】→【插入代码】页面，复制下面的代码粘贴到【自定义CSS】中，点【保存】即可。代码如下：

.menu-jiage:after {
   display: block;
   font-weight: 700;
   background-repeat: no-repeat;
   background-color: red;
   border-radius: 3px;
   color: #fff;
   content:"惊爆";
   font-family: Microsoft YaHei;
   font-size: 13px;
   line-height: 1;
   padding: 2px 3px;
   position: absolute;
   right: -10px;
   top: 7px;
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
}
@media (max-width: 767px) {.menu-jiage:after {display: none;}}