WP导航菜单设置教程-WP教程

教程

  1. 进入WordPress后台-外观-菜单

在这里你可以新建菜单-并分别设置移动端和PC端的菜单

主题提供PC端菜单和移动端菜单独立设置功能(也可以只设置一个),你可以按需进行设置!为了达到更好的效果,设置菜单有一下几点请注意:

  1. PC端菜单的一级菜单不要太多,太多会导致换行显示错位
  2. 移动端菜单最多只支持二级菜单,如果添加了三级菜单则不会显示
  3. PC端菜单支持多级显示,但建议不要超过二级

简单单色

菜单使用图标

主题自带了Font Awesome 4.7 图标,你可以在菜单插入任意的 Font Awesome 4.7 图标而无需安装任何插件

第一步:找到你想要插入的图标代码,并复制

你可以使用http://www.fontawesome.com.cn/faicons/找到全部的图标代码,选择一个图标并复制图标代码:

第二步:粘贴在菜单名称内

搞定,保存看看效果吧

使用阿里巴巴Iconfont图标

一、新建Iconfont项目

接下来我们就一步一步的教大家如何在使用阿里巴巴Iconfont图标

Iconfont 支持GitHub帐号登录,登录之后你就可以寻找自己需要的图标啦

首先呢,寻找自己的需要的图标,通通点进购物车!

再把购物车的图标加入到项目,如果还未创建项目,那就新建一个就是了

二、网站集成

使用 Iconfont图标 图标官方也有详细的教程,同时官网提供三种集成方式:Unicode、class、Symbol。这三种集成方式各有优劣势,具体请查看官方教程

这里我推荐使用 Symbol 的方式集成到网站中,当然你也按照官方的教程使用其它方式集成

第一步:将刚刚新建的项目生成 Symbol 接入链接,并复制

图片[1]-WordPress导航菜单设置教程-WP教程

第二步:将代码保存到主题设置

将以下代码中的链接替换为您刚刚复制的链接,然后 进入 主题设置-自定义代码-自定义底部代码 ,粘贴后保存主题设置

<script src="//at.alicdn.com/t/font_1706672_oa811wlg9gl.js"></script>
图片[2]-WordPress导航菜单设置教程-WP教程

简单吧!网站集成 Iconfont图标 就已经全部搞定了!接下来就是使用 Iconfont图标 了!

提醒:请勿直接将代码写入到主题源码,已更新就没了。

三、使用 Iconfont图标

在已经添加到你项目中查找图标并复制图标代码,然后按照下面的格式替换href="#iconxxx"中的图标代码,将代码插入到你需要显示图标的地方!

<svg class="icon" aria-hidden="true"><use xlink:href="#iconxxx"></use></svg>

还是按照在导航菜单中添加图标为例:

最后我们看看效果吧!

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情快捷回复

    暂无评论内容