Topic: Fontawesome icons not working
otejiri free 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": [ ]
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Opened
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.4.0
- Device: Mac
- Browser: Chrome
- OS: Mac
- Provided sample code: Yes
- Provided link: No
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 free 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 andpackage-lock.json
file and runnpm install
command 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