Topic: Font awesome Icon problem in latest update
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.
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 free 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!
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
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
<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...
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: 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