修改Yilia左下角SubNav的社交图标
初探IconFont
起
又是一个闷骚的下午,昨天晚上本打算给博客的迁移做一个收尾。无奈我这一颗爱折腾的心,想要给左下角加几个图标。一开始在代码里找了半天也没有找到对应的图片,唯一能找到的就是.icon-mail:before {content: "\E609"
这行代码,抱着试试看的心态改动里面的数字,果然图标变了。


因为是content
属性,我推测应该是把图标以文字的形式显示出来。在附带的字体文件里果然找到了之前的图标。

承
用Google搜索“图标 字体”,找到了一个前端用语“图标字体化”。这里我要吐槽一下,我一个写Java后端的怎么就学起前端技术了嘞?随便在网上看了看,相关的教程能绕地球两个圈。我下面就总结一下我是如何使用的,因为没有做过前端,可能并不是很专业。
转-修改主题
首先,我们看到public/fonts
中有四个格式不同但是命名相同的字体文件。

这四种格式之前的区别,直接看这篇文章。我们的目的就是把我们需要的图标加进去,之后重新生成这四个文件。但是,不能直接更改这四个文件,因为这四个文件是编译(暂且用“编译”这个词吧)Yilia时自动生成的,每次重新编译Yilia之后都会被替换掉。我们修改一个程序肯定不会直接对着程序本体修改,而是取得他的源代码然后更改源代码。那么,在Yilia源代码中:
真正需要修改的是themes/yilia/source-src/css/fonts
文件夹里面的四个字体文件

生成字体文件的方法有好几种,分别是:
- 使用在线icon-font生成器+自制CSS
- 矢量图形编辑软件(Adobe Illustrator)+Glyphs/Glyphs Mini/FontLab + FontSquirrel WebFont Generator+ 自制CSS文件
- 上一条中出现的软件的开源版,InkScape + FontForge + FontSquirrel WebFont Generator
- 矢量图形编辑软件(Adobe Illustrator)+FontCustom命令行
生成字体文件的详细内容可以参考这篇文章。
今天我选择直接使用百度的字体编辑器,后面我会很简单的讲一下如何使用如果我没讲明白,你可以看一下百度字体编辑器教程。
修改字体

下载新图标
去Font Awesome下载最新版的图标。
导入项目
导入两个项目,一个项目是主题的旧字体,一个是从网上下载的待添加字体。
- 打开.woff文件
- 保存项目
按照图中的步骤一,步骤二操作,每次切换项目都要点击“保存项目”。
在两个项目间转移图标
通过“复制”、“粘贴”功能将喜欢的图标添加到旧字体,添加完所有的图标后,最好截一张图,这样后面修改的时候会方便很多,最后下载zip格式并解压。
下面这张图是我添加的图标

修改CSS
安装依赖
如果你之前没有修改过Yilia,请先使用以下命令安装依赖。
进入主题根目录cd themes/yilia
,安装依赖。npm install
开发
修改themes/yilia/source-src
中的fonts.scss
和social.scss
,可以修改自己喜欢的图标和颜色。content中的内容要和上面截图中的


然后,将新生成的字体文件拷贝到themes/yilia/source-src/css/fonts
。
切换目录至themes/yilia
,运行npm run dev
。此时会用webpack打包,把文件编译到source文件里,但文件不会经过压缩
发布
最终定稿后运行npm run dist
获得最终确定版本,此时的编译会经过压缩。
合-生成网站
配置主题的config
文件。hexo generate
修改Yilia左下角SubNav的社交图标