笨猫博客

  • 🍟首页
  • 🍘目录
    • 🥝VPS教程
    • 🍾猫玩技术
    • 🍹干货分享
    • 🍏软件分享
    • 🍩一只猫
  • 🍋工具
    • 🌽IP路由追踪
    • 🍐域名Whois查询
    • 🥘域名被墙查询
    • 🍧IP正常检测
    • 🔥IP端口检测
    • 🍆短网址
    • 🐟VIP音乐播放
    • 🍯KMS激活
  • 🍓链接
  • 🍪联系
  • 🍱登录
    • 🥦登录
    • 🍒注册
关注互联网,生活,音乐,乐此不疲的一只笨猫
  1. 首页
  2. 网络资源
  3. 正文

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

2023-05-27 380点热度 0人点赞 0条评论

前言

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

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

注册阿里矢量图标库

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

注册后主页注册后主页

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

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

图标搜索界面图标搜索界面

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

选择图标选择图标

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

加入购物车加入购物车

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

右上角购物车右上角购物车

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

添加项目添加项目
添加项目

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

图标项目界面

引入阿里图标库的css文件

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

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

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

插入代码

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

复制代码

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

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

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

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

导航栏示例

保存收工。

图标加载成功

图标颜色修改

/-方法1-/

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

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

代码如下:

/-1-/

.icon-weibo{color:#ffffff;}

/-2-/

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

/-方法2-/

或者,在自定义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});

PS

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

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

修改图标
图标修改界面

标签: Typecho 图标
最后更新:2023-05-27

笨猫

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

最新 热点 随机
最新 热点 随机
Claude 2 镜像站上线了,依然免费 封神第一部:朝歌风云下载 扫描全能王APP v6.49.0.2309070000 破解版 🎁 [限免] 新作品“桌面计算器”正式发布啦!专为 iOS17 设计,无需打开,直接计算 倒数鸭 - 全新设计的倒数正数纪念日 app AI 套壳 APP,现已完全开源啦(APP+服务端)
Google Chrome v116.0.5845.180 Stable 绿色便携版AI 套壳 APP,现已完全开源啦(APP+服务端)GKD - 基于 无障碍 + 高级选择器 + 订阅规则 的自定义去广告APP【电影】八角笼中 (2023)最新下载,百度云盘,阿里云盘Cloudflare搭建DDNS(脚本版)倒数鸭 - 全新设计的倒数正数纪念日 app
pichacks:假如你左右脸对称 Chevereto 4.10.18 图床程序去后门免授权版 豆丁网(docin):类似于Scribd的国内文档分享服务 期待小米手机发布 秘术师装备属性一览 Sift.email 输入Email 帮你检查电子邮件地址是否存在
标签聚合
wordpress 域名 有趣 日记 google 音乐 VPS OneDrive
最近评论
黄金体验 发布于 1 周前(09月16日) 非常感谢,楼主推荐~
cc 发布于 2 周前(09月14日) 这个版本有没有修复,右上角升级提示??那个提示很烦
爱上发生的 发布于 2 周前(09月12日) 你好大
六先生 发布于 2 周前(09月10日) 看一看哈哈哈
磁力草 发布于 2 周前(09月09日) 请更新 磁力草:全网最大的磁力搜索引擎 主站:https://www.cilicao.cn/ ...
好友
  • glzjin's blog glzjin's blog
  • ZAERA博客
  • 冰沫记
  • 奇它博客
  • 猫腻‘s Blog
  • 猫饭
  • 肥宅之家
  • 萌博
  • 野路子程序员

COPYRIGHT © 2022 笨猫博客. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang