本地引入iconfont的好处

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

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

iconfont图标较小

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

font-size

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

修改icon大小

如何本地引入iconfont

下载iconfont文件

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

下载iconfont文件

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

iconfont文件

在主题中配置

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

iconfont本地引入路径

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

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

配置iconfont引入

如何让iconfont的图标旋转

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

旋转动效

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

1
2
3
4
.icon-gitee:hover {
  display: inline-block;
  transform: rotate(180deg);
}
新增hover

如何单独定制某个图标

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

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

1
2
3
4
5
6
7
8
9
.icon-gitee:before {
  content: "\e60c";
  font-size: 20px;
}
# 新增
.icon-gitee1:before {
  content: "\e60c";
  font-size: 20px;
}
  1. 如果我想让某个图标大小改变，可以采取上面的方法新建一个类修改font-size属性，也可以在引入时添加style并新增zoom属性。

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

如何使用彩色图标

使用Unicode 和 Font Class渲染的图标都是灰黑色，只有使用Symbol才是彩色图标。
下文源自iconfont的demo_index.html。

Symbol 引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

  • 支持多色图标了，不再受单色限制。
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
  • 兼容性较差，支持 IE9+，及现代浏览器。
  • 浏览器渲染 SVG 的性能一般，还不如 png。

使用步骤如下：

第一步：引入项目下面生成的 symbol 代码：

1
<script src="./iconfont.js"></script>

第二步：加入通用 CSS 代码（引入一次就行）：

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

第三步：挑选相应图标并获取类名，应用于页面：

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