Hexo -39- 使用阿里 iconfont 库图标

又见苍岚

COLMAP PatchMatch Stereo 算法详解事件驱动的状态机框架：从理论到工程实践 Git 在国内网络环境下无法 Push 的排查与修复 —— 配置 Clash 代理分段五次多项式插值原理详解路径插值方法深度对比研究 Claude Code 使用指南 OpenClaw 记忆管理与技能创建指南 CBS(Conflict-Based Search)算法详解 A* 算法及其变种详解 OpenClaw 配置多 Agents Windows Powershell 无法加载文件，因为在此系统上禁止运行脚本问题的解决方案 MaxClaw 安装流程大模型 AI 名词介绍 AList 网盘聚合工具简介 Protobuf 简介与测试 Claude Code 简介以及 GLM 4.7 模型接入 Github 歌词下载工具 163MusicLyrics Python __getattr__ 懒加载 Python TypedDict 机器人仿真平台 Gazebo 安装记录机器人仿真平台 Gazebo 简介多机器人路径规划问题(Multi-Agent Path Finding, MAPF)简介 Python exifread 读取修改过的 jpeg 信息错误问题修复 3D 坐标系变换的理解 3D 旋转矩阵基本概念 MongoDB Compass 介绍 Python 环境管理工具 uv Flutter 开发指南 Snipaste 安装下载与黑屏问题解决方案全局路径规划算法记录

Yiwei Zhang · 2023-01-11 · via 又见苍岚

在博客中经常有使用新图标的需求，阿里 iconfont 库可以提供大量内容供选择，而且是免费的。

简介

iconfont 阿里巴巴矢量图标库，它是一个字体图标平台，可以以矢量形式绘制各种图标形状，可缩放至你想要的任意尺寸而不心担心失真、与文字一样的处理方式，方便调整颜色与大小等。
使用过程免费，虽然有购物车的概念（我很长时间就被这个吓怕了，以为是收费内容）。

使用流程

注册账号

由于每个人有自己的图标库，因此需要创建账号
登录官网注册自己的 iconfont 账号
注册链接：https://www.iconfont.cn/register?spm=a313x.7781069.1998910419.36

选择图标

进入 icon 库选择中意的图标

图标加入购物车

添加到自己的项目中，没有项目可以起名字创建一个：

生成代码

选择想要使用的方式：

使用方式	示例
Unicode 模式	`<i class="iconfontyyy">3</i>`
Font class 模式	`<i class="iconfont icon-user"></i>`
Symbol 模式	<svg><symbol id="icon-train1" viewBox="0 0 1024 1024"><path d="M694.856699 0c141.129042 0 255.999817 81.700513 255.999817 182.857012v511.999635c0 98.852501-109.129065 178.870729-246.271824 182.271869l121.709627 115.419346a18.175987 18.175987 0 0 1-12.580562 31.414835H210.285616a18.175987 18.175987 0 0 1-12.580562-31.414835l121.709627-115.419346C182.271922 873.690805 73.142857 793.709147 73.142857 694.856647V182.857012c0-101.156499 114.870775-182.857012 255.999817-182.857012h365.714025z m-182.857012 767.999451a109.750779 109.750779 0 0 0 0-219.428414 109.750779 109.750779 0 0 0 0 219.428414z m329.142622-329.142622V146.28561H182.857064v292.571219h658.285245z" fill="" ></path></symbol>

对于 Hexo 博客来说建议选择 Font class 模式，选择生成代码会产生一个 css 文件链接
如果更新了图标会有按钮支持更新代码

打开链接可以看到 css 代码：

@font-face {
  font-family: "iconfont"; /* Project id 3859637 */
  src: url('//at.alicdn.com/t/c/font_3859637_pmcrclp7dvm.woff2?t=1673408286493') format('woff2'),
       url('//at.alicdn.com/t/c/font_3859637_pmcrclp7dvm.woff?t=1673408286493') format('woff'),
       url('//at.alicdn.com/t/c/font_3859637_pmcrclp7dvm.ttf?t=1673408286493') format('truetype');
}.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-train1:before {
  content: "\e742";
}
.icon-ic_fly:before {
  content: "\e6bb";
}
.icon-a-BlackHole:before {
  content: "\e95a";
}

添加到 Hexo 博客 css

建议添加到用户自定义 css 文件中，这样不会侵入主题代码
也可以放在主题中的 css 文件中
以我的 custom.css 文件为例，将代码拷贝到这个文件中：

使用图标

添加代码后我就可以使用 icon-train1、icon-ic_fly、icon-a-BlackHole 三种新的图标了
例如我添加到导航栏：

1
2
3

menu:
  - { key: "wormhole", link: "https://www.foreverblog.cn/go.html", icon: "iconfont icon-ic_fly" }
  - { key: "drive2", link: " https://www.travellings.cn/go.html", icon: "iconfont icon-train1" }

这样博客导航位置就有了新图标了：

参考资料

文章链接：
https://www.zywvvd.com/notes/hexo/website/39-iconfont/iconfont/

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

又见苍岚

简介

使用流程

注册账号

选择图标

生成代码

添加到 Hexo 博客 css

使用图标

参考资料