AG Grid列筛选列表复选框图标缺失问题求助

问题概述 #

使用AG Grid展示和编辑数据时，列筛选列表中的复选框仅边框变色，无法显示勾选图标；尝试官方文档中的自定义图标方案后，图标仍不可见，期望效果与官方示例一致。

核心排查方向 #

• 全局样式冲突：项目中的全局CSS重置或自定义样式可能覆盖了AG Grid复选框的伪元素（::before/::after），导致图标无法渲染。比如全局设置*::before { content: none !important; }会直接清除AG Grid依赖的图标内容。
• 图标字体加载失败：AG Grid默认图标依赖内置字体文件，若字体未成功加载（路径错误、网络拦截），图标会无法显示。
• 版本兼容性问题：当前使用的AG Grid版本可能存在筛选复选框的已知BUG，与官方示例版本不匹配。
• 自定义主题缺失配置：若使用了AG Grid自定义主题，可能遗漏了筛选复选框图标的样式定义。

具体解决步骤 #

1. 排查并修复全局样式冲突
   搜索项目中是否存在覆盖伪元素内容的全局规则，针对AG Grid容器添加例外：

   .ag-root *::before, .ag-root *::after {
     content: inherit !important;
   }
   

2. 验证图标字体加载状态
   打开浏览器开发者工具的Network面板，筛选「Font」类型，确认AG Grid的字体文件（如agGridIcons.ttf）是否成功加载。若加载失败，检查项目静态资源路径配置，或手动将字体文件放置到正确的静态资源目录。

3. 对齐官方示例版本
   查看官方示例的AG Grid版本（可在示例页面控制台执行agGrid.version获取），将项目中的AG Grid版本切换至相同版本，验证是否为版本BUG导致。

4. 补全自定义主题样式
   若使用自定义主题，在主题CSS中添加复选框勾选图标的样式定义：

   .ag-checkbox-checked .ag-checkbox-input::after {
     content: "\f00c";
     font-family: "agGridIcons";
     font-size: 12px;
   }
   

5. 强制自定义勾选图标
   若以上方法无效，可直接用纯CSS自定义勾选图标，绕过AG Grid的字体依赖：

   .ag-set-filter-item-checkbox .ag-checkbox-checked .ag-checkbox-input::after {
     content: "✓";
     color: #fff;
     font-size: 10px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
   .ag-set-filter-item-checkbox .ag-checkbox-checked .ag-checkbox-input {
     background-color: #0066cc;
     border-color: #0066cc;
   }
   

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