0

I am using prime ng and I can't get the controls to appear with the icons. All I'm getting are boxes but when I use fontawesome outside the prime controls, everything works fine.

I uses NPM to install.

Here is my

index.html page 

 <!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": {}
    }
Paul Roub
  • 36,322
  • 27
  • 84
  • 93
David
  • 5,403
  • 15
  • 42
  • 72

1 Answers1

2

I had boxes appear in place of FontAwesome icons once because I overwrote the font-family attribute with "Open Sans" (my font family for the rest of the app)

It was overwriting the FontAwesome's default font-family of "FontAwesome" with Open Sans, so all the icons appeared as boxes.

I would verify that your font-family attribute for FontAwesome isnt being overwritten somewhere. Hopefully that solves it...

Dave
  • 627
  • 1
  • 7
  • 17