Topic: Icon inside a floating button is not centered for H1
If i insert a floating button inside H1 without specifying LARGE or SMALL (so the default size), the icon is not centered. This only happens for H1, H2 to H6 are OK. Here is my code (i have PRO version)
<main> <h1> <a class="btn-floating btn-lg black"><i class="fa fa-star"></i></a> <a class="btn-floating black"><i class="fa fa-star"></i></a> <a class="btn-floating btn-sm black"><i class="fa fa-star"></i></a> </h1> <h2> <a class="btn-floating btn-lg black"><i class="fa fa-star"></i></a> <a class="btn-floating black"><i class="fa fa-star"></i></a> <a class="btn-floating btn-sm black"><i class="fa fa-star"></i></a> </h2> </main>
Add comment
Hi,
I see this and it's because h1 has font-size 2.5rem and button icon has 1.25rem. If you need inside h1 tag only these buttons you can remove font-size from h1:
h1 { font-size: 0; }. This code will center button icon again.
Best,
Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: Priority
- Premium support: Yes
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags