btn-floating icon rises

Topic: btn-floating icon rises

Arthur priority asked 2 months 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

Add comment

Arthur priority answered 1 month ago

0 0 Best answer

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.

Add comment

Kamila Pieńkowska staff answered 2 months ago

0 0 Best answer

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

Add comment

Kamila Pieńkowska staff answered 2 months ago

0 0 Best answer

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 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.

Please insert min. 15 characters.

Kamila Pieńkowska staff commented 2 months ago

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

Arthur 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

Add comment

Write

Create snippet

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

Arthur

0Support score
3Questions 2Answers 2Snippets