Hexo使用Next主题如何更换链接图标

本来不想写的,但是被一篇无心博文误导了,深陷其中好久,于是记录一下事发经过,让后来遇到相同问题的朋友少踩一些坑。。。
先从 Hexo 使用 Next 主题如何显示链接图标开始吧(下图为效果图)
在这里插入图片描述
我们先打开next目录下的 _config.yml 文件,找到如下图所示部分代码(可以同时按下 Ctrl+F 键,并在输入框中输入 social 进行查找效率更高)
在这里插入图片描述
如果想显示 GitHub 字段及其相应图标,只要将 # 号键删除,然后再 hexo+s 即可看到效果。接下来,当我想给 CSDN 添加相应图标时,很不幸看到一篇博文,提示将 GitHub 相应位置的地址改成 CSDN 地址,然后后面的图标改成 fab fa-csdn 。这样的结果是,无论如何都不会显示 CSDN 的图标。仔细观察 Next 主题的结构,会发现其使用了 Font Awesome 图标字体库,具体位置如下图:
在这里插入图片描述
我打开了 all.min.css 文件,发现 fa-github 是可以找到的,但是 fa-csdn 却根本找不到,于是我去了 Font Awesome 的 GitHub 源址,发现源址最新的 all.min.css 文件里也没有 fa-csdn ,这个时候我才呜呜发现,CSDN 的图标不像 GitHub ,是没有给定的,于是我在
【 Font Awesome 文档,这里的图标基本可以直接在 Next 主题里使用不用担心,使用方法很简单,直接下拉找到喜欢的图标然后复制使用即可】
找到比较合适的图标。但是一开始写的 fab fa-crosshairs 是不能显示图标的,然后又回去看了 all.min.css 文件,发现顶部写的字段除了 fab 还有其他的,如下图所示:
在这里插入图片描述
将 fab 更换成其中的一个字段 fa 时发现终于可以成功显示图标啦,具体代码如下:

CSDN: https://blog.csdn.net/qq_43340547 || fa fa-crosshairs

到这里就结束啦,感谢您的支持/玫瑰~

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值