PrimeNg 圖標未顯示（復選框和選擇）

Question

選中框並選擇 sans 圖標。

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

但是，有些事情仍然很糟糕，我無法顯示帶有圖標的圖標。

包.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;
}

Answer 1

您還可以在 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"
]

Answer 2

嘗試在 style.css 文件中添加導入

@import '~primeicons/primeicons.css';

Answer 3

將 style.css 中的 span 字體系列更改為

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

Answer 4

如果在接受的答案中應用建議后仍然無法看到圖標和樣式，請嘗試將 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";

Answer 5

這可能不是直接相關的，但我試圖用搜索解決類似的問題，並在文本輸入中放置一個搜索圖標。

我的問題是 z-index； 圖標在那里，但它隱藏在搜索輸入框后面！！

所以通過 CSS 設置圖標的 z-index 解決了這個問題（在我的例子中，為 1）。

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

Answer 6

如果有人仍然面臨這個問題，請檢查 webpack loader 配置。

對我來說，這個問題與 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"
            }

圖標開始正確加載。

Answer 7

您必須將DropdownModule和這個CheckboxModule以及此部分添加到您的styles.css文件中。

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