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

原创 懿古今  2015-07-12  阅读 3,588 次

前段时间,分享了《为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左右,我们是不是就没有后顾之忧了,感觉试试吧,有了这个图标字体还是相当给力的,相当高大上的!

历史上的今天:

本文地址:http://yigujin.cn/369.html
关注我们:请关注一下我们的微信公众号:扫描二维码,公众号:aiboke112
版权声明:本文为原创文章,版权归 懿古今 所有,欢迎分享本文,转载请保留出处!
WordPress免费清新BLOG/CMS响应式主题Nana专题文章
WordPress免费响应式主题:Nana

发表评论


表情

  1. 笑笑笑
    笑笑笑 【农民】 @回复

    这个办法精明啊

    • 懿古今
      懿古今【站长】 @回复

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

  2. 瑾瑜
    瑾瑜 【队长】 @回复

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

    • 懿古今
      懿古今【站长】 @回复

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

  3. 天中青年
    天中青年 【市长】 @回复

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

  4. 天中青年
    天中青年 【市长】 @回复

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

    • 懿古今
      懿古今【站长】 @回复

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

  5. 阿龙个人博客
    阿龙个人博客 【市长】 @回复

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

  6. 硅藻泥缺点
    硅藻泥缺点 【农民】 @回复

    不错 点赞

  7. yameimei
    yameimei 【农民】 @回复

    拜读一下,哈哈

  8. 陈川
    陈川 【农民】 @回复

    很有用,支持下

  9. 热词网
    热词网 【县长】 @回复

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

    • 懿古今
      懿古今【站长】 @回复

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

  10. 宝赚金
    宝赚金 【镇长】 @回复

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

    • 懿古今
      懿古今【站长】 @回复

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

  11. 夏日博客
    夏日博客 【县长】 @回复

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

    • 懿古今
      懿古今【站长】 @回复

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

  12. IT疯狂女
    IT疯狂女 【村长】 @回复

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

    • 懿古今
      懿古今【站长】 @回复

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

  13. 大致
    大致 【镇长】 @回复

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

  14. 天中青年
    天中青年 【市长】 @回复

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

    • 懿古今
      懿古今【站长】 @回复

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

  15. 微童年
    微童年 【市长】 @回复

    对,影像也很重要