禁用嵌入式样式后Telerik RadGrid筛选图标显示为空白方块如何解决

问题原因 #

你为Telerik控件设置EnableEmbeddedBaseStylesheet="false"、EnableEmbeddedSkins="false"属性后，控件默认内置的图标字体资源、基础样式都会被禁用，筛选图标依赖的内置字体图标无法正常加载渲染，就会显示为无内容的方块。

修复方案 #

• 手动引入Telerik基础样式与皮肤样式：从Telerik控件安装目录的Skins资源包中，将Common文件夹下的公共样式文件、你需要使用的对应皮肤的Grid控件样式文件复制到你的项目静态资源目录，在页面头部手动引用：

<link rel="stylesheet" href="你的项目静态资源路径/Common/telerik.common.css" />
<link rel="stylesheet" href="你的项目静态资源路径/Skins/[你使用的皮肤名称]/Grid.[皮肤名称].css" />

• 检查图标字体资源路径：确保CSS文件中引用的.woff、.ttf等Telerik图标字体文件的相对路径正确，没有出现资源加载404的问题
• 若你不想使用官方内置图标，也可以通过CSS自定义覆盖筛选图标样式：

.rgFilterIcon::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(你的自定义筛选图标本地路径) no-repeat center / contain;
  vertical-align: middle;
}

修复完成后刷新页面即可正常显示预期的黑色筛选图标。

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