纯白的小站

给hexo next扩展图标

发表于
由于hexo next主题采用了Font Awesome图标（不包含如B站，知乎这类中国大陆网站的图标）所以如果需要使用的话需要额外自行添加

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-------------