给Mist主题的图标包瘦身

Mist主题瘦身计划之精简图标包。全套fontawesome字体几乎占到了整个主页流量的一半,对于够用党加强迫症来说完全不能忍。哼。但是很可惜,定制化的fontawesome是收费的,所以下面就自食其力。

从iconmoon上定制图标

打开iconmoon app,从各种图标集中选择自己需要的,当然,fontawesome也是包括的。点击generate font,首先修改图标的名字(最好跟Mist主题内的一致),然后点击preferences,修改Class Prefixfa-,选中use i。最后下载制作好的图标文件。

从fontawesome下载样式

注册免费版之后,随便选择几个图标完成制作,从emmbed code中打开js代码,顺藤摸瓜找出css文件的真实地址,类似于

https://fonticons-free-fonticons.netdna-ssl.com/kits/XXXXX/XXXXX.css

这个样式文件主要分为三部分:

  • woff文件的base64代码
  • 字符的各种效果,以fa-开头的
  • 字符定义

整合到Mist

打开base64 encoder把刚刚下载的woff文件转换成base64字符码,替换到样式文件的第一部分,注意把font-family统一了。把第一步下载的css文件里字符定义文件替换到第三部分。做完这些再把修改好的完整CSS替换到\source\vendors\font-awesome\css\font-awesome.min.css

测试

到这里就大功告成啦,enjoy