Font awesome Icon problem in latest update

web
mobile

Topic: Font awesome Icon problem in latest update

Subrata Paul pro asked a year 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 a year ago

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


Damian Gemza staff answered a year 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 a year 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 a year 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 a year 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 a year ago

@Damian Gemza any solution on this?


Damian Gemza staff answered a year 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 8 months 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.
Status

Resolved

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