aurelia - 如何自定义 ag-grid 图标？

Question

我正在尝试在 ag-grid 中实现一些自定义，例如:

更改Grid Header的图标-排序图标、过滤器菜单图标、过滤器菜单中不同菜单项的图标等

更改图标的位置。

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

Answer 1

根据docs ，你可以在加载完ag-grid.css后试试这个CSS (或 scss)文件和 ag-theme-<themename>.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;
}