icons - 如何更改 PrimeNG-Dropdown 的图标

问题描述

我一直在尝试更改 primeNG 默认提供的图标。我很接近，但有些东西我不明白。

我在我的 component.ts 中创建了一个带有字体真棒图标值的 var。在模板中，我使用 var 的值分配了一个属性 [dropdownIcon]。当我签入时，浏览器显示一个空方块。调试我已经看到，如果我取消选中 .ui-dropdown-trigger-icon:before 的属性“内容”，则会正确显示图标，但我不知道如何在我的代码中删除它。

如果可能的话，我想知道如何删除框的边框，我已经尝试过但没有任何效果。

header.component.ts

card="fas fa-id-card fa-lg";

header.component.html

<p-dropdown [dropdownIcon]="card" [options]="products" [(ngModel)]="selectedProduct" optionLabel="label" placeholder="Registro"></p-dropdown>

header.component.scss

我试过了，不成功（什么都不显示）

:host {
  ::ng-deep .ui-dropdown-trigger-icon:before{
    content: "";
  }
}

调试的捕获：

现在如何显示 unckeck的结果

标签： iconsfont-awesomeprimengangular7primeng-dropdowns

你可以试试这个：

.fa-id-card:before {
    content: "\f2c2" !important;
}

要删除框边框，请将属性添加到 p-dropdown：

[style]="{'border': 'none'}"

这是演示

icons - 如何更改 PrimeNG-Dropdown 的图标

问题描述

解决方案

推荐阅读