icon fonts 插件不提示图标类名，因其仅为 snippet 模板库，不分析项目 css 文件或字体资源，仅在 class="" 内触发预设前缀补全；需配合 html css class completion 等插件扫描实际加载的 css 类名才能实现智能感知。
VSCode 安装 Icon Fonts 插件后，不会自动补全图标类名属性（比如 fa-home、mdi-account），它只提供代码片段（snippets）和基础语法提示，不注入 CSS 类名的智能感知能力。
为什么 Icon Fonts 不提示类名？
Icon Fonts 本质是 HTML/CSS 片段模板库，不是语言服务器（LS）插件。它不分析项目中实际引入的字体 CSS 文件，也不读取 node_modules 或 public/ 下的图标字体资源，因此无法动态推导出当前可用的类名列表。
- 它只在你输入
fa-、mdi-、ti-等前缀时触发预设的 snippet 补全（如fa-home→ 插入<i class="fa fa-home"></i>） - 如果你用的是自定义图标字体（比如自己导出的
iconfont.css），它完全不认识里面的类名 - 它不依赖
css-language-features，所以不会像CSS Peek那样跳转或补全真实定义
如何让 VSCode 真正“感知”图标类名？
靠 Icon Fonts 单独做不到，需组合其他机制：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 确保项目已通过
<link>或@import正确加载图标字体 CSS（例如font-awesome.min.css），否则即使有补全也无效 - 安装
HTML CSS Class Completion（推荐）：它会扫描当前打开的 HTML/CSS/JS 文件 + 所有已加载的外部 CSS，提取类名并补全；对class=""属性内自动提示图标类 - 启用
emeraldwalk.runonsave（可选）：配合构建脚本，确保每次保存时重新生成图标字体 CSS，避免补全滞后 - 禁用冲突插件：某些“CSS 提示增强”类扩展（如旧版
Auto Close Tag的样式模块）可能干扰类名解析
常见错误现象与修复
输入 fa- 没反应？检查以下几点：
-
Icon Fonts是否已启用：按Ctrl+Shift+P→ 输入Preferences: Configure User Snippets→ 查看是否有html.json或css.json中包含fa-相关 snippet - 当前文件语言模式是否为
html或css（右下角状态栏查看，不是plaintext） - 是否在
class=""双引号内触发？该插件只在属性值上下文中激活，不在 JS 字符串或注释里工作 - VS Code 版本是否 ≥ 1.82.0？低于此版本可能无法加载部分 snippet 触发逻辑
真正起作用的不是插件名字里的“Fonts”，而是你项目里有没有被识别到的 CSS 类定义 —— 这一点最容易被忽略，补全失效时先查 CSS 加载路径和网络面板是否 404，比重装插件管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
