l

lizilong

V1

2023/01/09阅读:16主题:默认主题

iconfont本地引入

本地引入iconfont的好处

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

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

iconfont图标较小
iconfont图标较小

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

font-size

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

修改icon大小

如何本地引入iconfont

下载iconfont文件

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

下载iconfont文件

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

iconfont文件

在主题中配置

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

iconfont本地引入路径

{% note danger flat %}

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

{% endnote %}

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

配置iconfont引入

如何让iconfont的图标旋转

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

旋转动效
旋转动效

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

.icon-gitee:hover {
  display: inline-block;
  transformrotate(180deg);
}
新增hover

如何单独定制某个图标

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

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

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

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

分类:

后端

标签:

后端

作者介绍

l
lizilong
V1