PrimeNg 图标未显示（复选框和选择）答案

【问题标题】：PrimeNg Icons Not Showing (Checkbox and Select)PrimeNg 图标未显示（复选框和选择）
【发布时间】：2022-04-21 02:29:44
【问题描述】：

选中框并选择无图标。

我已经添加了 primeicons 库： https://github.com/primefaces/primeng/wiki/Migration-Guide

但是，有些东西仍然很糟糕，我无法显示图标。

package.json：

...
"primeicons": "^1.0.0-beta.10",
"primeng": "6.1.2",

也有，不确定是否相关。似乎没有覆盖css，但可能

"font-awesome": "4.7.0",
"@angular/material": "^6.4.7",

html：

<p-checkbox binary="true" label="Match Note"></p-checkbox>

html 显示图标类 - 来自开发工具：

<span class="ui-chkbox-icon ui-clickable pi pi-check" ng-reflect-klass="ui-chkbox-icon ui-clickable" ng-reflect-ng-class="[object Object]"></span>

css - 来自开发工具：

.ui-chkbox .ui-chkbox-icon {
    display: block;
}
<style>…</style>
.ui-widget, .ui-widget * {
    box-sizing: border-box;
}
<style>…</style>
*, *::before, *::after {
    box-sizing: border-box;
}
<style>…</style>
.ui-chkbox .ui-chkbox-box {
    width: 1.125em;
    height: 1.125em;
    line-height: 1.125em;
    border-radius: 2px;
    text-align: center;
}
<style>…</style>
.ui-chkbox-box.ui-state-active, .ui-radiobutton-box.ui-state-active {
    border: 1px solid #156090;
    background: #186ba0;
    color: #FFFFFF;
}
<style>…</style>
.ui-state-active {
    border-color: #bebebe;
    background-color: #d6d6d6;
    color: #212121;
}
<style>…</style>
.ui-state-default {
    border: 1px solid #d6d6d6;
    background-color: #ffffff;
    color: #555555;
}
<style>…</style>
.ui-widget {
    /* font-family: "Roboto", "Trebuchet MS", Arial, Helvetica, sans-serif; */
    font-size: 1em;
}
<style>…</style>
.ui-chkbox {
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    margin-right: .25em;
    -ms-user-select: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
<style>…</style>
.ui-widget {
    /* font-family: "Roboto", "Trebuchet MS", Arial, Helvetica, sans-serif; */
    font-size: 1em;
}
<style>…</style>
.mat-card {
    background: white;
    color: rgba(0, 0, 0, 0.87);
}
<style>…</style>
.mat-card {
    /* font-family: Roboto,"Helvetica Neue",sans-serif; */
}
Style Attribute {
    visibility: visible;
}
<style>…</style>
.mat-expansion-panel {
    background: white;
    color: rgba(0, 0, 0, 0.87);
}
<style>…</style>
.mat-expansion-panel {
    background: #fff;
    color: rgba(0,0,0,.87);
}
<style>…</style>
body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
}
<style>…</style>
body {
    margin: 0;
    /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
    i": ;
    */: ;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}
<style>…</style>
html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
<style>…</style>
body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
}
<style>…</style>
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    i": ;
    */i": ;
    */: ;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}
<style>…</style>
html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
<style>…</style>
body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
}
<style>…</style>
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    i": ;
    */: ;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}

【问题讨论】：

标签： angular primeng

【解决方案1】：

尝试在 style.css 文件中添加导入

@import '~primeicons/primeicons.css';

【讨论】：

令人惊讶的是他们没有在他们的文档中提到这一点！ ?‍♂️

【解决方案2】：

您还可以在 angular.json 的“样式”部分下包含primeng.css、主题和primengicons。

"styles": [
     "../node_modules/primeng/resources/primeng.min.css",
     "../node_modules/primeng/resources/themes/nova-light/theme.css",
     "../node_modules/primeicons/primeicons.css"
]

【讨论】：

将此配置添加到 angular.json 后重启应用

【解决方案3】：

将 style.css 中的 span 字体系列更改为

span{
    font-family:'primeicons' !important
}

【讨论】：

【解决方案4】：

这可能不直接相关，但我试图通过搜索解决类似的问题，并在文本输入中放置一个搜索图标。

对我来说问题是 z-index；图标在那里，但它隐藏在搜索输入框后面！

所以通过 CSS 设置图标的 z-index 解决了这个问题（在我的例子中，设置为 1）。

.pi .pi-search {
z-index: 1;
}

【讨论】：

【解决方案5】：

如果您在应用已接受答案中的建议后仍然无法看到图标和样式，请尝试将 css 条目添加到您的 styles.scss 文件中，这就是我的情况。

@import  "~primeicons/primeicons.css";
@import  "~primeng/resources/themes/saga-blue/theme.css";
@import  "~primeng/resources/primeng.min.css";
@import  "~primeflex/primeflex.css";

【讨论】：

【解决方案6】：

如果有人仍然面临这个问题，请检查 webpack 加载器配置。

对我来说，这个问题与 webpack 加载器有关：

从以下位置更新我的 webpack 模块加载器代码后：

            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
                use: ["url-loader", "file-loader"]
            }

到：

            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader'
            },
            {
                test: /\.(ico|jpe?g|png|gif|webp|svg|mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
                loader: "file-loader"
            }

图标开始正常加载。

【讨论】：

【解决方案7】：

您必须将DropdownModule 和这个CheckboxModule 添加到您的styles.css 文件中。

@import "~primeicons/primeicons.css";
@import "~primeng/resources/themes/saga-blue/theme.css";
@import "~primeng/resources/primeng.min.css";

【讨论】：

【解决方案8】：

如primeng 中所述：在app.module.ts 中，在imports 下添加“ButtonModule”，如下所示：

...  imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule,
TableModule,
ButtonModule],

【讨论】：