跳转到内容
ShokaX Docs

Iconfont 配置

Iconfont图标

Iconfont用于在各种界面元素中显示小图标，包括导航栏、社交链接按钮、侧边栏图标、音乐播放器等。

若您希望自定义这些小图标，请遵循下列步骤：

1、接受Iconfont项目邀请

访问 Iconfont项目邀请链接 来接受邀请。

2、进入项目

为了将图标添加到您的项目，请执行以下操作：

  • 批量操作
  • 全选
  • 批量加入购物车
  • 点击购物车
  • 添加至项目
  • 点击新建项目图标
  • 输入自己的项目名称
  • 确定

3、点击项目设置

在设置中，将“FontClass/Symbol前缀”从默认的“icon-”更改为“i-”，将“Font Family”更改为“ic”，并确保选择了WOFF2、WOFF、TTF、EOT和SVG格式，然后保存。

4、生成代码

点击“没有代码，点击这里生成”，将会得到类似//at.alicdn.com/t/c/font_4415496_59g1326wajd.css的链接。

提取字符串4415496_59g1326wajd用于更新配置文件中的’iconfont’项：

# //at.alicdn.com/t/c/font_4415496_59g1326wajd.css => 4415496_59g1326wajd
iconfont: "4415496_59g1326wajd"

5、自定义iconfont图标

现在您可以向项目添加新图标或修改现有图标。如非必要，避免删除图标，因为这可能会影响渲染。

6、修改iconfont.styl文件

打开文件你的Hexo根目录/source/_data/iconfont.styl（不存在请创建）进行编辑。

在浏览器中打开您的iconfont链接（此处以//at.alicdn.com/t/c/font_4415496_59g1326wajd.css为例，请替换为实际链接）。

复制新增图标对应的以“.i-”为前缀的代码，添加到iconfont.styl文件末尾。

例如，添加Gitee图标的代码如下：

.i-gitee:before {
  content: "\e607";
}

7、在您的配置中应用

例如添加社交媒体链接中的Gitee图标，配置如下：

# 在此添加您的社交媒体链接
social:
  gitee: https://gitee.com/yourname || gitee || "#e60026"