网站建设

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

Jager · 7月16日 · 2015年 · · 6742次已读

换成 Begin 主题之后,大伙都不约而同的给菜单用上了图标字体,确实给博客带来了一定的美化效果。

与之配套的是 font awesome 4 menus 这个图标字体插件,其实还是挺小巧的。

不过,在强迫症的眼里,能代码化就尽量不用插件吧!于是将这个插件改造成代码版,顺便精简了基本用不到的 shortcode 图标调用功能。

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

下面说一下集成到主题的方法:

一、下载上传

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

二、主题集成

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

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

最后保存即可。

三、图标使用

图标字体的使用,相信大部分 Begin 用户都已经熟知了。对于首次使用的用户,张戈博客还是继续介绍下好了!

先贴一下效果截图,了解一下图标字体是个什么东东:

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

其实,就是在需要的位置显示一个图标而已。而这一切由 CSS+fonts 来实现,即图标字体。

 

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

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

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

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

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

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

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

很简单,依次打开 WordPress 后台==>外观==>菜单,然后点开已有菜单,将得到的 class 填入到 CSS 类即可,比如我在官方图标库查到“家”图标的 class 是 fa fa-home,所以我如下填写:

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

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

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

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

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

如果发现点击【显示选项】没动静怎么办?

看来你的 WordPress 也是升级 4.2 了。解决办法见张戈博客之前的分享【修复 WordPress 4.2 问题

四、更多折腾

好了, 做完上面的操作后,就可以彻底删除 font awesome 4 menus 这个插件了,强迫症们是不是又感觉轻松了一些呢?哈哈!

不过,有心的朋友可能发现了,这个图标字体的 CSS 文件达到 20 多 kb,而我们真正要用的也就几个到十几个图标而已!所以,喜欢折腾的朋友可以进一步精简一下 CSS 文件。

打开 awesome 文件夹,编辑 css 文件夹下的 font-awesome.min.css 文件,删除没用到的图标 css 定义即可。

不过这个 font-awesome.min.css 文件是压缩后的,看起来很晕!可以先百度搜一下 CSS 美化工具,将其格式化之后再来编辑!

不过 CSS 前面引入字体和公用样式代码记得要保留,如下所示

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
 display: inline-block;
 font: normal normal normal 14px/1 FontAwesome;
 font-size: inherit;
 text-rendering: auto;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 transform: translate(0, 0);
}

好了,本文就分享到这里,喜欢折腾的朋友可以试试看。

28 条回应
  1. 香港云主机 2015-7-16 · 15:53

    原来可以这样修改,之前一直都想改但是一直都不知道在哪里修改,对WP研究不够

  2. 最新影片 2015-7-16 · 19:21

    几天没来了,还得精简,那个文件可以第三方托管,在引用不影响的把

  3. 心音乐 2015-7-17 · 12:10

    这缓存太厉害了吧,首页还显示有评论的,到这就看不到了。

    • 陌小雨 2015-7-17 · 17:39

      恩,从邮箱进到文章页面就可以看到,直接进入文章就是看不到的,缓存确实厉害,主要原因还是因为直接看文章后面没有类似/comment-page-1/#comment-12319的东东

      • avatar
        Jager 2015-7-17 · 22:33

        右下角和评论工具条都有刷新评论功能,居然没人发现和使用。

        • 心音乐 2015-7-20 · 13:13

          说明这个功能太不显眼了。。

          • avatar
            Jager 2015-7-20 · 13:25

            主要是给自己用,没必要显眼。

  4. jquery中文手册 2015-7-17 · 12:48

    鸟哥新主题对于一般人来说贵啦一点点,如果定价低一点用的人绝对多

    • 陌小雨 2015-7-17 · 17:26

      我觉得用的人多了反而不太好,就像xiu主题,提起这个xiu主题,大多数的人的反应就是很多人用,早就烂大街啦。 :???:

  5. 陌小雨 2015-7-17 · 15:45

    这个萝卜白菜了,如果主题自带有图标字体的话,可以自己替换相关字体文件和css代码了,一句话,勤动手! :idea:

  6. 草根站长 2015-7-17 · 21:18

    Jager的确是技术流大师,又搜藏一篇。。

  7. 小幻 2015-7-17 · 22:53

    话说,只要加载一下那个矢形字体不就可以了吗。。

    • avatar
      Jager 2015-7-18 · 10:53

      文章分享的是插件的代码版,不是每个人都听得懂你在说什么。插件一直都是有市场的,没必要钻牛角尖。

  8. aunsen 2015-7-18 · 23:03

    能分享下侧边栏微信图标显示二维码吗,跪求!

  9. 校赚网朱海涛 2015-7-20 · 6:57

    Jager博客我经常来看,总是有一些有牛逼的技术

  10. 暴赚金 2015-7-20 · 14:10

    谢谢分享好文章 搜来的

  11. 草根站长 2015-7-21 · 20:42

    赞一个,之前我用百度sitemap插件,造成发表文章出错,坐等张大侠出代码

  12. 郑州环氧地坪 2015-7-22 · 10:58

    好东西,已经收藏

  13. 脑精网 2015-7-24 · 9:53

    写教程的都是大牛啊,不过写教程就要写得这么详细,让原本不懂操作的也能看明白了。

  14. 群伟伟博客 2015-7-24 · 11:30

    群伟伟博客前来支持下,欢迎博主回访,同时也欢迎各大博主前来我的网站做客,你懂得。

  15. zone 2015-7-28 · 9:50

    真给力,已经用上了,谢谢博主! :wink:

  16. 八卦吧 2015-8-10 · 10:09

    真心好东西,谢谢分享了。

  17. 凡哥 2017-7-21 · 19:53

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

    具体是哪个目录下面呢。我都试了一遍了。没反应

    • avatar
      Jager 2017-7-22 · 19:45

      放到主题目录,begin主题就放到begin文件夹下
      并不是放了就有效果,麻烦仔细看文章,按照文章做。

  18. 凡哥 2017-7-21 · 19:54

    是知更鸟这个模板目录下面么?但是我我放也不好使。调用函数也放好了