Topic: can't change font awesome size, when inside a button

sardaukar free asked 5 years ago

Hi, I have the following:
<div class="modal-footer p-2">
   <button id="footer-button-1" class="btn btn-primary">
       <i class="fa fa-magic fa-2x"></i>
The fa-2x has no effect on the size of the font.  It seems the following CSS rule overrides the fa-2x behavior: ------------------------- .btn .fa {     positionrelative;     font-size0.9rem;       // overrides .fa-2x etc. } ------------------------ Is the because icon size is not supported in a button?  Could you recommend a way of increasing the size of my icon when in a button? Kind Regards Daniel.

Ollie Vincent pro answered 5 years ago

So you can style icons like this: .btn .fa { font-size: 2rem;}
The btn-primary you are using also uses a font size to make the height. Try something like this: .btn-primary{font-size:2rem;}


sardaukar free commented 5 years ago

thanks for your suggestion ollie, but i managed to over-come this problem by playing around with the padding settings of the containing button. Sounds obvious now I write it. Thanks again.

Marta Wierzbicka staff commented 5 years ago

I can say from myself that we will fix this issue with icon size inside the button in the next release which we're developing now.

sardaukar free answered 5 years ago

Thankyou, this does allow the font to become bigger.

However, the button does not scale (increase in side) to accommodate the larger font.

I have found a similar problem posted here


Bootstrap allow this to happen, so your product must have changed this behaviour.  I would be willing to change your SASS files to fix this,

Could you provide some guidance?


Kind Regards


Marta Wierzbicka staff answered 5 years ago


it is because we defined sizes of icons within buttons in our sass code and they have !default flag. We will improve this in the next release. Now I can only recommend you to use CSS code:

.btn .fa {



Please insert min. 20 characters.


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



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No