Topic: Icon inside a floating button is not centered for H1

giorgio.ponza priority asked 7 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 7 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

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