ChangAn 主题可用图标列表
本文档列出了 ChangAn 主题中所有可用的 iconfont 图标，共 52 个。
使用方法
在配置文件中直接使用图标名称（包含 icon- 前缀）：
[menu.main.params]
icon = 'icon-search' # 使用图标名称
# Front Matter 中
icon: 'icon-folder'
📋 完整图标列表
导航与界面
| 图标名称 | 预览 | 用途说明 |
|---|
icon-menu | ≡ | 菜单按钮 |
icon-search | 🔍 | 搜索 |
icon-close | ✕ | 关闭 |
icon-more | ⋯ | 更多选项 |
icon-share | 🔗 | 分享 |
icon-external-link | 🔗 | 外部链接 |
icon-link | 🔗 | 链接 |
icon-loader | ⌛ | 加载动画 |
方向箭头
| 图标名称 | 预览 | 用途说明 |
|---|
icon-up | ↑ | 向上 |
icon-down | ↓ | 向下 |
icon-left | ← | 向左 |
icon-right | → | 向右 |
icon-arrow-left | ← | 左箭头 |
icon-arrow-right | → | 右箭头 |
icon-arrow-left-up | ↖ | 左上箭头 |
主题切换
| 图标名称 | 预览 | 用途说明 |
|---|
icon-sun | ☀️ | 太阳（浅色模式） |
icon-moon | 🌙 | 月亮（深色模式） |
内容与分类
| 图标名称 | 预览 | 用途说明 |
|---|
icon-archive | 📦 | 归档 |
icon-folder | 📁 | 分类 |
icon-hashtag | #️⃣ | 标签 |
icon-text | 📄 | 文本 |
icon-file-list | 📋 | 文件列表 |
icon-contacts-book | 📖 | 联系人/文章 |
icon-pushpin | 📌 | 置顶/图钉 |
icon-pen | ✒️ | 写作/笔 |
icon-t-box | 📝 | T 型框 |
时间与工具
| 图标名称 | 预览 | 用途说明 |
|---|
icon-calendar | 📅 | 日历/日期 |
icon-timer | ⏱️ | 计时器/阅读时间 |
icon-pantone | 🎨 | 调色板/首页 |
icon-flask | 🧪 | 实验/项目 |
icon-computer | 💻 | 电脑/技术 |
icon-map | 🗺️ | 地图 |
icon-rocket | 🚀 | 火箭/项目 |
社交与联系
| 图标名称 | 预览 | 用途说明 |
|---|
icon-github | 🐙 | GitHub |
icon-wechat | 💬 | 微信 |
icon-qq | 🐧 | QQ |
icon-weibo | 🌊 | 微博 |
icon-telegram | ✈️ | Telegram |
icon-mail | 📧 | 邮箱 |
icon-rss | 📡 | RSS 订阅 |
社交媒体平台
| 图标名称 | 预览 | 用途说明 |
|---|
icon-instagram | 📷 | Instagram |
icon-twitter / icon-x | 🐦 | Twitter/X |
icon-codepen | ⚡ | CodePen |
icon-twitch | 🎮 | Twitch |
icon-bilibili | 📺 | Bilibili |
icon-zhihu | 📖 | 知乎 |
icon-douban | 🎬 | 豆瓣 |
icon-netease-cloud-music | 🎵 | 网易云音乐 |
游戏平台
| 图标名称 | 预览 | 用途说明 |
|---|
icon-playstation | 🎮 | PlayStation |
icon-xbox | 🎮 | Xbox |
icon-steam | 🚂 | Steam |
icon-switch | 🎯 | Nintendo Switch |
情感与交互
| 图标名称 | 预览 | 用途说明 |
|---|
icon-heart | ❤️ | 爱心 |
icon-hearts | 💕 | 多爱心/友链 |
icon-user-heart | 💝 | 用户爱心 |
icon-ghost | 👻 | 幽灵/关于 |
状态提示
| 图标名称 | 预览 | 用途说明 |
|---|
icon-check | ✓ | 成功/正确 |
icon-alert | ⚠️ | 警告 |
icon-error | ✕ | 错误 |
icon-info | ℹ️ | 信息 |
引用与版权
| 图标名称 | 预览 | 用途说明 |
|---|
icon-quotes-l | " | 左引号 |
icon-quotes-r | " | 右引号 |
icon-copyright | ©️ | 版权 |
常用图标推荐
菜单导航
# 首页
icon = 'icon-pantone' # 或 'icon-home'
# 归档
icon = 'icon-archive'
# 分类
icon = 'icon-folder'
# 标签
icon = 'icon-hashtag'
# 友链
icon = 'icon-hearts'
# 关于
icon = 'icon-ghost'
# 搜索
icon = 'icon-search'
社交链接
[[params.socials]]
name = 'Github'
icon = 'icon-github'
url = 'https://github.com/yourname'
[[params.socials]]
name = 'Email'
icon = 'icon-mail'
url = 'mailto:your@email.com'
[[params.socials]]
name = '微信'
icon = 'icon-wechat'
url = 'javascript:;'
文章 Front Matter
# 自定义图标（如果主题支持）
icon: 'icon-rocket'
添加新图标
如果需要添加新的图标，请按照以下步骤：
- 访问 iconfont.cn
- 将需要的图标添加到项目
- 下载更新后的字体文件
- 替换
static/fonts/ 目录下的文件：iconfont.woff2iconfont.wofficonfont.ttf
- 更新
assets/css/iconfont.css
注意事项
- ✅ 必须包含前缀 - 所有图标名称都必须包含
icon- 前缀 - ✅ 区分大小写 - 图标名称区分大小写，全部使用小写
- ✅ 连字符格式 - 多个单词使用连字符
- 连接 - ❌ 不要省略前缀 - 错误示例：
search（应该是 icon-search）
示例配置
hugo.toml 菜单配置
[menu]
[[menu.main]]
identifier = 'home'
name = '首页'
url = '/'
weight = 1
[menu.main.params]
icon = 'icon-pantone'
[[menu.main]]
identifier = 'archives'
name = '归档'
url = '/archives/'
weight = 2
[menu.main.params]
icon = 'icon-archive'
[[menu.main]]
identifier = 'tags'
name = '标签'
url = '/tags/'
weight = 3
[menu.main.params]
icon = 'icon-hashtag'
社交链接配置
[[params.socials]]
name = 'GitHub'
icon = 'icon-github'
url = 'https://github.com/changan0827'
[[params.socials]]
name = 'Bilibili'
icon = 'icon-bilibili'
url = 'https://space.bilibili.com/yourid'
[[params.socials]]
name = '知乎'
icon = 'icon-zhihu'
url = 'https://www.zhihu.com/people/yourname'
文档更新日期： 2026-03-04
图标总数： 52 个
主题版本： ChangAn Theme
