WordPress网站导航的个性化栏目图标设置使用教程

原创 明月SEO  2017-05-21 13:46  阅读 681 次

前两篇我们陆续讲解了:

WordPress网站文章页中添加幻灯片功能的使用教程(带演示)

WordPress网站侧边栏添加幻灯片功能教程(纯代码版)

让我们的网站前端看起来更美观,更专业,更具有表现力。

本篇将主要讲解:WordPress网站导航的个性化栏目图标设置使用。也可以让我们的网站更具有美观性和专业性。

主讲重点内容如下:

个性化图标设置添加方法要根据自己的网站主机不同,用对应的方法,否则会出现导航菜单个性图标设置添加错位问题。所以根据我们网站所用的主机的不同,添加的方法主要有两种。

下面明月SEO给出两种经过测试验证的正确的设置使用方法如下:

一.设置方法 (Linux主机)

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

更多的个性化图标,需要到官方的图标库里面去查找
官方图标库地址:http://fontawesome.io/icons/

图标字体在线制作:https://icomoon.io/app/

2、登录 【WordPress后台】然后依次点击【外观】》【菜单】,然后选择菜单“首页”,在它的CSS类中输入刚才获得的那个class,如下图所示:

代码添加位置图

3、点击保存好菜单

至此,设置已经完成,刷新网站首页,我们就可以在首页看到我们的导航菜单“首页”前面已经有一个home图标了。

由于明月SEO网站栏目已经位置占满,就没有在添加个性图标,在此也就不在演示。

二.设置方法(WIN主机)

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

2、登录 【WordPress后台】然后依次点击【外观】》【菜单】,然后选择菜单“首页”,在它的“导航标签”中的“首页”前面输入:  <i class="fa fa-home"></i> 具体如下图所示:

WIN主机设置图

3、点击保存好菜单

至此,设置已经完成,刷新网站首页,我们就可以在首页看到我们的导航菜单“首页”前面已经有一个home个性图标了。

注意点:

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

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

2.WordPress网站都可以直接添加吗?

以上方法只适用已经集成了图标功能的主题网站。如果是未集成个性化图标功能的主题,需要先集成此功能,自己二次开发,或者直接利用插件即可。

利用插件集成的具体方法:

【WP后台】—【插件】—【安装插件】页面搜索:Font Awesome 4 Menus,下载安装并启用,也可以直接在官网下载,然后上传安装或解压后通过FTP上传。

本文地址:http://www.brightmoonseo.com/build/932.html
关注我们:请关注一下我们的微信公众号:扫描二维码,公众号:明月网络营销
版权声明:本文为原创文章,版权归 明月SEO 所有,欢迎分享本文,转载请保留出处!
西安网站制作

发表评论


表情