Font awesome Icon problem in latest update


Topic: Font awesome Icon problem in latest update

Subrata Paul pro asked 6 years ago

Dear Support Team,

After install latest MDB version 7.4.2, having problem with fontawesome icons.

Presently I'm using fontawesome 4.7, because of that MDB Icons are not working, but when switching to fontawesome 5, my existing Icons are not working.

I've used these icons so many places ..

Please provide a better solution ..

Thanks,

Subrata Paul.


junior5417 pro answered 6 years ago

I'm Getting same errors as well enter image description here


Damian Gemza staff answered 6 years ago

Hi guys,

Could you please provide me with the code which you're using? With the update to FA5, you have to change the code of the mdb-icon component.

Now there's necessary to use the icon directives: fas, far, fab.

Without your code, I won't be able to help you well.

Best Regards, Damian


junior5417 pro answered 6 years ago

<div>
          <mdb-icon fab icon="facebook-f"></mdb-icon>
          <span class="ml-3 link-href">Facebook</span>
 </div>

I copied and implemented this directly from the icon list. I'm still getting the errors loading the icon thou...


Damian Gemza staff answered 6 years ago

Dear junior,

Could you please show me the code of your package.json and angular.json files? I would like to see, if you have imported the icons styles correctly.

Best Regards,

Damian


junior5417 pro answered 6 years ago

Package.json

 {
      "name": "mdb-angular-pro",
      "version": "6.0.2",
      "license": "MIT",
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },
      "private": true,
      "dependencies": {
        "@agm/core": "^1.0.0-beta.2",
        "@angular/animations": "^6.0.0-rc.1",
        "@angular/cdk": "^6.3.2",
        "@angular/common": "^6.0.0-rc.1",
        "@angular/compiler": "^6.0.0-rc.1",
        "@angular/core": "^6.0.0-rc.1",
        "@angular/fire": "^5.0.0",
        "@angular/forms": "^6.0.0-rc.1",
        "@angular/http": "^6.0.0-rc.1",
        "@angular/material": "^6.3.2",
        "@angular/platform-browser": "^6.0.0-rc.1",
        "@angular/platform-browser-dynamic": "^6.0.0-rc.1",
        "@angular/router": "^6.0.0-rc.1",
        "@types/lodash": "^4.14.116",
        "chart.js": "2.5.x",
        "chartjs-funnel": "^1.0.5",
        "classlist.js": "1.1.x",
        "core-js": "2.4.x",
        "easy-pie-chart": "2.1.x",
        "firebase": "^5.4.2",
        "font-awesome": "4.7.x",
        "hammerjs": "2.0.x",
        "jarallax": "^1.10.3",
        "lodash": "^4.17.11",
        "moment": "^2.22.2",
        "ng-html-util": "1.0.x",
        "ng-uikit-pro-standard": "git+https://oauth2:MArKsJYomAy-Fxs5xe6G@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git",
        "ng2-fancy-image-uploader": "^2.0.1",
        "ngx-image-uploader": "^6.0.0-beta.1",
        "ngx-moment": "^3.1.0",
        "rxjs": "^6.0.0-rc.1",
        "rxjs-compat": "^6.0.0-rc.1",
        "screenfull": "3.3.x",
        "smoothscroll-polyfill": "0.3.x",
        "web-animations-js": "2.3.x",
        "zone.js": "0.8.x"
      },
      "devDependencies": {
        "@angular/cli": "^6.0.0-rc.1",
        "@angular/compiler-cli": "^6.0.0-rc.1",
        "@angular/language-service": "^6.0.0-rc.1",
        "@types/jasmine": "2.5.38",
        "@types/node": "~6.0.85",
        "codelyzer": "~3.2.0",
        "jasmine-core": "~2.5.2",
        "jasmine-spec-reporter": "~3.2.0",
        "karma": "~1.4.1",
        "karma-chrome-launcher": "~2.0.0",
        "karma-cli": "~1.0.1",
        "karma-jasmine": "~1.1.0",
        "karma-jasmine-html-reporter": "^0.2.2",
        "karma-coverage-istanbul-reporter": "^0.2.0",
        "protractor": "~5.1.2",
        "ts-node": "~3.2.0",
        "tslint": "~5.7.0",
        "typescript": "~2.7.2",
        "@angular-devkit/build-angular": "~0.5.0"
      }
    }

angular.json

{
  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "mdb-angular-pro": {
      "root": "",
      "projectType": "application",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/mdb-angular-pro",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [{
                "glob": "favicon.ico",
                "input": "src",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ],
            "styles": [{
                "input": "node_modules/font-awesome/scss/font-awesome.scss"
              },
              {
                "input": "scss/bootstrap/bootstrap.scss"
              },
              {
                "input": "scss/mdb.scss"
              },
              {
                "input": "src/styles.scss"
              }
            ],
            "scripts": [{
                "input": "node_modules/chart.js/dist/Chart.js"
              },
              {
                "input": "node_modules/easy-pie-chart/dist/easypiechart.js"
              },
              {
                "input": "node_modules/screenfull/dist/screenfull.js"
              },
              {
                "input": "node_modules/hammerjs/hammer.min.js"
              }
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [{
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
              }],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "mdb-angular-pro:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "mdb-angular-pro:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "mdb-angular-pro:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [{
              "input": "styles.scss"
            }],
            "scripts": [],
            "assets": [{
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "mdb-angular-pro-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "mdb-angular-pro:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  }
}

Everything was working fine before update to latest version. I updated my MDB thru npm install


junior5417 pro answered 6 years ago

@Damian Gemza any solution on this?


Damian Gemza staff answered 6 years ago

Dear junior,

Please remove the font-awesome library, and install the Font Awesome 5 library which is called @fortawesome/fontawesome-free, and then change the imports in angular.json file to below:

"styles": [
   "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.scss"
            ],

Best Regards,

Damian


grupozarateusa@gmail.com commented 5 years ago

I have the exact same problem after following each step on the posted solution. I can display all icons except the brand icons such as facebook, whatsapp, etc .. Is this a feature for paying members only? It worked fine for me prior to upgrading to font awesome 5! Thanks!


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.4.2
  • Device: Windows
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No