hexo的图标配置

在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的官网点击下载，解压后会有这么四个文件夹

image

我们当然选择的是web-fonts-with-css，点进去后，需要用到的就是css的样式配置文件和webfont的资源文件，注意到主题source目录下存在css目录，所以将所有css文件拷贝到这里，再将webfont整个文件夹放到source下。

接下来进行css文件的配置，注意到css文件总共有五种组合，

image

在你的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使用图标

参考官网的说明，

image

如上图，在你需要使用或替换图标的位置使用

<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的官网，你还可以发现更多地操作，如对你的图标进行缩放

image

旋转

image

以及小元素的移位

image

具体可以参考这里。