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

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

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

一、导航菜单添加图标

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;}}

3、大功告成,快刷新页面看看哦。

实用教程

#引流# 纯代码实现WordPress文章设置隐藏内容必须关注公众号可见

2020-1-12 14:05:07

实用教程

微信好友辅助注册需要满足四个条件

2020-1-13 17:04:26

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
有新私信 私信列表
搜索