前言

为什么写这篇文章？

Font Awesome 无论是 v4 还是 v5 图标都有一些局限性。因此不少小伙伴想到了使用阿里 iconfont 图标。然而很多小伙伴并不是前端这个专业，可能对使用图标存在一定的问题。

因此创作这篇水文，帮助小伙伴解决无法引入阿里 iconfont 图标的问题。

什么人能够使用？

理论上来说任何主题任何驱动都可以。只要你的网页还是 HTML+CSS。

引入并不是什么难事，这篇文章只是给小白看的，有相关经验或者大佬可以直接关掉这篇水文了。

引入前的准备

能够登录阿里iconfont

认识汉字及部分单词（content、class等）

具备一定的前端知识：了解什么是标签

具备一定的前端知识：能够使用开发者工具

具备一定的前端知识：能够找到相应的标签

具备一定的前端知识：明白css的语法

其他说明

此教程理论上可以在任意主题（需自己具备一定的能力）使用，此主题只以 butterfly（版本：2.3.5）主题为例。

建立项目

进入阿里 iconfont寻找你想要添加的图标，并且添加到项目。

  1. 找到你想添加的图标（如果你不会找，可以直接关掉此文了。）

    将你想要添加的图标点击“添加入库”按钮，也就是图中圈起来的图标。

  2. 添加至项目

    点击右上角小购物车图标。这里会看到你刚刚添加的所有图标

    接下来就是为你的图标创建一个项目，名称随意。创建完成后你将看到如下页面

  3. 生成在线链接

    （font class方式）点击 Font class 按钮然后生成链接。

    如果使用svg，那么请点击symbol，然后生成链接。

  4. 查看链接

    点击链接会看到一些 css 代码。将鼠标下拉会看到刚才你添加的样式。

引入字体及样式

引入字体样式其实就是把刚才的链接引入到博客中，可以直接使用阿里的链接，也可以下载下来。为了方便方便修改，我建议下载下来放到本地。

同样以 butterfly 主题为例：

  1. 下载

    右键另存为即可。路径选择\themes\Butterfly\source\css\

  2. 引入文件

    image-20200507182051871

不同主题引入外部 css/js 的方法都不相同，请参考你所使用主题引入外部样式的设置。

如果你不想自己创建而是想直接使用博主的，那么可以直接把链接换成：https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@master/Hexo/css/iconfont.min.css。

图标库预览：https://blog.antmoe.com/iconfont/

  1. 如果使用svg

    如果使用svg图标，那么需要在css样式表中加入如下样式。如果使用FontClass，那么可以无视这一步

    1
    2
    3
    4
    5
    6
    7
    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }

开始使用 iconfont

上述步骤全部完成后，那么接下来可以使用小图标了。

个人信息栏的小图标–font字体方式

这里直接写阿里提供的样式即可。

1
2
social:
  iconfont  icon-bilibili: https://www.bilibili.com

小图标如果你觉得小，可以自行修改。

1
2
3
4
5
6
7
.icon-bilibili:before {
  content: "\e600";
  /* 修改颜色 */
  color: blue;
  /* 修改大小 */
  font-size: 24px;
}

这样修改会导致所有这个图标的大小都会变动。建议的方式是重新写一个 css，为其添加规则。设置时只需要多加一个 class 即可例如：

1
2
3
4
5
6
7
8
9
10
.icon-bilibili:before {
  content: "\e600";
}
/* 卡片处小图标 */
.card_icon {
  /* 修改颜色 */
  color: blue;
  /* 修改大小 */
  font-size: 24px;
}

设置时的方法：

1
2
social:
  iconfont  icon-bilibili card_icon: https://www.bilibili.com

个人信息栏的小图标–svg方式

svg也称多色图标，由于不是通过类名，而是使用了svg标签，因此需要通过脚本的方式动态插入。例如：

1
2
3
$(".card-info-social-icons").append(
    '<a class="social-icon" href="点击图标后的地址（须完整）" target="_blank"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxxx"></use></svg></a>'
);

其中两个空分别表示地址，例如https://blog.antmoe.com,另外一个为图标名，例如#icon-QQ，名字根据你自己库来写，不是随便写的。

image-20200628211324448

标题美化处的修改

butterfly 主题的标题标签前有一个图标，如何为其更改为阿里 iconfont 呢？

通过开发者工具我们可以看到主题为前边小图标的样式：

因此我们改动起来也很简单，只需要在刚才我们的iconfont.css文件中覆盖这个样式即可。

1
2
3
4
5
6
7
8
9
#article-container h1:before,
#article-container h2:before,
#article-container h3:before,
#article-container h4:before,
#article-container h5:before,
#article-container h6:before {
  font-family: "iconfont";
  content: "\e6a0";
}

此时就能看到图标已经发生了变化。

这里解释下代码，方便大家自行决策如何修改。

font-family是必须写的，因为作者的代码只写了 FontAwesome，因此需要覆盖他。

content可以不在 css 中写，这样可以在配置文件里定义内容。如果写了，会导致配置文件的设置失效。颜色设置同理.

其他修改

不管是什么主题,不管是什么样式.只要你想使用阿里的图标,必须改变其标签的字体为iconfont,接下来可以用伪类方式,也可以使用 class 方式。

文章中使用svg也很简单，首先需要确保全局引用了js。如果没有，在文中局部引入也是可以的。

接下来只需要在需要的地方插入svg标签即可。

1
2
3
<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

最后

如果你遇到了如下问题,请向上查找解决方案.

  1. 修改图标大小及颜色

  2. 图标不显示(无效果)

    这种原因很多种,但如果你稍有常识就不会遇到.

  3. 不知道在哪改

    在你创建的 css 文件中.