百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

WordPress导航菜单添加个性图标错位的解决办法

zhezhongyun 2025-06-04 04:20 6 浏览

最近有博主反应根据《Nana主题升级到1.01 如何正确使用个性化图标》的步骤为导航菜单添加个性图标会出现错位现象，具体如下所示：

刚开始我还真不太相信，因为我在几个站点都安装过Nana主题，都能够正常为导航菜单添加个性化图标，后来在爱尚街博主的信任下，直接用他的站点来测试，没想到添加方法是正确的，可是前台确实显示导航菜单和个性图标错位。

最后经查看两者导航菜单的源码发现，导航菜单中的个性图标输出的源码竟然不太一样，具体如下：

后来爱尚街博主才说，他使用的主机是WIN主机，而不是我们常用的Linux主机。不知道这个个性图标错位是不是跟WIN主机有关。后来求助度娘之后，换一种方式添加个性化图标，完美解决这个导航菜单个性图标错位问题。现将两种常用的添加个性化图标的方法分享给大家，如果第一种方式添加会错位，请使用第二种方法添加。

特别说明：以下两种方法以Nana主题为例说明，如果其他未集成个性化图标功能的主题，请自行安装插件解决，具体可见《为WordPress主题导航菜单添加个性图标字体》。

第一种方法：适用于Linux主机

1、如我们需要为导航菜单中的“本站首页”添加一个home的个性图标，那么就在官网上找到那个home图标，点击它后即可看到这个图标的class了，如下图所示的“fa fa-home”。

2、登录 WordPress 后台》外观》菜单，然后点击“本站首页”，在它的CSS类中输入刚才获得的那个class，如下图所示：

3、保存好菜单后，我们就可以在首页看到我们的导航菜单“本站首页”前面已经有一个home图标了，具体见本站导航菜单。

第二种方法：适用于WIN主机

1、同第一种方法的步骤1一样，如我们需要为导航菜单中的“本站首页”添加一个home的个性图标，那么就在官网上找到那个home图标，点击它后即可看到这个图标的class了，如下图所示的“fa fa-home”。

2、登录 WordPress 后台》外观》菜单，然后点击“本站首页”，在它的导航标签中的“本站首页”前面输入：

  1. <i class="fa fa-home"></i>

具体如下图所示：

3、保存好菜单后，我们就可以在首页看到我们的导航菜单“本站首页”前面已经有一个home图标了，而且也不会再出现错位了。

如果发现点开菜单没有 CSS 类栏位怎么办？

这是因为WordPress默认是不打开这个功能的，我们只需要点击菜单页面右上方的【显示选项】，勾上CSS类即可：

本文地址：
http://yigujin.wang/832.html

相关推荐

Angular UI组件库入门指南 - 如何安装和开始使用(一)

本文主要介绍如何安装和开始使用KendoUIforAngular。首先完成安装步骤。然后创建一个简单的应用程序，其中包含一些KendoUIforAngular组件，应用程序源代码可供您参考...

SPSS22: 3.1.3 数据管理—复制数据属性

内容摘自《SPSS常用统计分析教程(SPSS22.0中英文版)(第4版)》3.1.3复制数据属性复制数据属性（CopyDataProperties）可用于建立相同调查问卷的空白数据集，或者复制其...

妙用Excel制作漂亮工整的工资条（excel表格中如何制作工资条）

工资条的制作方法并不难，但如何用Excel把工资条做得更美观、更有效率，可就要花费一点小心思了。许多人或许已经习惯了用工资明细表做员工工资统计并向上级汇报，将表中的条目慢慢复制粘贴然后打印给员工，这样...

如何运用EXCEL制作员工工资条，你造吗?

每个月工资发放之后，正规的公司应发给每个员工一个工资条。上面有员工当月工资的详细构成。但不能将工资明细表剪条发放，因为每个数字缺少对应项目，这就需要重新制作一张专门用来打印的工资条。作为劳动者，应该妥...

鸿蒙仓颉语言开发实战教程:实现商品分类页

今天继续为大家带来仓颉语言开发商城应用的实战教程，今天的内容是实现商品分类页。分类页面要在基本布局的基础上增加一些动态效果，比如点击状态的切换和两个列表容器的联动。下面为大家详细介绍。分类列表先来看左...

鸿蒙开发实战:一多开发之缩放布局

在HarmonyOS中，使用ArkTS语法进行自适应布局时，缩放布局是一种重要的布局方式。它允许组件根据外部容器的尺寸变化，按照预设的比例或权重调整自身的大小，从而确保在不同设备上都能呈现出良好的视觉...

基于WPF的电能质量检测系统上位机软件设计

郑恒持，蒋丁宇，卢兴泉，刘泊江（大连海事大学轮机工程学院，辽宁大连116026）摘要：电能质量直接影响着电力系统能否安全运行，为了能及时可靠地检测电能质量，采用全新的WindowsPresen...

HarmonyOS实战:Tab顶部滑动悬停功能实现

前言日常开发过程中，遇到这种Scroll嵌套List列表滑动顶部悬停的场景十分常见，在鸿蒙开发时也正好实现了这个功能，本篇文章将带你一步步实现Tab顶部悬停的效果，建议点赞收藏！实现效果先...

Axure教程:高级搜索（axure搜索功能怎么做）

在原型中，搜索是一个常见的交互设计。但不少同学因为技能不熟悉就没有做对应的交互效果。这篇文章，作者分享了设计搜索功能的整个流程，相信看完你也能做一个很牛逼的交互。高级搜索可以通过使用精确的关键词或短语...

Excel小技巧: 如何设置自动列宽适应内容

我们在整理Excel表格的时候，通常会碰到单元格列宽混乱的情况（如下图所示），这会导致数据显示不完整或浪费空间导致打印不全，每次手动调整列宽都会费时费力，下面教你三个方法，让你一键设置自动列宽，适应单...

用好6个公式 Excel随意查询（excel中查询功能怎么用公式）

Excel表格一般会储存大量数据，我们可能不是每次都需要使用其中的所有数据，大部分时候只用到其中的一部分，所以数据查询功能就变得非常重要。为此，Excel本身也提供了多少查询方法，供我们使用。首先我们...

夏日PC消暑指南:机箱风道与风扇选择

进入六月以后北京的天气真是热得让人感觉喘不过气，大家天天打交道的笔记本和台式机更是连人都不如了，所谓热成狗真是一点也不夸张。年年大家在防暑抗高温这个问题上都是八仙过海各显神通，但是很多人光顾着自己凉快...

Excel VBA必学技巧:用厘米设置单元格大小，办公效率翻倍

痛点：Excel默认单位太反人类！你是否经常遇到这些问题：-想设置精确的单元格尺寸，却只能用模糊的"字符宽度"和"磅值"？-设计打印报表时，毫米级的误差导致格式错乱...

CSS小知识，分享14个你可能还未用上但又实用的CSS属性(下)

大家好，在上一篇文章里CSS小知识，分享14个你可能还未用上但又实用的CSS属性（上）我们一起学习了上半部分，这篇文章我们我们继续学习下半部分。八、CSSShakeEffect晃动效果CSS...

总结雅虎前端性能优化技巧(16条)（雅虎引擎还能用吗）

前言在日常开发中，有很多场景需要我们去做好前端优化，为了防止遗忘，加深记忆，今天参阅了一些资料以及自己的一些总结，梳理出来15条优化技巧。1.合并文件css、js合并，减少http请求数，每次http...

一周热门
最近发表
标签列表