Waxy主题:社交分享图标功能介绍

warning: 这篇文章距离上次修改已过1208天,其中的内容可能已经有所变动。

如何添加

社交/分享图标设置社交/分享图标设置

# 格式(请用半角逗号分隔):名称,地址;

# 一行一条,不需要的图标不填写即可;

# 可自定义顺序;

rss,<你的网站地址/feed>
github,<你的GitHub主页地址>
facebook,<你的脸书地址>
twitter,<你的推特地址>
telegram,<你的电报地址>
email,<mailto:你的邮箱地址>
weibo,<你的微博地址>
wechat,<你的微信公众号二维码图片URL>

如何自定义

因为考虑到体积的问题(主题体积越小加载越快),我们不可能内置所有的图标。

但是,考虑到您可能有需要,我们提供了自定义CSS样式功能。

以添加码云图标为例,我们来看看如何使用这项强大的功能。

选择你喜欢的图标

任何图片都可以,但是为了美观与速度,建议选择32x32大小的图片。

这里推荐 Iconfont-阿里巴巴矢量图标库

找到你喜欢的图标,选择合适的大小,下载png图片找到你喜欢的图标,选择合适的大小,下载png图片

将下载的图片转为Base64编码

然后将图片转为Base64编码,

这样,虽然图片体积会增大(比原来的大1/3),但是在网站加载时无需进行额外的网络请求。

这里推荐使用 base64图片在线转换工具 - 站长工具

复制右侧的红框内的内容复制右侧的红框内的内容

添加自定义CSS样式

.icon-<自定义名字> {
    background-image: url(<此处粘贴你复制的字符串>);
    background-size: 100%;/*设置图片大小*/
}

添加的自定义样式添加的自定义样式

使用&效果

添加和你刚才同名的图标设置添加和你刚才同名的图标设置

大功告成~大功告成~

评论已关闭