Angular

Question

我在我的一个项目中使用 primeNG。我使用 Table 从 primeNG 进行排序。我想使用自定义图标进行排序。

知道如何覆盖现有的 primeNG 图标。

PrimeNG 版本 - 6.1.4

Answer 1

为您的 table 创建一个 class 就像我创建 test-data:

<p-table #tt [value]="testdata" class="test-data" selectionMode="single" [lazy]="true"
        [lazyLoadOnInit] = "false" (onLazyLoad)="loadDataLazily($event)">
<ng-template pTemplate="header">
                <tr>
                    <th *ngFor="let col of cols" [pSortableColumn]="col.header">
                        {{col.header}}
                        <p-sortIcon [field]="col.header" ariaLabel="Activate to sort"></p-sortIcon>
                    </th>
                </tr>
            </ng-template>

现在在您的 style.css 中覆盖 css 以下并使用您自己的内容类型代码：

.test-data .pi-sort:before {
    content: "C4"
    }
    .test-data .pi-sort-down:before {
        content: "C5";
    }
    .test-data .pi-sort-up:before {
        content: "\e914";
    }

它会在您使用 class="test-data" 的地方更改 table 的图标。更多内容类型代码在这里 content-type-code 和 here

Answer 2

您可以通过图标属性使用超棒的字体图标。|

例如<button pButton type="button" icon="fa fa-user"></buton>

否则您可以自定义默认图标。

就像我在 p-table 排序图标上所做的那样...

:host ::ng-deep .pi-sort-alt:before {
  content: "\F0DC";
  font-family: "FontAwesome";
}

不要忘记将字体系列添加到“FontAwesome”

Angular - 如何使用自定义的 primeNG 图标

Angular - How to use customized primeNG icons

primeng

primeng-datatable

primeng-turbotable