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

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: can't change font awesome size, when inside a button

sardaukar asked 7 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>
   </button>
</div>
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 {     position: relative;     font-size: 0.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 7 years ago

Hi,
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;}

Thanks

sardaukar commented 7 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 Szymanska staff pro premium commented 7 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.

Marta Szymanska staff pro premium answered 7 years ago

Hi,

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 {
     font-size: 2rem;

}

Best,
Marta

sardaukar answered 7 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

https://mdbootstrap.com/support/fontawesome-scaling/

 

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

Daniel.

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

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
sardaukar
10Support score
2Questions 1Answers
0Snippets likes 0Snippets