iconfont本地引入

本地引入iconfont的好处

Butterfly主题自带的Font Awesome图标库免费版里有好多图标没有，而阿里巴巴的开源图标iconfont里的图标非常丰富，所以可以同时引入一下iconfont图标作为Font Awesome图标库的补充。

考虑到在线引入的icon图标大小都是*16x16的，而Font Awesome图标一般都是x19的，所以看起来iconfont的图标会小一点，比如这样：

而影响iconfont图标大小的参数是iconfont.css里的font-size,所以可以将整个项目iconfont下载下来本地引入，从而实现对其图标的自定义修改。

例如我想把这个gitee的图标改大一点，就可以这样：

如何本地引入iconfont

下载iconfont文件

选好自己需要的图标并添加到购物车后，可以新建一个项目并在这个项目中看到自己刚刚添加的所有图标。点击下载至本地。

解压后可以看到这些文件，其中框住的四个文件是我们需要的。

在主题中配置

然后把这些文件都放到\hexo\themes\butterfly\source\css路径下

{% note danger flat %}

这里只能放到css路径下，放到子路径下会读不出来，具体见Hexo踩坑。

{% endnote %}

最后在主题的_config.yml文件的参数inject处引入一下iconfont就完成了。

如何让iconfont的图标旋转

我想让iconfont图标像Font Awesome图标一样鼠标放上去会旋转。

很简单，在iconfont.css中想旋转的图标后面新增这个就行。

.icon-gitee:hover {
  display: inline-block;
  transform: rotate(180deg);
}

如何单独定制某个图标

1. 如果我不想让某个图标旋转，可以新增一个类修改一下名称,然后引入的时候使用新类即可。

<i class="iconfont icon-gitee1"></i>

.icon-gitee:before {
  content: "\e60c";
  font-size: 20px;
}
# 新增
.icon-gitee1:before {
  content: "\e60c";
  font-size: 20px;
}

2. 如果我想让某个图标大小改变，可以采取上面的方法新建一个类修改font-size属性，也可以在引入时添加style并新增zoom属性。

<i class="iconfont icon-gitee1" style="zoom: 80%"></i>