Fontawesome 图标在 primeng 控件中显示为框

Question

我正在使用 prime ng，但无法让控件与图标一起显示。我得到的只是盒子，但是当我在主要控件之外使用 fontawesome 时，一切正常。

我使用 NPM 安装。

这是我的

index.html 页数

 <!DOCTYPE html>
    <html>

<head lang="en">
    <base href="/" >
    <title>Acme Product Management</title>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <script src="assets/scripts/angular.min.js"></script>
    <script src="assets/scripts/angular-route.min.js"></script>
    <script src="assets/scripts/angular-local-storage.min.js"></script>
    <link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />    

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>


    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>    

    <link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/CustTheme1/theme.css" />
    <link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />
    <link rel="stylesheet" type="text/css" href="/node_modules/font-awesome/css/font-awesome.min.css" />    

    <link rel="stylesheet" href="assets/css/custom.css">

    <!-- Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>
    <body>       
        <pm-app></pm-app>
        <script src="assets/scripts/jquery-3.1.1.min.js"></script>        
        <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>         
    </body>
</html>

**Package.json**

        {
      "name": "product-management",
      "version": "1.0.0",
      "author": "Deborah Kurata",
      "description": "Package for the Acme Product Management sample application",
      "scripts": {
        "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
        "tsc": "tsc",
        "tsc:w": "tsc -w",
        "lint": "tslint ./app/**/*.ts -t verbose",
        "lite": "lite-server",
        "typings": "typings",
        "postinstall": "typings install"
      },
      "license": "ISC",
      "dependencies": {
        "@angular/common": "^2.4.9",
        "@angular/compiler": "^2.4.9",
        "@angular/core": "^2.4.9",
        "@angular/forms": "^2.4.9",
        "@angular/http": "^2.4.9",
        "@angular/material": "^2.0.0-beta.2",
        "@angular/platform-browser": "^2.4.9",
        "@angular/platform-browser-dynamic": "^2.4.9",
        "@angular/router": "^3.4.9",
        "bootstrap": "^3.3.6",
        "core-js": "^2.4.1",
        "font-awesome": "^4.7.0",
        "hammerjs": "^2.0.8",
        "primeng": "^2.0.3",
        "reflect-metadata": "^0.1.3",
        "rxjs": "^5.2.0",
        "systemjs": "^0.20.9",
        "zone.js": "^0.7.7"
      },
      "devDependencies": {
        "concurrently": "^3.4.0",
        "lite-server": "^2.2.0",
        "tslint": "^4.5.1",
        "typescript": "^2.0.2",
        "typings": "^2.1.0"
      },
      "repository": {}
    }

Answer 1

有一次我用方框代替了 FontAwesome 图标，因为我用 "Open Sans" 覆盖了 font-family 属性（应用程序其余部分的字体系列）

它用 Open Sans 覆盖了 FontAwesome 的默认字体系列 "FontAwesome"，因此所有图标都显示为方框。

我会确认您的 FontAwesome 的 font-family 属性没有在某处被覆盖。希望这能解决问题...

Fontawesome 图标在 primeng 控件中显示为框

Fontawesome Icons appearing as boxes within primeng controls

font-awesome

angular2-forms

primeng