Sober的博客

欢迎大家驻足呀~

0%

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

之前被一篇文章误导了,折腾了不少时间,于是想记录下这段经历,让以后可能会遇到相似问题的朋友少踩一些坑

先从 Hexo 使用 Next 主题如何显示链接图标开始吧(下图为效果图)
01

  • 我们先打开next目录下的 _config.yml 文件,找到如下图所示部分代码(可以同时按下 Ctrl+F 键,并在输入框中输入 social 进行查找效率更高)
    02

  • 如果想显示 GitHub 字段及其相应图标,只要将 # 号键删除,然后再 hexo+s 即可看到效果。接下来,当我想给 CSDN 添加相应图标时,不小心看到一篇文章(呜呜不幸的开始),提示将 GitHub 相应位置的地址改成 CSDN 地址,然后将后面的图标 fa-github 改成 fa-csdn 。这样的结果是,无论如何都不会显示 CSDN 的图标。本人仔细观察了 Next 主题,发现其使用了 Font Awesome 图标字体库,具体位置如下图:
    03

  • 我打开了 all.min.css 文件,发现 fa-github 是可以找到的,但是 fa-csdn 却根本找不到,于是就去找了 Font Awesome 的 GitHub 源址,发现源址最新的 all.min.css 文件里也没有 fa-csdn ,这个时候我才呜呜发现,CSDN 的图标不像 GitHub ,是没有给定的(也就是说,fa-csdn 不像 fa-github ,在 Font Awesome 图标库中是不存在的),于是我在

    【 Font Awesome 文档,这里的图标基本可以直接在 Next 主题里使用不用担心,使用方法很简单,直接下拉找到喜欢的图标然后复制使用即可】

    找到比较合适 CSDN 的图标 fa-crosshairs 。但是一开始写的 fab fa-crosshairs 是不能显示图标的,然后又回去看了 all.min.css 文件,发现顶部写的字段除了 fab 还有其他的,如下图所示:
    04

  • 最后将 fab 更换成其中的一个字段 fa 时发现终于可以成功显示图标啦,具体代码如下:

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

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