本地引入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>