Topic: Angular Mobile Icon Not Displaying
Expected behavior
Attempting to use Font Awesome icons using the MDBIcon directive. I've added the FontAwesome .ttf files to my app/fonts folder, added the CSS to the global style sheet, and am using the example code from the official MDB docs.
Actual behavior
Icons are showing as this:
Resources (screenshots, code snippets etc.)
//CSS
.far {
font-family: "Font Awesome 5 Free", "fa-regular-400";
}
.fab {
font-family: "Font Awesome 5 Brands", "fa-brands-400";
}
.fas {
font-family: "Font Awesome 5 Free", "fa-solid-900";
}
//TEMPLATE:
<FlexboxLayout justifyContent="space-between" alignItems="center" style="width: 150">
<MDBIcon class="fas" name="user"></MDBIcon>
<MDBIcon class="fas text-danger" name="user"></MDBIcon>
<MDBIcon class="fas" size="5x" name="user"></MDBIcon>
</FlexboxLayout>
It looks like the information in the documentation was incorrect. The fonts folder should be placed directly in the src/ folder instead of src/app.
Sorry for the inconveniences, we already fixed the instructions in the documentation.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.0.0
- Device: NativeScript / Angular
- Browser: No
- OS: iOS / Android
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 4 years ago
On which platform did you try to run the app? Were there any errors in the console?
We tried to reproduce this problem on our end but without success. Please send a simple demo app to a.idzikowski@mdbootstrap.com so we can check if the app is configured properly.
Ryan Stephens free commented 4 years ago
Sure thing, I'll get one created when I'm back from work tonight. Thanks!
Ryan Stephens free commented 4 years ago
Sent you over an email with a zipped copy of a fresh install of the angular-mobile package with only the icons added. Are there config changes that I need to make in my package.json or angular.json files?
Also - it's worth noting that I'm running this from VS Code using an android AVD (Pixel XL API 29 / Android 10.0 x86)