为WordPress主题导航菜单添加个性图标字体

</div

目前图标字体非常流行,图标字体使用简单,与图片格式的小图标相比,支持视网膜显示,可以无限放大。特别是一些响应式设计的主题模板,都会或多或少使用图标字体,包括我模仿而成的MFBegin主题,除了主题集成的图标字体,我们还可以单独为导航菜单上的项目也配上个性化的图标字体。

具体方法:

一、WP后台–插件–安装插件页面搜索:FontAwesome4Menus,下载安装并启用,也可以直接在本站下载,然后上传安装或解压后通过FTP上传。

 下载地址

二、打开图标字体官网,找到我们所需要的图标,然后记录下来,如首页图标的名称是home,那么我们就需要在菜单CSS类中输入fafa-home就可以了,其他图标也是同样的办法(也可以直接点击该图标后在出现的页面中的<i></i>复制fafa-home)。

图标官网
</div

三、WP后台—外观—菜单,进入菜单设置页面,选择并编辑一个菜单项,在CSS类中输入我们刚才记录下来的图标字体名称(如首页就输入fafa-home),保存即可。

PS:如果在编辑菜单项目面板中无CSS类,可以打开右上角的“显示选项”,在显示菜单高级属性中勾选“CSS类”。

注:WordPress4.2+版本有BUG,无法打开右上角的“显示选项”,可参阅《亲测WordPress升级4.2遇到的问题及解决办法》提供的方法解决。

当然这个图标字体库并不只局限于使用在导航菜单上,只要把相应的图标代码加到主题模板的相应位置,也同样可以显示。

文中技术来源:知更鸟

你可能感兴趣的文章
  • HTTPS站点使用zbpNana主题如何解决小绿锁问题?
  • WordPress新手入门教程之插件使用篇
  • 实例讲解WordPress自定义栏目及自定义字段
  • Three/Unite主题如何添加(使用)下载按钮?
  • WordPress新手入门教程之上传安装篇
  • Three主题评论按钮修改为滑动/拉链解锁后自动提交评论的方法
  • 纯代码给WordPress侧边栏小工具添加幻灯片功能
  • Nana主题和Blogs主题的下载按钮使用示例教程

相关推荐

发表回复

房先生
我们将24小时内回复。
2024-09-19 01:21:38
您好,有任何疑问请与我们联系!
您的工单我们已经收到,我们将会尽快跟您联系!
[加我微信]
chaoneo
注:点击复制微信号并打开微信APP,添加好友后进行聊天。
[电话联系]
13585372227
[电子邮件]
chaoneo@163.com
取消

选择聊天工具: