WordPress导航菜单图标字体插件font awesome 4 menus纯代码版

现在新样式的主题,菜单名称旁都住着一个小图标,显得大气,美观,给我们的博客带来很大的美化效果,与之配套的是 font awesome 4 menus 这个图标字体插件,其实还是挺小巧的,不过本人认为能集成的尽量不用插件的好,其实是心里作用

qq%e6%88%aa%e5%9b%be20161007223236

下面讲述一下集成的方法:

上传文件

点击下载 访问密码 6452

下载并解压后得到 awesome 文件夹,整体上传到WordPress主题目录。

主题集成

编辑WordPress当前主题目录下functions.php文件,在<?php  之后添加如下代码:

//集成图标字体功能
include("awesome/main.php");

保存!

图标使用

理论上,图标字体可以用在网站的任意位置,只需要用 i 标签加class来添加即可。

比如我要加入微信图标,我只要在需要显示的位置添加如下标签即可:

<i class="fa fa-weixin"></i>

而我们想要更多的图标,就需要到官方的图标库里面去查找了:

http://fortawesome.github.io/Font-Awesome/icons/

找到自己中意的图标后,点击打开即可得到相应的标签class了!

那如何使用到 WordPress 导航菜单呢?

很简单,依次打开 WordPress 后台==>外观==>菜单,然后点开已有菜单,将得到的class填入到CSS类即可!

保存之后,WordPress 导航菜单上的【首页】前面就会出现一个“家”的图标了。

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

很明显,你没把这个功能开出来。点击菜单页面右上方的【显示选项】,勾上CSS类即可:

赞(0)
分享到: 更多 (0)
广告位招租了啦!!!快来联系
此处应有广告

评论 抢沙发

评论前必须登录!

 



很高兴本文可以为您带来灵感和帮助!

支付宝扫一扫打赏

微信扫一扫打赏

QQ扫一扫打赏