Fontawesome icons not working


Topic: Fontawesome icons not working

otejiri asked 4 years ago

When I enter <mdb-icon fas icon="camera-retro"></mdb-icon> nothing shows up, it is the same for every other icons I have tried. Below is my package.json and angular.json

PACKAGE.JSON

   {
  "name": "egbmat",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-redux/store": "^10.0.0",
    "@angular/animations": "~9.0.5",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~9.0.5",
    "@angular/compiler": "~9.0.5",
    "@angular/core": "~9.0.5",
    "@angular/forms": "~9.0.5",
    "@angular/material": "9.2.4",
    "@angular/platform-browser": "~9.0.5",
    "@angular/platform-browser-dynamic": "~9.0.5",
    "@angular/router": "~9.0.5",
    "@fortawesome/fontawesome-free": "^5.15.0",
    "@ngrx/effects": "^10.0.0",
    "@ngrx/entity": "^10.0.0",
    "@ngrx/store": "^10.0.0",
    "@ngrx/store-devtools": "^10.0.0",
    "@types/chart.js": "^2.9.24",
    "animate.css": "^4.1.1",
    "bootstrap": "^4.5.2",
    "chart.js": "^2.5.0",
    "easy-pie-chart": "^2.1.7",
    "google-libphonenumber": "^3.2.13",
    "hammerjs": "^2.0.8",
    "intl-tel-input": "^17.0.3",
    "lac-mat-tel-input": "^2.0.0-alpha.1",
    "libphonenumber-js": "^1.8.1",
    "ng-uikit-pro-standard": "git+https://oauth2:*****@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git",
    "ngx-bootstrap": "^6.1.0",
    "ngx-skeleton-loader": "^2.4.4",
    "redux": "^4.0.5",
    "rxjs": "^6.5.5",
    "screenfull": "^3.3.0",
    "tslib": "^1.13.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1001.3",
    "@angular/cli": "~9.0.5",
    "@angular/compiler-cli": "~9.0.5",
    "@angular/language-service": "~9.0.5",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.7.5"
  }
}

ANGULAR.JSON

"styles": [
              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
              "./node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
              "./node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
              "./node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
              "./node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
              "./node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
              "src/styles.css"
            ],
            "scripts": [ ]
          }

Arkadiusz Idzikowski staff commented 4 years ago

Are there any errors in the browser console when you try to use the mdb-icon component?


otejiri commented 4 years ago

no errors whatsoever


Arkadiusz Idzikowski staff commented 4 years ago

It looks like the configuration is correct. I can't be sure if the styles imports are in the proper styles array (there is more than one styles array in the angular.json file), but in this case, non of the MDB components would work.

Please try to remove the node_modules folder and package-lock.json file and run npm install command again to reinstall the dependencies. Make sure that the font awesome package is located in the node_modules.

In case of any further problems, please prepare a simple demo on which we will be able to reproduce this problem and send it to a.idzikowski@mdbootstrap.com


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.4.0
  • Device: Mac
  • Browser: Chrome
  • OS: Mac
  • Provided sample code: No
  • Provided link: No