给博客添加自定义的图标

在用惯了fluid官方介绍的icon图片后，想要添加一些自己的icon，改如何使用呢？

比如，我的页面需要一个公众号icon ，官方提供的icon图标里就没有，就只能自己想办法寻找添加了。

所幸，官方还提供了一个扩展点, 本文就详细介绍如何利用阿里巴巴的iconfont来添加自定义的图标的操作流程。

注册阿里iconfont

点击iconfont 注册账号。

然后就可以在这个网站里寻找自己喜欢的图标了，2000w个图标，总有一款你喜欢的，如果不喜欢，还可以自己制作，上传自己的icon。

将选择好的icon，加入到自己的iconfont项目里，然后就可以使用了。

网站引入icon

想要让自己的网站里使用我们在iconfont里选择的icon，有两种方式：

1. 直接将对应的icon下载下来，然后自定义css脚本

.icon {
    /* 设置背景图的路径，可根据实际情况修改 */
    background-image: url('path/to/your/icon.png'); 
    /* 背景图不重复 */
    background-repeat: no-repeat; 
    /* 背景图覆盖元素 */
    background-size: cover; 
    /* 元素的宽度 */
    width: 30px; 
    /* 元素的高度 */
    height: 30px; 
    /* 可根据需要添加其他样式 */
    display: inline-block; 
}

接着在_config.yml配置文件里引入自定义的css

custom_css:
  - /css/custom.css # 自定义css路径, 可多个

然后，我们就可以在网站的任意地方（包括文章）里使用自定义的icon了：

<i class = 'iconfont icon-word'></i>

2. 使用iconfont官方的css引入方式

使用自定义css的方式，灵活度很高，但比较繁琐。

其实iconfont官方已经提供了在线的css方式，供我们在线引入使用。

进入我的项目，点击查看在线链接，可以看到我们项目下收藏的图标的会全部打包进一个在线css链接里，这是一个绝对路径，前面加上http或https就能在线访问了。

接着，将这个css链接复制，在自己的项目下source/css目录，新建一个custom.css文件(随意命名)，存储这个路径。

@import url('//at.alicdn.com/t/c/xxx.css');

也可以点击这个路径，查看里面的内容，然后将内容复制到这个css文件中，这样还可以对样式进行修改。

@font-face {
  font-family: "iconfont"; /* Project id 4835676 */
  src: url('//at.alicdn.com/t/c/xxx.woff2?t=1740236137377') format('woff2'),
       url('//at.alicdn.com/t/c/xxx.woff?t=1740236137377') format('woff'),
       url('//at.alicdn.com/t/c/xxx.ttf?t=1740236137377') format('truetype');
}

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

.icon-gongzhonghao:before {
  content: "\eb79";
}

.icon-word:before {
  content: "\e7d4";
}

接着，就和自定义css一样，在_config.yml配置文件里引入自定义的css

custom_css:
  - /css/custom.css # 自定义css路径, 可多个

最后，我们就可以在网站的任意地方（包括文章）里使用自定义的icon了：

<i class = 'iconfont icon-gongzhonghao'></i>

这个方式更简单，推荐使用这种方式。