简单分享下 Hao 主题底部的图标设置,同样的先看下效果

这些美观的图标并不是由网上阿里巴巴矢量库弄来的,之前在网上看了许多的教程都在推荐阿里巴巴矢量库,但后来发现只是导航栏的图标设置,没有底部的图标设置,后来找到了下面的图标库

https://yesicon.app/

也可以通过我的网站导航栏 服务 - 图标中打开

在 Hao 主题中打开主题设置 - 页脚

在页脚配置处向下滑看见社交媒体 - 左侧 - 选择自定义

复制图标时选择SVG的格式填入即可,图标在下面截图处直接复制即可

微信示例图标代码如下

<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24"><g fill="none"><path fill="#78eb7b" d="M12.385 3.757a8.45 8.45 0 0 0-6.93-.541a7.06 7.06 0 0 0-3.633 2.862a5.36 5.36 0 0 0-.669 4.11a6.3 6.3 0 0 0 2.73 3.691q-.372 1.065-.714 2.138c.821-.428 1.634-.872 2.451-1.308a9.1 9.1 0 0 0 3.06.436a5.3 5.3 0 0 1-.211-2.47c.212-1.15.8-2.195 1.673-2.973a7.24 7.24 0 0 1 5.433-1.785a6.34 6.34 0 0 0-3.19-4.162z"/><path fill="#c9f7ca" d="M1.176 10.269c.14-.533.356-1.042.644-1.511a7.05 7.05 0 0 1 3.632-2.863a8.45 8.45 0 0 1 6.93.542c.7.389 1.326.9 1.848 1.507a8 8 0 0 1 1.343-.023a6.34 6.34 0 0 0-3.19-4.162a8.45 8.45 0 0 0-6.931-.541A7.05 7.05 0 0 0 1.82 6.08a5.36 5.36 0 0 0-.67 4.11q.016.038.026.079"/><path stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M12.385 3.757a8.45 8.45 0 0 0-6.93-.541a7.06 7.06 0 0 0-3.633 2.862a5.36 5.36 0 0 0-.669 4.11a6.3 6.3 0 0 0 2.73 3.691q-.372 1.065-.714 2.138c.821-.428 1.634-.872 2.451-1.308a9.1 9.1 0 0 0 3.06.436a5.3 5.3 0 0 1-.211-2.47c.212-1.15.8-2.195 1.673-2.973a7.24 7.24 0 0 1 5.433-1.785a6.34 6.34 0 0 0-3.19-4.162z"/><path fill="#78eb7b" stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M5.643 6.299a.478.478 0 1 1 .321.9a.478.478 0 0 1-.321-.9m5.029.005a.478.478 0 1 1 .338.894a.478.478 0 0 1-.338-.894"/><path fill="#78eb7b" d="M22.6 13.584a5.54 5.54 0 0 0-2.58-2.633a7.11 7.11 0 0 0-6.38.024a5.3 5.3 0 0 0-2.828 3.482a4.48 4.48 0 0 0 .574 3.314a6.1 6.1 0 0 0 4.157 2.712a7.6 7.6 0 0 0 3.633-.24c.702.274 1.333.716 2.015 1.042a41 41 0 0 0-.564-1.756a5.7 5.7 0 0 0 1.876-2.073a4.5 4.5 0 0 0 .112-3.872z"/><path fill="#c9f7ca" d="M13.633 13.288a7.11 7.11 0 0 1 6.38-.024a5.54 5.54 0 0 1 2.58 2.632q.143.325.231.67a4.5 4.5 0 0 0-.23-2.986a5.54 5.54 0 0 0-2.581-2.633a7.11 7.11 0 0 0-6.38.024a5.3 5.3 0 0 0-2.828 3.482c-.151.69-.13 1.406.064 2.085a5.35 5.35 0 0 1 2.764-3.25"/><path stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M22.6 13.584a5.54 5.54 0 0 0-2.58-2.633a7.11 7.11 0 0 0-6.38.024a5.3 5.3 0 0 0-2.828 3.482a4.48 4.48 0 0 0 .574 3.314a6.1 6.1 0 0 0 4.157 2.712a7.6 7.6 0 0 0 3.633-.24c.702.274 1.333.716 2.015 1.042a41 41 0 0 0-.564-1.756a5.7 5.7 0 0 0 1.876-2.073a4.5 4.5 0 0 0 .112-3.872z"/><path fill="#78eb7b" d="M14.813 13.282a.485.485 0 0 1 .613.617a.478.478 0 1 1-.613-.617"/><path stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M14.813 13.282a.485.485 0 0 1 .613.617a.478.478 0 1 1-.613-.617"/><path fill="#78eb7b" d="M18.968 13.27c.36-.03.616.342.462.668l-.001.001a.468.468 0 0 1-.74.128a.74.74 0 0 1-.164-.346a.525.525 0 0 1 .443-.45"/><path stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M18.968 13.27c.36-.03.616.342.462.668l-.001.001a.468.468 0 0 1-.74.128a.74.74 0 0 1-.164-.346a.525.525 0 0 1 .443-.45"/></g></svg>

最后直接粘贴即可实现