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 安装下载与黑屏问题解决方案全局路径规划算法记录 2025 Python 版本性能测试 Flutter Hello World Flutter 安装环境配置 Ubuntu VMware 硬盘扩容后 SMBus Host controller not enabled 报错问题解决 Python NetworkX 教程 Docker GPU 报错 - Failed to initialize NVML Unknown Error 解决方案 Python matplotlib 图表绘制 cuda-toolkit 安装替代 Cuda 与 Cudnn Jinja2 Python 利用 docxtpl 和 Jinja2 生成基于模板的 Word 文档 Docker 实现 CPU 核心隔离 LoFTR 基于 Transformer 的特征提取匹配算法 OmniGlue 特征匹配 SuperGlue 使用图神经网络学习特征匹配 Ubuntu 下将 xlsx 文件按照 sheet 转换为图片 Python 使用 SQLAlchemy Python FastAPI 教程 openwrt 软路由配置安装 Nav2 地图文件（PGM/YAML）规范标准 3D OBJ 模型转换为 glb 瓦片格式 Python 源码 Redis 数据库介绍 Ubuntu 22.04 内核自动升级导致 MongoDB 7.0.12 错误记录 ubuntu 20.04 安装 ROS Noetic ubuntu 18.04 安装 ROS Melodic VMware Workstation Pro 个人免费版下载、安装、使用指南 Hybrid A-star 路径规划 Reeds-Shepp 曲线 Dubins 曲线 Linux kvm 虚拟机网络不通的问题解决方法 Ubuntu 自动内存清理 BiliBili 缓存视频转 mp4 Python 求解线性规划 3D Gaussian Splatting 官方源码实践记录 ImageMagick 教程 Ubuntu 22.04 安装 Colmap 对数几率 odds Ubuntu nmcli 网络管理工具使用指南 SuperPoint 自监督深度学习特征点提取 SyncTV Music Tag Web 在线音乐信息整理工具 ncm 格式转 mp3 MusicBrainz 音乐元数据百科数据库 Ubuntu 网络流量监控工具私人云音乐平台 Navidrome 入门手眼标定四元数（Quaternions） OHTTPS 实现免费自动 https 证书申请、更新、部署 ubuntu 22.04 安装 CloudCompare 单机 KVM 虚拟机冷迁移 Ubuntu 22.04 使用 mdadm 实现软 raid 小鱼一键安装 ROS-humble Fluid -46- 基于 Simpletex API 构建公式识别页面公式识别 API 简介 -- Simpletex 使用 Python web 部署库 waitress 3D Gaussian Splatting for Real-Time Radiance Field Rendering Ubuntu Swap 简介与空间扩展 Ubuntu 24.04 安装 forticlient Clash Verge 使用 MongoDB 7.0.17 集群 Docker 构建源码 Error code - 2013. Lost connection to MySQL server during query 问题解决 Python 日志记录库 loguru 使用指北 Python 实现 Web 日志查看服务 MySQL LOAD DATA LOCAL INFILE 极速数据加载 Image size exceeds limit of 89478485 pixels 解决方案 Docker 使用 NVIDIA GPU 驱动错误解决阿里云 docker 镜像仓库 Ubuntu中没有wired connected的解决方案 MinIO 简介 subconverter 代理订阅格式转换修复 node –openssl-legacy-provider is not allowed in NODE_OPTIONS 错误

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

使用图标

参考资料