前言

自从购买了handsome，因为官方本身的主题比较简洁，可支持自定义的地方也很多，所以无论是我，还是其他人，都比较喜欢捣鼓&自定义（俗称美化&魔改）我们的博客，这就涉及到左边导航栏的自定义修改。So，有了这一篇，本篇将会保姆式地介绍如何引入阿里矢量图标库自定义左侧导航栏图标，本篇仅适用于handsome主题，其他主题修改可参考。

其实作者在教程中已经把语法和如何引入图标库写的比较清楚了。

首先，注册阿里矢量图标库

打开阿里矢量图标库进行注册
选择自己想要的ICON图标选入购物车
在购物车内创建项目并选中保存进项目里

在右上角进入个人主页，生成代码

引入阿里图标库的css文件

<link href="填阿里图标库生成的地址" rel="stylesheet">

填入css代码到主题外观设置——开发者设置——自定义输出head头部的HTML代码

导航栏引入阿里库里的图标

{"name":"相册","class":"iconfont 图标代码","link":"xxx.com","target":"_self"}

相册、图标代码、xxx.com可自行更换

保存完就可以查看我们添加的导航栏了

图标颜色修改

方法一

在主题设置-自定义css中，分别填入每个图标color的RGB值，这是比较基础的定义方式，逐个图标名添加即可。

.icon图标代码{color:#ffffff;}

或者

.icon图标代码{color: rgb(191, 155, 171);}

方法二

同时在自定义js和pjax回调函数中加入，此方法颜色每次都是随机分配的

let leftHeader=document
.querySelectorAll(
"span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr=["#FF69B4","#58c7ea","#E066FF","#FF69B4","#FFA54F","#90EE90","#0043ff","#cc00ff","#878787","#A0522D","#FF7256","#FFA500","#8B0000","#7CFC00","#4EEE94","#00FFFF","#EE0000"];
leftHeader
.forEach(
tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];
tag.style.color=tagsColor});

最后

加入图标库的项目之后，图标的大小以及参数都是可以自定义的。