1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Icon inside a floating button is not centered for H1

giorgio.ponza priority asked 6 years ago

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>

Marta Wierzbicka staff answered 6 years ago

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
Write
Create snippet
Please insert min. 20 characters.

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
About author
giorgio.ponza
87Support score
10Questions 3Answers 3Snippets