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

博主：三百斤的窜天猴
发布时间：2023 年 03 月 02 日
987 次浏览
暂无评论
2706字数
分类： handsome美化 seo优化

## 转载自[冷水薄荷](https://abohe.cn/)

## 前言

购买了handsome之后，不管是我，还是其他人，估计都着手做一些或多或少的自定义。这就涉及到了添加左侧的导航栏，导航栏的图标也成为了修改的目标，但增加一些页面的时候，在主题自带的图标库中找不到自己喜欢的图标，所以这边写下这一篇。

其实作者其实在教程中的 `**主题功能-->图标列表;主题功能-->自定义栏目**`里已经把语法和如何引入图标库写的比较清楚了。

## 注册阿里矢量图标库

首先我们进入阿里矢量图标库
自己注册好账号
这时候个人主页什么都没有。

![注册后主页](https://tc.bohecat.com/image/202202171025566.png "注册后主页")

## 选择自己需要的图标建立自己的库

现在可以去搜索自己需要的图标了
我这里以监控页面为例

![图标搜索界面](https://tc.bohecat.com/image/202202171025588.png "图标搜索界面")

找到自己喜欢的图标
比如我选中：

![选择图标](https://tc.bohecat.com/image/202202171025651.png "选择图标")

鼠标移到图标上，然后点击购物车图标。（购物车可以反复添加，只选自己需要的就好）

![加入购物车](https://tc.bohecat.com/image/202202171025695.png "加入购物车")

点击右上角的购物车图标可以看到自己添加过的的图标

![右上角购物车](https://tc.bohecat.com/image/202202171025744.png "右上角购物车")

选完自己所有需要的图标之后，点击添加至项目
然后加号新增一个自己的项目

![添加项目](https://tc.bohecat.com/image/202202171026693.png "添加项目")
![添加项目](https://tc.bohecat.com/image/202202171027918.png "添加项目")

选中点击确定即可，会自己进入项目库，是这样的：

![图标项目界面](https://tc.bohecat.com/image/202202171025002.png "图标项目界面")

## 引入阿里图标库的css文件

挑选完需要的图标，就可以选择中间的Font class，然后更新链接复制了。
把复制的链接放到下面的 `引入代码`中：

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

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

![插入代码](https://tc.bohecat.com/image/202202171025056.png "插入代码")

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

![复制代码](https://tc.bohecat.com/image/202202171025211.png "复制代码")

最后在自己的图标库选择图标，复制图标的名称代码，替换下面的文字。

`“监控"`处的名字按自己需求修改。

其实就是作者安排好的配置方式，只不过阿里矢量图标库的class类需要iconfont来起头，并且可以简单定义颜色。

```xml
{"name":"监控","class":"iconfont 填写复制的图标代码","link":"自己需要的页面绝对地址","target":"_self"},
```

![导航栏示例](https://tc.bohecat.com/image/202202171025261.png "导航栏示例")

**保存收工。**

![图标加载成功](https://tc.bohecat.com/image/202202171025375.png "图标加载成功")

## 图标颜色修改

/-方法1-/

在主题设置-自定义css中，分别填入每个图标color的rgb值即可。

这是比较基础的定义方式，逐个图标名添加即可。

代码如下：

/-1-/

```xml
.icon-weibo{color:#ffffff;}
```

/-2-/

```xml
.icon-weibo{color: rgb(95,12,432);}
```

/-方法2-/

或者，在自定义js和pjax回调函数中同时加入（此方法适合懒得一个个自定义的，颜色每次都是随机分配的）

```javascript
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});
```

## PS

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

每次修改完都要重新获取图标库的链接，然后到自定义设置更换一下，不会影响没修改的图标。（其实是阿里重写了一个库，并且是阿里的所以速度不错！）

![修改图标](https://tc.bohecat.com/image/202202171025422.png "修改图标")
![图标修改界面](https://tc.bohecat.com/image/202202171025473.png "图标修改界面")

最后修改：2023 年 03 月 02 日

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

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 * （请使用真实邮箱地址，方便及时接收评论回复！）

打卡

私密评论

名称 *

🎲

邮箱 *

地址

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

三百斤的窜天猴 • 2023 年 03 月 02 日

## 转载自[冷水薄荷](https://abohe.cn/)

## 前言

其实作者其实在教程中的 `**主题功能-->图标列表;主题功能-->自定义栏目**`里已经把语法和如何引入图标库写的比较清楚了。

## 注册阿里矢量图标库

首先我们进入阿里矢量图标库
自己注册好账号
这时候个人主页什么都没有。

![注册后主页](https://tc.bohecat.com/image/202202171025566.png "注册后主页")

## 选择自己需要的图标建立自己的库

现在可以去搜索自己需要的图标了
我这里以监控页面为例

![图标搜索界面](https://tc.bohecat.com/image/202202171025588.png "图标搜索界面")

找到自己喜欢的图标
比如我选中：

![选择图标](https://tc.bohecat.com/image/202202171025651.png "选择图标")

鼠标移到图标上，然后点击购物车图标。（购物车可以反复添加，只选自己需要的就好）

![加入购物车](https://tc.bohecat.com/image/202202171025695.png "加入购物车")

点击右上角的购物车图标可以看到自己添加过的的图标

![右上角购物车](https://tc.bohecat.com/image/202202171025744.png "右上角购物车")

选完自己所有需要的图标之后，点击添加至项目
然后加号新增一个自己的项目

![添加项目](https://tc.bohecat.com/image/202202171026693.png "添加项目")
![添加项目](https://tc.bohecat.com/image/202202171027918.png "添加项目")

选中点击确定即可，会自己进入项目库，是这样的：

![图标项目界面](https://tc.bohecat.com/image/202202171025002.png "图标项目界面")

## 引入阿里图标库的css文件

挑选完需要的图标，就可以选择中间的Font class，然后更新链接复制了。
把复制的链接放到下面的 `引入代码`中：

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

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

![插入代码](https://tc.bohecat.com/image/202202171025056.png "插入代码")

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

![复制代码](https://tc.bohecat.com/image/202202171025211.png "复制代码")

最后在自己的图标库选择图标，复制图标的名称代码，替换下面的文字。

`“监控"`处的名字按自己需求修改。

其实就是作者安排好的配置方式，只不过阿里矢量图标库的class类需要iconfont来起头，并且可以简单定义颜色。

```xml
{"name":"监控","class":"iconfont 填写复制的图标代码","link":"自己需要的页面绝对地址","target":"_self"},
```

![导航栏示例](https://tc.bohecat.com/image/202202171025261.png "导航栏示例")

**保存收工。**

![图标加载成功](https://tc.bohecat.com/image/202202171025375.png "图标加载成功")

## 图标颜色修改

/-方法1-/

在主题设置-自定义css中，分别填入每个图标color的rgb值即可。

这是比较基础的定义方式，逐个图标名添加即可。

代码如下：

/-1-/

```xml
.icon-weibo{color:#ffffff;}
```

/-2-/

```xml
.icon-weibo{color: rgb(95,12,432);}
```

/-方法2-/

或者，在自定义js和pjax回调函数中同时加入（此方法适合懒得一个个自定义的，颜色每次都是随机分配的）

## PS

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

![修改图标](https://tc.bohecat.com/image/202202171025422.png "修改图标")
![图标修改界面](https://tc.bohecat.com/image/202202171025473.png "图标修改界面")

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

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

迅雷for Mac v6.6.6 免登录会员破解版更新mac迅雷破解版+Mac纯净版迅雷修改5.0.8(65887)(授人以渔)

Typecho-handsome主题如何增加侧边导航栏

typecho/handsome评论邮件通知提醒设置

CentOS/Debian/Ubuntu 一键网络DD重装脚本（纯净版）让你的服务器纵享丝滑

搜索框搜索提示有内容，但是最终搜索页面没有显示结果？

test

OpenWrt软路由设置

使用CF自选IP解决Tracker未工作、待机问题

PostToBingIndexNow插件实现typecho主题发布新文章自动推送到Bing站长平台

OpenAIs services are not available in your country解决方法

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

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

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

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款