WordPress怎么给导航菜单添加个性小图标

你是否还在为别人导航模板上有小图标而发愁?为什么别人的导航看起来比自己的要美腻?这个问题前段时间一直困扰着小邓,在看到别人网站模板好看展现的内容又丰富,我也想着给网站换个模板,思来想去还是这款知更鸟2.0适合我,这款模板功能异常强大。但模板代码层层嵌套,让我一时有些适应不了。说实话,给导航菜单添加个性小图标这个问题让我发愁的应该有一个多月,自己又不甘心,心里想着一定要把这个小遗憾补足。

 

WordPress如何给导航菜单添加个性小图标

 

话不多说,下面小邓来说说WordPress如何给导航菜单添加个性小图标

 

步骤一:WP后台--插件--安装插件页面搜索:Font Awesome 4 Menus,下载安装并启用。

 

Font Awesome 4 Menus插件下载

 

步骤二:到这里找到你需要的图标 http://fontawesome.io/icons/,比如我们要这个home图标(如下图)

 

home图标

 

步骤三:找到合适的图标,点击图标后进入新页面会看到类似如下的标签<i class="fa fa-home"></i>,图中的i标签比较长,我们只需要提取出我们需要的部分。

 

<i class="fa fa-home"></i>展示

 

步骤四:WP后台---外观---菜单,进入菜单设置页面,选择并编辑一个菜单项,也可以直接在仪表盘中自定义您的站点。

 

由于模板的不同,后台菜单位置添加方式不同, 小邓具体列出了两种情况如下:

 

情况一:菜单栏中没有CSS栏

 

菜单栏中没有CSS栏情况

 

情况二:菜单栏中有CSS栏

 

菜单栏中有CSS栏

 

设置完后,请前往前端查看是否设置成功。如若失败了,请查看后台是否开启了缓存。

 

厦门SEO总结:

 

由于WP很多模板的导航都是封装调用,导致在代码中无法准确的找到导航修改位置。WP的好处在于插件特别多,使用插件能节省不少时间并且有效的解决问题。其次,网站的美观度是影响跳出率的致命因素,作为用户进入网站映入眼帘的导航栏,一个具有观赏价值的导航能够让用户觉得网站做的很用心,设置导航时要与网站背景色相匹配。

福建SEO

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  0   博主  1

  1. 福建SEO 福建SEO

    Font Awesome 4 Menus插件是整站使用个性小图标的前提,想启动小图标CSS属性,必须安装此插件。 :cool: