EaseMobile 主题导航菜单设置小图标的方法(图文+视频教程)

EaseMobile 主题的左侧的Off Canvas 侧边栏导航中是可以为每个菜单项设置小图标的。本文通过图文+视频教程为购买EaseMobile 主题的客户告知导航菜单设置小图标的方法。当然,如果你还没有使用EaseMobile 主题的,欢迎了解并购买!

Off Canvas 侧边栏导航与WordPress 菜单的对应

EaseMobile 主题的Off Canvas 侧边栏导航在后台中是通过WordPress 的“菜单”项设置的,如下图,这个是前台与“菜单”中的一一对应关系:

小图标的设置·打开“图像描述”

在实际使用中,当你设置好菜单项后,接下来就要为每个菜单项设置独一无二的小图标了(有了小图标的陪衬,侧边栏才好看嘛)。添加小图标是通过菜单项中的“图像描述”来的。因此,首先你要打开“图像描述”。

位置:仪表盘-外观-菜单

打开右上角的“显示选项”,勾选“图像描述”即可。有些可能已经打开了的,那就直接进入下一步。

小图标的设置·在“图像描述”中设置图标(icon)

位置:仪表盘-外观-菜单-编辑菜单

比如说我要为“首页”这个菜单项设置一个icon,那么展开“首页”这个菜单项后,在“图像描述”中填上icon的 代码称号 icon-home,那么在前台就可以为该菜单项显示一个小图标( 如这个icon-home)。

类似,其他的菜单项(如图中“朋友圈、朋友相册、更多应用、设置”)也是按照这样的输入图标对应的 代码称号 即可。

Q:我如何知道 代码称号?或者说我有哪些可用小图标?知道有哪些小图标以及对应的代码称号我才能自己设置啊?! A:同学你不错,能想到这点。别急,接下来就是要说到这点了。 代码称号 这个词其实是我捏造的,整个操作背后涉及的原理是代码层面的东西,我尽量是用通俗易懂的语言来教你怎么用。所以,接下来尽量不要带着“为什么”去看,而是“怎么做”。

小图标的设置·图标(icon)的来源

本主题中的小图标全部来自国外的一个icon-font的网站:http://fontello.com/。你打开就会看到遍布的一个个小图标,非常多(建议你用高级点的浏览器如chrome 打开这个网站,不然会很卡)。

主题中默认使用已经使用了一些小图标,你可以打开主题目录下的 fontello-demo.html 文件,这些默认使用的图标肯定是不能动的——因为是构成主题一些页面元素必备的(比如说搜索的图标,侧边栏激发的那个按钮)。

接下来你要做的就是在这个原来的基础上,添加你需要的图标,按需使用。

上传json 文件、4个svg 文件到fontello

下载该文件包,解压缩后,里面有4个 svg 格式的文件以及一个config.json 文件。

一、首先你用浏览器进入到 http://fontello.com/,等网站加载完毕。

二、拖拽上传这5 个文件(4个 svg 格式的文件以及一个config.json 文件)到首页。

如果你浏览器渣,拖拽是不行的,要自己上传——这个我不教你了,要么换浏览器,要么自己想办法上传。

挑选自己喜欢的图标

接下来就好好在这些“海量”的图标里面挑选你自己喜欢的图标吧,挑到需要的点击这个图标一下就可以选中了,注意同时右侧“donwload webfont” 的数字会增加。

删除的话再次点击选中的图标即可删除。

按需使用图标,不要看到想要就都选中,不然文件体积会很大影响加载速度。

下载图标文件

一、当你选中完想要的图标了,点击右侧“donwload webfont” 浏览器就会下载图标文件,下载的文件是一个类似 fontello-xxxx.zip 的压缩文件。

二、一面打开主题目录下的fontello文件夹,一面打开fontello-xxxx.zip 文件的下一级目录(见图),然后解压这些文件覆盖到主题目录下的fontello文件夹下,覆盖源文件。

查看代码称号并调用

经过上面的步骤,接下来,你打开主题目录下的 fontello 文件夹的demo.html 文件就可以看到你选取的图标以及默认图标了,图标右侧的单词就是代码称号 了,复制,然后输入到菜单的“图像描述”就可以了。

Q:为什么你不将 http://fontello.com/ 上所有的图标都下载集合起来,然后我选择我喜欢的,直接填入代码称号就可以了,大家都方便。 A:这当然可以,我也想这样。但——如果这样,你的网站该多么臃肿,http://fontello.com/ 上千个图标,而你仅仅要使用其中几个图标,为了方便你觉得是全部下载回来还更好??! 按需使用才是王道,大哥。当然,你想这么做我不会阻挠你的。

视频教程

如果你看完本文还不懂怎么操作,这里还有个视频教程,请结合本文来使用。

下载地址:待上传。

致客户:导航菜单设置小图标的操作我不会帮你完成的——不然我会累死。当然,如果你喜欢,压根儿不用去为菜单添加小图标,反正又不是必须的,只不过加上了图标图好看。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

第207天:HTTP协议头字段详解大全

HTTP Header非常之多,很少有人能完全分清这些Header到底是干什么的。鉴于RFC文件规范艰深晦涩难懂,本文对协议规范中列出的HTTP Header进...

21030
来自专栏前端知识分享

第206天:http协议终极详解---看这一篇就够了

HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传...

82940
来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(二十):课程相关页面配置

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

35610
来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(九):初识后台管理

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

45430
来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(十八):机构详情页配置

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

17310
来自专栏前端知识分享

第211天:git和github的区别和使用详解

它是一个源代码管理工具,在一个项目中,凡是由开发人员编写的都算是源代码,源代码有必要管理起来,让源代码可以被追溯,主要记录每次变更了什么,谁主导这次变化。人为的...

20230
来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(十一):登录页面实现

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

72510
来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(八):数据库字段的定义(下)

努力与运动兼备~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

40020
来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(七):数据库字段的定义(上)

努力与运动兼备~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

45660
来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(四):简易留言簿基础开发

努力与运动兼备~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

50450

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励