在hexo的主题优化中，我碰到了许多问题，印象最深的是界面中小图标的配置，没有具体的教程，只能自行摸索，故将整个过程记录下来，供需要的人参考。
当然，全文基于小白视角，前端大佬可以忽略这篇文章。
·1 寻找图标
由于我需要更改的是author个人信息的链接图标，所以打开layout/partial中的author.ejs，发现有这么几行代码
if(item.name == 'weibo')
<i class="iconfont icon-weibo"></i>
很明显，信息中weibo的图标是从这个iconfont中生成的，搜索 iconfont 发现是阿里旗下的一个图标素材库，但是素材需要添加购物车登陆下载，像我这么懒的人就不想再去申个账号，又搜索图标配置，发现了另一个国外的网站，Font Awesome，这是一个源码在Github上的开源项目，提供绝大多数免费的icon供网页等应用。
·2配置文件
在Font Awesome的官网点击下载，解压后会有这么四个文件夹
我们当然选择的是web-fonts-with-css，点进去后，需要用到的就是css的样式配置文件和webfont的资源文件，注意到主题source目录下存在css目录，所以将所有css文件拷贝到这里，再将webfont整个文件夹放到source下。
接下来进行css文件的配置，注意到css文件总共有五种组合，
在你的layout/_partial/head.ejs中添加如下代码
<link rel="stylesheet" href="<%- url_for('/fa-brands/css/fa-brands.min.css') %>">
<link rel="stylesheet" href="<%- url_for('/fa-regular/css/fa-regular.min.css') %>">
<link rel="stylesheet" href="<%- url_for('/fa-solid/css/fa-solid.min.css') %>">
<link rel="stylesheet" href="<%- url_for('/fontawesome/css/fontawesome.min.css') %>">
<link rel="stylesheet" href="<%- url_for('/fontawesome-all/css/fontawesome-all.css') %>">
再根据官网的使用说明，添加
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
至此，我们就完成了配置。
·3使用图标
参考官网的说明，
如上图，在你需要使用或替换图标的位置使用
<i class="fas fa-camera-retro"></i>
即可，这是一个相机图标的示例。
每个图标的指代（fa-camera-retro）可以在官网搜索你需要的图标后查找到。
由于我替换的是blog作者界面的链接图标，故在author.ejs中修改代码
<%} if(item.name == 'instagram') {%>
<i class="fab fa-instagram"></i>
这样就可以放上我的ins链接啦。
·4更多操作
浏览Font Awesome的官网，你还可以发现更多地操作，如对你的图标进行缩放
旋转
以及小元素的移位
具体可以参考这里。
