17713433920 info@mac163.com
如何将图标添加到WordPress菜单
如何将图标添加到WordPress菜单

WordPress 3.0+的“不再是新的”自定义菜单功能不仅非常有用,而且功能非常强大。我已经写了一些有关编辑和自定义菜单的文章(例如如何突出显示当前页面链接),今天我将向您展示如何向主题添加特殊类,以便您可以轻松地在导航链接旁边显示自定义图标。

在WordPress主页链接旁边添加主页图标

为了更好地说明如何添加图标,我将带您逐步完成在首页链接旁边添加首页类型图标的步骤。

步骤1:下载超酷的首页图标

为了进行此预览,我刚刚从Finicons.com上下载了一个简单的主页图标– 链接

步骤2:在WordPress选单中启用类别

默认情况下,WordPress菜单在菜单构建器中不显示“类”属性,因此请单击“屏幕选项”并确保已选中。

在WordPress选单中启用类别
在WordPress选单中启用类别

步骤3:将样式添加到首页链接

现在,您可以浏览或创建主页链接,并向其添加一个新类。我添加了一个名为“ home-link-icon”的类。

将样式添加到首页链接
将样式添加到首页链接

步骤4:为主菜单图标添加CSS

现在剩下的唯一事情就是将CSS添加到样式表中,以显示刚刚创建的类的图标。注意:确保将在步骤1中下载的图标添加到主题的图像文件夹中。

CSS样本

.home-link-icon a{
   padding-left: 30px !important;
   background-image: url(images/home.png);
   background-position: left;
   background-repeat: no-repeat;
}

样本图片

在下面,您可以在我的免费WordPress主题部分免费查看我当前正在致力于释放的CSS 主题。它的位置并不理想,图标也不匹配,但是为了学习本教程,您可以看到它应该如何工作。

home-link-icon
home-link-icon

微信二维码

微信扫描二维码联系我们!
我们在微信上24小时期待你的声音
提供外贸路由器设备产品,轻松翻墙,解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建等!


需要提供WordPress主题/插件的汉化服务可以随时联系我们!另外成品WordPress网站以及半成品WordPress网站建设,海外Google SEO优化托管服务,百度SEO优化托管服务,Centos/Debian服务器WP专用环境搭建,WP缓存服务器搭建,我们都是你的首选,拥有多年WP开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
购物车
回到顶部