Topic: btn-floating icon rises
Hello, I'm looking for a solution to my following problem. When I click on btn-floating, the font-awesome icon pops up. I can't correct the problem. I'm attaching the screenshots.
here's my button link :
<a class="btn btn-floating btn-secondary"
href="#"
data-mdb-toggle="tooltip"
data-mdb-ripple-init=""
aria-label="Ajouter une sortie"
data-mdb-original-title="Ajouter une sortie">
<i class="fa-duotone fa-grid-round-2-plus fa-lg"></i>
</a>
Link screenshot : https://ibb.co/5j07dc0
Is this full code needed? Can you replicate this in the snippet? Please prepare one I wasn't able to replicate that.
Arthur pro premium priority commented 2 months ago
This is a snippet of the button bug : https://mdbootstrap.com/snippets/standard/arthur-etienneifts-sls-com/6249343
I can't figure out what the problem is. I've noticed that when the icon has the “fa-solid” class, the problem appears. If you use “fas” instead of “fa-solid”, the problem disappears. I should point out that on icons with the class “fa-duotone” the problem also appears. You can't test it on the snippet because you need the fontawesome license. But on my project I use them and I have this problem.
Kamila Pieńkowska staff commented 2 months ago
Please publish the snippet. What version of font-awesome are you using?
Arthur pro premium priority commented 2 months ago
The snippet is now published and the version of Font Awesome Pro 6.5.1
https://mdbootstrap.com/snippets/standard/arthur-etienneifts-sls-com/6249343
After reviewing styles for .btn-floating I can tell you need to have one of this classes on icon for proper styling: .fas, .far, .fab
After reading your message, I did some tests with font-awesome “fa-duotone” icons and I added the “fas” to the class, which gives “fa-duotone fas” and now I don't have the problem anymore. Even if I don't understand why it produced this problem. I can confirm that this solution works. I hope it will be useful to others who encounter this problem.
Thank you.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 8.0.0
- Device: web
- Browser: firefox
- OS: windows
- Provided sample code: No
- Provided link: Yes