Topic: Angular Stepper Icons Broken
The "Linear Stepper" demo and my own local copy has broken links to the icons. It looks like the jquery version is working correctly.
On my personal code I'm using the Angular version of Font Awesome (using <fa-icon [icon]=""></fa-icon> instead of <i icon=""></i> format, I'm not sure if this is related to the error on my side. If so, how is that something I can configure correctly?
Thank you for letting us know about that. We will add styles for pro version as well.
anuragd7 free commented 5 years ago
the stepper documentation on website still seems to be broken /incorrect. The icons dont show
Arkadiusz Idzikowski staff commented 5 years ago
Which example from documentation do you use? Do you use Font Awesome Pro in your project?
Please try the workaround provided by @DesertFoxNV and let me know if that works for you.
ul.stepper .step.done:before { font-family: 'Font Awesome 5 Pro' !important; } ul.stepper .step.wrong:before { font-family: 'Font Awesome 5 Pro' !important; }
The Linear Stepper (MDB Pro Component) is broken.
Steps To Reproduce Error 1. Navigate to MDB Angular Linear Stepper Documentation 2. Click the continue button. 3. Observe icon error, with the stepper 1 circle containing a broken icon.![Picture showing error][1] [1]: https://ibb.co/b7j8y6N
DesertFoxNV free commented 5 years ago
Looks like the problem is that I have Font Awesome Pro. The font family property of the stepper
DesertFoxNV free commented 5 years ago
I was able to temporaily fix with the following css overrides:
ul.stepper .step.done:before { font-family: 'Font Awesome 5 Pro' !important; }
.white-skin .primary-color, .white-skin ul.stepper li.active a .circle, ul.stepper li.active a .white-skin .circle, .white-skin ul.stepper li.completed a .circle, ul.stepper li.completed a .white-skin .circle, .white-skin ul.stepper .step.active.wrong:before, ul.stepper .white-skin .step.active.wrong:before { background-color: red !important; }
ul.stepper .step.wrong:before { font-family: 'Font Awesome 5 Pro' !important; }
I figured out the problem. The website documentation is wrong. It shows to add an icon: but the correct syntax is: (removing the leading "fa-").
Please make sure that you have new fort-awesome package installed and correct imports in angular.json styles array. There is also a possibility that this specific icon name changed in font awesome 5.
If it still won't work please show me the code you use to render mdb-icon and code from package.json, angular.json and app.module.ts files.
I created a new project and followed the quick start guide exactly and I still cannot get the mdb-icon to work. Using it as works fine so I know the backend is working somehow. I don't get any errors in the console.
Please use our components for the icons and update the syntax to Font Awesome 5 if you use version 7.3.0. There are 3 new directives: fas, far and fab (for solid, regular and brands icons). For example:
<mdb-icon fas icon="fa-check"></mdb-icon>
Here you can find list of all icons with the code samples: https://mdbootstrap.com/docs/angular/content/icons-list/
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.0.0
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No