前段时间,分享了《为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。
然后我们打开这个font-awesome.min.css文件,找到.fa-glass:before{content:"\f000"},从这里开始到最后都可以删除,但是需要保留我们已经使用的图标字体。如本站使用的首页图标fa-home,那么.fa-home:before{content:"\f015"}就必须保留,其他图标字体也一样。
就是这样,我们只保留已经使用的图标字体,其他不用的都删除掉,这样就可以把这个font-awesome.min.css文件减掉80%左右。
PS:为了以后再次增加,可以适当留几个自己看中的,当然也可以不留,等有需要的再添加上去也是一样的。
既然可以把这个CSS文件减少到3KB左右,我们是不是就没有后顾之忧了,感觉试试吧,有了这个图标字体还是相当给力的,相当高大上的!
发表于2015-07-12 10:15 沙发
对,影像也很重要
@微童年有图标感觉高大上很多,而且加载的文件能减就减
@懿古今确实不错
发表于2015-07-12 23:31 板凳
这个可以有,亲,你这个手机版没有读者墙很不习惯啊
@天中青年其实用手机看博客网站的读者很少,拿手机来看读者墙的就更少了,所以直接去掉的。
发表于2015-07-13 08:06 地板
既然都这么干了,为什么不整个删掉font-awesome.min.css呢?
把有用的部分挪到style.css里就行了。
@大致这个可以有,就看个人喜好了
发表于2015-07-13 11:08 4楼
导航字体我一般不怎么在意这些东东
@IT疯狂女嗯,这个也要看情况来,也不是每一个主题都适合在导航菜单添加图标字体的
发表于2015-07-13 16:03 5楼
通常不太在意这些,折腾得太麻烦。
@夏日博客[偷笑] 这个就完全看个人喜好了,不过也不是每一个主题都适合折腾这个图标的
@懿古今觉得确实是,有需要则加上,并非所有主题加上都会变得好看。
发表于2015-07-13 16:56 6楼
就是这样,我们只保留已经使用的图标字体,其他不用的都删除掉
@宝赚金嗯,这样可以大大减少加载的CSS文件大小
发表于2015-07-13 20:36 7楼
确实要把这些文件要缩到最小,不然流量大了,服务器压力大
@热词网嗯,个人认为能缩减就缩减,何况也不复杂
发表于2015-07-14 08:24 8楼
很有用,支持下
@陈川[呲牙] 谢谢支持
发表于2015-07-14 09:15 9楼
拜读一下,哈哈
@yameimei[呲牙] 谢谢支持,希望对大家有所帮助
发表于2015-07-14 14:54 10楼
不错 点赞
发表于2015-07-14 17:59 11楼
一旦定型,我就不喜欢折腾太多了,因为一个人精力与时间实在有限。
@阿龙个人博客这个非常赞成,以后还是少一些折腾,把更多精力放在网站内容维护上。
@天中青年确实如此,经此以后,我应该也会减少折腾次数了
发表于2015-07-14 21:44 12楼
读者墙撤销了吗,怎么用手机登录找不到入口了。
@天中青年手机看读者墙不友好,所以手机版是看不到读者墙的,只有PC版才能看到
发表于2015-07-14 21:46 13楼
卢松松几位大咖就很少更换主题,我辈也应该抓稳定抓内容啊
@天中青年是的,应该向他们学习,减少折腾
发表于2015-07-14 22:14 14楼
删减这个css只能节省一小部分,因为css里面引用了字体文件,那里面东西多~
@瑾瑜确实如此,如果有必要可以自定义字体文件,那样就可以大大减少
发表于2015-07-15 06:31 15楼
这个办法精明啊
@笑笑笑[呲牙] 其实就是减少一些容量而已,有可能还是自己弄一个字体文件,那样可能就更小了