文章7
标签10
分类3

CDN服务由 又拍云 提供

Typecho Nexmoe主题社交按钮自定义图标

折影默认给的图标太少了。。。我决定自己做一个!

前言

Nexmoe主题真是太好看辣!当我搭建完后就直接推荐给了我的某位好友,好友用后也觉得很不错。但是我的好友是网易云上的一位音乐人,便问我左侧社交按钮中能否添加网易云的图标,我一开始也没想太多就让他去css里找,但是!!!折影并没有将typecho版的nexmoe主题的fonticon放在本地!所以是根本找不到的,直到昨天我才发现用的是阿里巴巴图标库且图标数量极少。。。不过正由这一点,我们可以更方便的添加自己想要的图标。

下面~我们开始吧~

教程

添加图标库

我们先进入阿里巴巴图标库的官网并登录:阿里矢量图标官网
阿里巴巴图标支持使用Github、阿里域账号(非阿里员工用不着)和新浪微博登陆

阿里图标官网图标官网登陆

登录上去后在上方资源管理中的我的项目内创建一个新项目
创建新项目
创建完一个新项目后我们需要改一下项目的基本属性,在更多操作中的编辑项目内修改

更多操作项目编辑
  • 项目名称:自定义
  • 项目描述:可选
  • GUID:不管
  • FontClass/Symbol前缀:可选
  • Font Family(注意这一项!重要!):改成一个自己好记的名字

全部改好之后选择保存,我们就可以添加图标了


要想添加新图标到项目内,我们只需要直接在网站内搜索我们想要的图标,比如我想搜索一个QQ音乐的图标,就搜索QQ音乐
搜索QQ音乐
然后在里面找一个自己心仪的图标,选择添加入库

cvNh4g.png

添加完成后,在右上角的购物车图标内选择添加至项目
添加至项目
之后会自动跳转到我们的项目内,此时我们选择font class项,再点击查看在线链接即可使用我们的图标
复制一份在线链接

将我们的在线链接复制一份即可使用,接下来是使用教程

图标使用教程

进入到我们的主题源码内进行修改,使用图标我们只需要修改head.phpsocial.php
head.php大致路径:/wwwroot/usr/themes/nexmoe/layout/_partial(仅参考)
social.php大致路径:/wwwroot/usr/themes/nexmoe/layout/_widget(仅参考)
打开我们的head.phpsocial.php
head和social
先修改head.php,在第十五行后添加以下代码

<link rel="stylesheet" href="你刚刚复制的图标项目的在线链接">

OK了,到这里head.php就不需要再添加其他代码了,然后我们往social.php中修改
在31行后如以下格式添加代码即可使用我们的自定义图标

//格式:
<a class="mdui-ripple" href="你的社交链接" target="_blank" mdui-tooltip="{content: '鼠标放在图标上会显示的名字'}" style="color:图标的十六进制颜色码;background-color:rgb(图标背景的RGB色彩值)" rel="external nofollow noopener noreferrer"> <i class="填写刚刚设置好的font-family 这里则是图标名称"></i> </a>

//示例:
<a class="mdui-ripple" href="https://y.qq.com/n/yqq/playlist/2390865025.html#stat=y_new.profile.create_playlist.click&dirid=15" target="_blank" mdui-tooltip="{content: 'QQ音乐'}" style="color:#ffd700;background-color:rgb(173,255,47)" rel="external nofollow noopener noreferrer"> <i class="kukefont icon-qqmusic"></i> </a>

social示例
编辑完成后保存并退出,然后刷新我们的个人博客即可看到效果
这时,左侧的社交按钮栏就已经出现我们刚刚添加的QQ音乐的图标了
效果图
(不知道为什么电脑上面看着会有点错位ORZ,手机上看着就是正常的,所以优先以显示正常的设备演示)
到这里自定义社交按钮图标的教程就说完啦!有以下两点需要注意一下~

  1. 阿里图标库中的项目内添加新图标后需要刷新一遍在线链接,会有提示的,然后要将新的在线链接替换掉head.php中的旧在线链接才能添加新增加的图标。
  2. 因为部分设备显示会有错位,所以可以在阿里图标库中自己修改一下图标的位置来自行正位。

结语

想不出来啦啦啦啦啦啦啦啦啦~不知道大家学会了嘛~嘿嘿!
有问题可以在此文章下留言或者添加博主QQ:2395571695询问~

本文作者:二次元鱼酱-依玖
本文链接:https://kukiisama.top/index.php/archives/17/
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可

1 评论

  1. 安和 7月21日 回复
    如果能做点背景渐变就更好了,现在这样有点违和