Angular Mobile Icon Not Displaying


Topic: Angular Mobile Icon Not Displaying

Ryan Stephens asked 5 years ago

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:

enter image description here

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>

Arkadiusz Idzikowski staff commented 5 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 commented 5 years ago

Sure thing, I'll get one created when I'm back from work tonight. Thanks!


Ryan Stephens commented 5 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)


Arkadiusz Idzikowski staff answered 5 years ago

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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: 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