为WordPress导航菜单添加个性图标字体续

 懿古今   2015-09-15 22:36:25 更新  技术文档

前段时间,分享了《为MFBegin主题导航菜单添加个性图标字体》,让我们的WordPress导航菜单立马变得高大上了,所以我相信很多人都心动了。为了高大上,安装这个Font Awesome 4 Menus插件也值得。

安装了这个插件,为WordPress导航菜单添加个性图标字体后,细心的博主可能会发现我们的博客网站就会加载这个插件中的一个CSS文件font-awesome.min.css,这个文件大小有23.1KB。可能有人会说为了这几个导航图标就加载20多KB的CSS不太值得。

其实,我们可以对这个文件进行优化的。如本站所用的图片就把这个font-awesome.min.css删减到只有3KB左右,缩减了87%,加载速度也提高了不少,那么应该如何删减呢?

我相信很多博主的导航菜单应该都基本固定的,等我们为这些导航菜单都添加好个性图标字体后,就把他们的名称一一记录下来,如本站首页图标是fa-home。

为WordPress导航菜单添加个性图标字体续|懿古今

然后我们打开这个font-awesome.min.css文件,找到.fa-glass:before{content:"\f000"},从这里开始到最后都可以删除,但是需要保留我们已经使用的图标字体。如本站使用的首页图标fa-home,那么.fa-home:before{content:"\f015"}就必须保留,其他图标字体也一样。

就是这样,我们只保留已经使用的图标字体,其他不用的都删除掉,这样就可以把这个font-awesome.min.css文件减掉80%左右。

PS:为了以后再次增加,可以适当留几个自己看中的,当然也可以不留,等有需要的再添加上去也是一样的。

既然可以把这个CSS文件减少到3KB左右,我们是不是就没有后顾之忧了,感觉试试吧,有了这个图标字体还是相当给力的,相当高大上的!

本文地址:https://www.yigujin.cn/369.html

你可能感兴趣的文章

文章标签:
版权声明:本文为原创文章,版权归 懿古今 所有,欢迎分享本文,转载请保留出处!发布此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请发邮件至[email protected],确认后马上更正、删除,谢谢!

发表评论

  1. 微童年
    微童年 @回复

    对,影像也很重要

  2. 天中青年
    天中青年 @回复

    这个可以有,亲,你这个手机版没有读者墙很不习惯啊

    • 懿古今
      懿古今2015-07-14 14:41  回复

      @天中青年其实用手机看博客网站的读者很少,拿手机来看读者墙的就更少了,所以直接去掉的。

  3. 大致
    大致 @回复

    既然都这么干了,为什么不整个删掉font-awesome.min.css呢?
    把有用的部分挪到style.css里就行了。

  4. IT疯狂女
    IT疯狂女 @回复

    导航字体我一般不怎么在意这些东东

    • 懿古今
      懿古今2015-07-14 14:42  回复

      @IT疯狂女嗯,这个也要看情况来,也不是每一个主题都适合在导航菜单添加图标字体的

  5. 夏日博客
    夏日博客 @回复

    通常不太在意这些,折腾得太麻烦。

    • 懿古今
      懿古今2015-07-14 14:42  回复

      @夏日博客[偷笑] 这个就完全看个人喜好了,不过也不是每一个主题都适合折腾这个图标的

      • 阿龙个人博客
        阿龙个人博客2015-07-14 18:00  回复

        @懿古今觉得确实是,有需要则加上,并非所有主题加上都会变得好看。

  6. 宝赚金
    宝赚金 @回复

    就是这样,我们只保留已经使用的图标字体,其他不用的都删除掉

    • 懿古今
      懿古今2015-07-14 14:43  回复

      @宝赚金嗯,这样可以大大减少加载的CSS文件大小

  7. 热词网
    热词网 @回复

    确实要把这些文件要缩到最小,不然流量大了,服务器压力大

    • 懿古今
      懿古今2015-07-14 14:43  回复

      @热词网嗯,个人认为能缩减就缩减,何况也不复杂

  8. 陈川
    陈川 @回复

    很有用,支持下

  9. yameimei
    yameimei @回复

    拜读一下,哈哈

    • 懿古今
      懿古今2015-07-14 14:44  回复

      @yameimei[呲牙] 谢谢支持,希望对大家有所帮助

  10. 硅藻泥缺点
    硅藻泥缺点 @回复

    不错 点赞

  11. 阿龙个人博客
    阿龙个人博客 @回复

    一旦定型,我就不喜欢折腾太多了,因为一个人精力与时间实在有限。

    • 天中青年
      天中青年2015-07-14 21:45  回复

      @阿龙个人博客这个非常赞成,以后还是少一些折腾,把更多精力放在网站内容维护上。

      • 懿古今
        懿古今2015-07-14 22:31  回复

        @天中青年确实如此,经此以后,我应该也会减少折腾次数了

  12. 天中青年
    天中青年 @回复

    读者墙撤销了吗,怎么用手机登录找不到入口了。

    • 懿古今
      懿古今2015-07-14 22:32  回复

      @天中青年手机看读者墙不友好,所以手机版是看不到读者墙的,只有PC版才能看到

  13. 天中青年
    天中青年 @回复

    卢松松几位大咖就很少更换主题,我辈也应该抓稳定抓内容啊

  14. 瑾瑜
    瑾瑜 @回复

    删减这个css只能节省一小部分,因为css里面引用了字体文件,那里面东西多~

    • 懿古今
      懿古今2015-07-14 22:33  回复

      @瑾瑜确实如此,如果有必要可以自定义字体文件,那样就可以大大减少

  15. 笑笑笑
    笑笑笑 @回复

    这个办法精明啊

    • 懿古今
      懿古今2015-07-15 10:33  回复

      @笑笑笑[呲牙] 其实就是减少一些容量而已,有可能还是自己弄一个字体文件,那样可能就更小了