如何自定义AG网格图标

Question

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

1. 更改网格标头图标 - 排序图标，过滤器菜单图标，过滤器菜单中不同菜单项的图标等等。
2. 更改图标的位置。

任何人都可以将我指向可能的解决方案吗？

Answer 1

根据文档，您可以在加载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;
}