给hexo next扩展图标

Font Awesome相关知识

引用维基百科中的介绍

Font Awesome 是一个基于CSS和LESS的字体和图标工具套件。它由Dave Gandy制作,用于Twitter Bootstrap,后来被整合到BootstrapCDN 中。Font Awesome在使用第三方Font Scripts的网站中占有20%的市场份额,排在Google字型之后的第二位。

简单的说,Font Awesome是一个图标库,当你的博客需要使用一个图标时(比如

由于next已经使用了Font Awesome,所以只需要插入:

1
<i class="fab fa-github"></i>

即可。具体的Font Awesome使用方法可以看菜鸟教程

第三方图标库的使用

由于Font Awesome图标不包含如B站,知乎这类中国大陆网站的图标,所以如果需要使用的话需要额外自行添加第三方的图标库,在这里,我们使用使用阿里巴巴矢量库

下载图标

首先,我们在阿里巴巴图标库挑选需要的图标,具体可以使用搜索功能进行搜索,在图标上点击添加入库将其加入库中,之后点击右上方购物车图标,点击下载代码获得一个压缩文件

使用下载的图标

打开文件中的iconfont.css,将其中的内容(比如这样)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1589906807175'); /* IE9 */
src: url('iconfont.eot?t=1589906807175#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('iconfont.woff?t=1589906807175') format('woff'),
url('iconfont.ttf?t=1589906807175') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1589906807175#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-douban:before {
content: "\f01c8";
}

.icon-csdn:before {
content: "\e60a";
}

.icon-zhihu:before {
content: "\e69a";
}

.icon-tubiaozhizuo-:before {
content: "\e60b";
}

.icon-bilibili-line:before {
content: "\e75d";
}

全部复制到\blogs\themes\next\source\lib\font-awesome\css\all.min.css后边。这样,就可以使用新添加的图标了

<i class="iconfont icon-bilibili-line"></i>

在侧栏的社交链接中加入bilibili

打开blog\themes\next\_config.yml,搜索找到sidebar下的social:增加

1
bilibili: https://space.bilibili.com/B站id || iconfont icon-bilibili-line

修改完如下:

1
2
3
4
5
6
7
8
9
10
11
12
social:
#GitHub: https://github.com/yourname || fab fa-github
#E-Mail: mailto:yourname@gmail.com || fa fa-envelope
#Weibo: https://weibo.com/yourname || fab fa-weibo
#Google: https://plus.google.com/yourname || fab fa-google
#Twitter: https://twitter.com/yourname || fab fa-twitter
#FB Page: https://www.facebook.com/yourname || fab fa-facebook
#StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
#YouTube: https://youtube.com/yourname || fab fa-youtube
#Instagram: https://instagram.com/yourname || fab fa-instagram
#Skype: skype:yourname?call|chat || fab fa-skype
bilibili: https://space.bilibili.com/B站id || iconfont icon-bilibili-line

把B站id换成你的B站id即可

-------------end-------------