Single

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

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