handsome主题引入阿里矢量图标库自定义左侧导航栏图标

### 前言

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

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

### 首先，注册阿里矢量图标库
打开[阿里矢量图标库][2]进行注册
选择自己想要的ICON图标选入购物车
在购物车内创建项目并选中保存进项目里
[album]
![选图标][3]
![购物车][4]
![创建项目][5]
[/album]

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

[album]
![进入个人主页][6]
![生成代码][7]
[/album]
### 引入阿里图标库的css文件

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

![填入头部head][8]

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

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

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

![填入左边导航栏][9]

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

![查看效果][10]

### 图标颜色修改

#### 方法一

在主题设置-自定义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});

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

[scode type="yellow"]注意：修改完都要重新更新图标库的链接，然后到自定义头部设置更换一下，不会前期的图标会没有效果。[/scode]

[1]: https://auth.ihewro.com/user/docs/
  [2]: https://www.iconfont.cn/
  [3]: https://g.gtimg.cn/music/photo_new/T053XD01002NxMyj4ShvNz.png
  [4]: https://g.gtimg.cn/music/photo_new/T053XD01003pe3Tg0LYVsp.png
  [5]: https://g.gtimg.cn/music/photo_new/T053XD01001Dv0Um2qXKnq.png
  [6]: https://g.gtimg.cn/music/photo_new/T053XD01000zXgqj1HhQnh.png
  [7]: https://qqq.gtimg.cn/music/photo_new/T053XD00002Pxg4w3Zuhuy.png
  [8]: https://qqq.gtimg.cn/music/photo_new/T053XD00004IPVOa2h9Vio.png
  [9]: https://qqq.gtimg.cn/music/photo_new/T053XD00002S33vY0FBmxh.png
  [10]: https://g.gtimg.cn/music/photo_new/T053XD01004Q3lTU1qsMI3.png

### 前言

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

### 首先，注册阿里矢量图标库
打开[阿里矢量图标库][2]进行注册
选择自己想要的ICON图标选入购物车
在购物车内创建项目并选中保存进项目里
<div class='album_block'>

[album]

![选图标][3]
![购物车][4]
![创建项目][5]
[/album] </div>

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

[album]

![进入个人主页][6]
![生成代码][7]
[/album] </div>
### 引入阿里图标库的css文件

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

![填入头部head][8]

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

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

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

![填入左边导航栏][9]

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

![查看效果][10]

### 图标颜色修改

#### 方法一

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

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

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

#### 方法二

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

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

注意：修改完都要重新更新图标库的链接，然后到自定义头部设置更换一下，不会前期的图标会没有效果。
</div>

本文标题：handsome主题引入阿里矢量图标库自定义左侧导航栏图标

本文链接：https://blog.1zxbc.cn/archives/95.html

除非另有说明，本作品遵循CC 4.0 BY-SA 版权协议。

声明：转载请注明文章来源。

大佬如果觉得我的文章对你有用，请随意赞赏

handsome主题引入阿里矢量图标库自定义左侧导航栏图标

One comment

Leave a Comment Cancel reply
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

handsome主题引入阿里矢量图标库自定义左侧导航栏图标

One comment

Leave a Comment Cancel reply 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

handsome主题引入阿里矢量图标库自定义左侧导航栏图标

Leave a Comment Cancel reply
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款