如何修改Gitbook页面导航栏的Emoji图标？无需外部脚本

方法1：自定义CSS注入（全局生效，无需外部脚本） #

付费版Gitbook支持自定义CSS注入，通过定位目录元素类名替换图标：

• 进入Gitbook Space后台，找到「Customization」→「Theme」→「Custom CSS」
• 粘贴以下代码，替换其中的base64图标内容：

/* 替换目录中所有页面头部的图标 */
.book-sidebar .navigation-list .navigation-item > a::before {
    content: "";
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url('data:image/svg+xml;base64,你的图标文件base64编码');
    vertical-align: middle;
    margin-right: 8px;
}

/* 隐藏默认的Emoji或系统图标 */
.book-sidebar .navigation-list .navigation-item > a .icon,
.book-sidebar .navigation-list .navigation-item > a .emoji {
    display: none;
}

• 保存设置后，目录页面头部图标会全局替换（需将图标转为base64编码，避免跨域问题）

方法2：页面Front Matter全局配置 #

若付费版支持页面元数据自定义，可通过Front Matter批量设置：

• 在每个页面开头添加YAML配置：

---
icon: "data:image/svg+xml;base64,你的图标base64编码"
---

• 如需统一全局配置，可借助Gitbook的「Page Templates」功能，给所有页面批量添加该配置

方法3：联系Gitbook官方支持 #

如果上述方法无效，直接联系付费版客服：

• 付费版用户享有专属支持，可提出需求，确认是否有官方提供的全局图标替换方案

内容的提问来源于stack exchange，提问作者Andora