Question

我试图在ag-grid中实现很少的自定义，例如：

更改网格标题图标 - 排序图标，过滤菜单图标，过滤菜单中不同菜单项的图标等
更改图标的位置。

有人能指出我可能的解决方案吗？

Answer 1

根据docs，您可以在加载ag-grid.css（或scss）文件和ag-theme-<themename>.css文件之后尝试使用此CSS。在我的示例中，该主题文件适用于Balham主题ag-theme-balham.css。该CSS会将图标从默认的黑色（使用SVG）更改为白色。

/*
 * The override should be placed after the import of the theme.
 * Alternatively, you can aso increase the selector's specificity.
 */
.ag-theme-balham .ag-icon-desc,
.ag-theme-balham .ag-icon-asc,
.ag-theme-balham .ag-icon-menu
{
    font-family: "Font Awesome 5 Free";
    /* FontAwesome uses font-weight bold */
    font-weight: bold;
}

.ag-theme-balham .ag-icon-desc::before
{
    content: '\f063';
    color: white;
}

.ag-theme-balham .ag-icon-asc::before
{
    content: '\f062';
    color: white;
}

.ag-theme-balham .ag-icon-menu::before
{
    content: '\f0c9';
    color: white;
}

Answer 2

这对我有用。只需覆盖颜色

.ag-theme-balham .ag-icon-menu:before,
.ag-theme-balham .ag-icon-asc:before,
.ag-theme-balham .ag-icon-desc:before,
.ag-theme-balham .ag-icon-filter:before{
  color: #FFFFFF;
}

如何自定义ag-grid图标？

2 个答案: