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

</div

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

你可能感兴趣的文章

• 纯代码给WordPress侧边栏小工具添加幻灯片功能
• Nana主题和Blogs主题代码自动高亮及使用教程
• Three主题实现WordPress文章部分内容输入密码后可见
• 实现WordPress默认站内搜索伪静态化的方法
• WordPress站点添加背景图的两种方法
• 三种方法修改WordPress默认用户名admin
• 如何在WordPress文章分页中添加「」按钮
• WordPress导航栏实现“手气不错”随机功能