如何将 PrimeIcons 与表格/网格分页器一起使用答案

【问题标题】：How to use PrimeIcons with table/grid paginator如何将 PrimeIcons 与表格/网格分页器一起使用
【发布时间】：2023-12-04 11:42:01
【问题描述】：

我正在尝试构建并且字体很棒，所以我尝试用 PrimeIcons 完全替换它

<p-table #dt id='incidents-grid' [value]='incidents' [totalRecords]='totalRecords'
    expandableRows='true' [responsive]='true' dataKey='IncidentId' *ngIf='visible'
    [rows]='5' [paginator]='true' [rowsPerPageOptions]='[5,10,50]'
    [lazy]='true' (onLazyLoad)='loadIncidentsLazy($event)' [loading]='loading'>

分页器文档不显示任何内容。

【问题讨论】：

再解释一下你的问题。您使用素数图标的步骤是什么？您可以分享任何图像或代码吗？
我在每个 package.json 中使用 Angular 6 和 primeicons 1.0.0-beta.10 和 primeng 5.2.4。我已将 'fa fa.edit' 替换为 'pi pi.pencil' 等...我删除了 @import "font-awesome/css/font-awesome.min.css";来自 style.css，然后上述 p 表的分页器有 -- 1 2 -- （缺少），并且任何下拉菜单都缺少向下插入符号。

标签： angular primeng primeng-turbotable

【解决方案1】：

我创建了我使用 primeNg 6 的场景：

第 1 步：npm install primeicons --save
第 2 步：在 style.css 或 angular.json 中导入主图标

我在 style.css 中添加了如下：

@import '../node_modules/primeng/resources/primeng.min.css';
@import '../node_modules/primeng/resources/themes/omega/theme.css';
@import '../node_modules/primeicons/primeicons.css';

并在应用中的任何位置使用 Icon：

<p-tabView class="tabdetail">
       <p-tabPanel header="Basic Info" leftIcon="pi pi-calendar">
       </p-tabPanel>
</p-tabView>

它按预期工作。确保正确导入 style.css 中的 primeicons 路径。我想你可能会错过导入图标。

【讨论】：

我的 style.css 有以下内容：@import "primeicons/primeicons.css"; @import "primeng/resources/themes/flick/theme.css"; @import "primeng/resources/primeng.min.css";
Hey DirtyMind：声明的 PrimeIcons 类铅笔、加号和垃圾按钮显示得很好。分页器和下拉菜单无法正确显示图标。在分页器和下拉控件上，未引用图标。
我可以在寻呼机和下拉菜单中正确看到图标。可能是因为你的 Primeng vs ^5.2.4。我将我的应用程序降级到 5.2.4 并出现很多错误，因此无法复制

【解决方案2】：

已更新至 PrimeNG：

"primeng": "^6.1.4",

问题就解决了。

Hey DirtyMind：您引用了不同的版本并触发了解决方案。

【讨论】：

我很高兴你得到了解决方案 :)