目录结构生成器

3-hexo添加自定义图标

一,添加彩色图标

---

1.1 登录并添加图标

访问iconfont,点击如下图位置登录,可以使用Github账号.

iconfont登录

登录成功后,搜索合适的图标,然后点击添加到购物车,如下图所示.

添加了多个后,可以点击右上角的”购物车”,添加到项目,点击加号创建项目,如下图所示.

添加完成后回到项目页面,找到自己刚刚创建的项目.

如果没有到项目页面,可以点击上面菜单进入:资源管理 ->我的项目

1.2 引入 3-hexo中

点击下载到本地,解压并复制其中的 iconfont.js 到项目 3-hexo/source/js/ 下,并改名 custom-iconfont.js.

在文件 3-hexo/layout/_partial/meta.ejs 最后追加下面一行.

<script src="<%=theme.blog_path?theme.blog_path.lastIndexOf("/") === theme.blog_path.length-1?theme.blog_path.slice(0, theme.blog_path.length-1):theme.blog_path:'' %>/js/custom-iconfont.js?v=<%=theme.version%>" ></script>

1.3 在配置文件中添加生效

修改 3-hexo/_config.yml 如下图所示

完成!

图标名如上面的gitee可以在网站是修改,如下图所示

二,添加黑白图标

---

link.theme=white

2.1 同 1.1

2.2 引入 3-hexo中

点击生成代码,如下图所示.

复制生成的代码,修改font-family 的值为 custom-iconfont,添加到 3-hexo/source/css/_partial/font.styl 最后并写入图标信息，content 可以移到图标上进行复制,注意前面斜杠转译和去掉后面的分号.

@font-face {
  font-family: 'custom-iconfont';  /* project id 2298064 */
  src: url('//at.alicdn.com/t/font_2298064_34vkk4c9945.eot');
  src: url('//at.alicdn.com/t/font_2298064_34vkk4c9945.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_2298064_34vkk4c9945.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_2298064_34vkk4c9945.woff') format('woff'),
  url('//at.alicdn.com/t/font_2298064_34vkk4c9945.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_2298064_34vkk4c9945.svg#iconfont') format('svg');
}
.icon-gitee:before {
  content: "\e602";
}

.icon-youtubeautored:before {
  content: "\e649";
}

2.3 在配置文件中添加生效 同1.2

结束!

• 参考叶落阁的3-hexo添加自定义图标

---

欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 1701220998@qq.com