VSCode图标显示方块或错位主因是字体缺失或连字配置冲突；需正确安装Fira Code、配置多字体回退链（如'Fira Code','Segoe UI Emoji',monospace）、启用fontLigatures并禁用干扰插件。
VSCode 里图标或符号显示为方块、问号、错位，大概率不是编码问题，而是字体缺失或连字配置冲突——Fira Code 能解决其中一类，但必须装对、配准、避坑。
为什么 VSCode 图标显示乱码？
常见现象包括：状态栏 Git 分支名旁的箭头变成 ▶ 或 □、终端里的 Unicode 符号（如 ✅、⚠️）显示为空白、扩展图标模糊或重叠。根本原因不是文件编码，而是当前 editor.fontFamily 没有覆盖所需符号范围，或开启了 editor.fontLigatures 却用了不支持连字的字体。
- Fira Code 本身不提供完整 emoji 或 UI 图标字形，它只优化编程符号（
!=→≠、=>→⇒ 等），所以别指望它修复所有“方块” - VSCode 的图标（如侧边栏、状态栏）依赖系统字体回退链，若
editor.fontFamily里只写'Fira Code'，中文/图标部分会因无 fallback 而渲染失败 - Windows 用户在高 DPI 屏幕下（缩放 125%+），即使字体装了，也可能因 Electron 渲染层未对齐导致图标像素错位
安装 Fira Code 的正确路径（跨平台）
不要直接双击 .ttf 就完事。不同系统缓存机制不同，装错位置等于没装。
- Linux（Ubuntu 22.04+）：用包管理器最稳 →
sudo apt install fonts-firacode，然后fc-cache -fv刷新；手动装请复制到/usr/share/fonts/truetype/firacode/，不是~/.fonts（后者已弃用） - macOS：Homebrew 是首选 →
brew install --cask font-fira-code；手动装务必拖进 Font Book 并选「安装字体」，不要仅双击预览后点「安装」——那只是临时加载 - Windows：解压后全选
distr/ttf/下所有 .ttf 文件 → 右键 →「为所有用户安装」；普通「安装」只对当前账户生效，VSCode 以系统级权限启动时可能读不到
VSCode 配置必须带 fallback 字体链
"editor.fontFamily": "'Fira Code', 'Segoe UI Emoji', 'Arial Unicode MS', monospace" 这种写法才是防乱码的关键。单写 'Fira Code' 会导致图标、中文、emoji 全部挂掉。
-
'Segoe UI Emoji'（Windows）、'Apple Color Emoji'（macOS）、'Noto Color Emoji'（Linux）负责彩色图标和 emoji，必须显式加入链中 - 中文显示别硬塞
Microsoft YaHei：它不是等宽字体，混用会导致光标错位；改用'YaHei Consolas Hybrid'或直接靠monospace回退更安全 -
editor.fontLigatures必须为true才能启用连字，但仅当字体真实支持——验证方式：打开 VSCode，输入!=，看是否变成 ≠；若没变，说明字体没生效或被拦截
连字开启后反而更乱？检查这三点
开了 editor.fontLigatures: true 却发现中文偏移、括号错位、注释符号消失，不是字体 bug，是配置打架。
- 禁用所有字体相关插件（如「Font Switcher」、「Custom CSS and JS Loader」），它们会劫持渲染流程
- 确认没在
settings.json里重复设置editor.fontFamily：一处在 GUI 设置里填了，另一处在 JSON 里又写一遍，容易引发解析冲突 - Linux 用户注意 fontconfig 规则：若系统级
.fonts.conf强制替换等宽字体为其他家族，Fira Code 会被静默降级——临时排查可运行fc-match monospace看实际匹配结果
真正麻烦的不是装不上，而是装上了却不知道 VSCode 正在用哪个字体文件。用 Developer: Toggle Developer Tools 打开控制台，执行 getComputedStyle(document.querySelector('.monaco-editor')).fontFamily，一眼看到真实生效的字体链——很多“乱码”问题，查到这里就结束了。
