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

前言

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

下面~我们开始吧~

教程

添加图标库

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

登录上去后在上方资源管理中的我的项目内创建一个新项目

创建完一个新项目后我们需要改一下项目的基本属性，在更多操作中的编辑项目内修改

• 项目名称：自定义
• 项目描述：可选
• GUID：不管
• FontClass/Symbol前缀：可选
• Font Family（注意这一项！重要！）：改成一个自己好记的名字

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

要想添加新图标到项目内，我们只需要直接在网站内搜索我们想要的图标，比如我想搜索一个QQ音乐的图标，就搜索QQ音乐

然后在里面找一个自己心仪的图标，选择添加入库

添加完成后，在右上角的购物车图标内选择添加至项目

之后会自动跳转到我们的项目内，此时我们选择font class项，再点击查看在线链接即可使用我们的图标

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

图标使用教程

进入到我们的主题源码内进行修改，使用图标我们只需要修改head.php和social.php
head.php大致路径：/wwwroot/usr/themes/nexmoe/layout/_partial（仅参考）
social.php大致路径：/wwwroot/usr/themes/nexmoe/layout/_widget（仅参考）
打开我们的head.php和social.php

先修改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>

编辑完成后保存并退出，然后刷新我们的个人博客即可看到效果
这时，左侧的社交按钮栏就已经出现我们刚刚添加的QQ音乐的图标了

（不知道为什么电脑上面看着会有点错位ORZ，手机上看着就是正常的，所以优先以显示正常的设备演示）
到这里自定义社交按钮图标的教程就说完啦！有以下两点需要注意一下~

1. 阿里图标库中的项目内添加新图标后需要刷新一遍在线链接，会有提示的，然后要将新的在线链接替换掉head.php中的旧在线链接才能添加新增加的图标。

2. 因为部分设备显示会有错位，所以可以在阿里图标库中自己修改一下图标的位置来自行正位。

   结语

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

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