Topic: btn-floating icon rises

Arthur priority asked 1 month ago


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


Arthur priority answered 1 month ago


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.


Kamila Pieńkowska staff answered 1 month ago


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


Kamila Pieńkowska staff answered 1 month ago


Is this full code needed? Can you replicate this in the snippet? Please prepare one I wasn't able to replicate that.


Arthur priority commented 1 month 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 1 month ago

Please publish the snippet. What version of font-awesome are you using?


Arthur priority commented 1 month 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



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • 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