Topic: Fontawesome icons not working
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": [ ]
}
Open
- User: Pro
- Premium support: Yes
- Technology: Angular
- MDB Version: 9.4.0
- Device: Mac
- Browser: Chrome
- OS: Mac
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 6 months ago
Are there any errors in the browser console when you try to use the
mdb-iconcomponent?otejiri pro premium commented 6 months ago
no errors whatsoever
Arkadiusz Idzikowski staff commented 6 months ago
It looks like the configuration is correct. I can't be sure if the styles imports are in the proper
stylesarray (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_modulesfolder andpackage-lock.jsonfile and runnpm installcommand again to reinstall the dependencies. Make sure that the font awesome package is located in thenode_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