can&#039;t change font awesome size, when inside a butto

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

sardaukar free asked 6 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.

Add comment

Ollie Vincent pro answered 6 years ago

2 0 Best answer

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 free commented 6 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 6 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.

Add comment

sardaukar free answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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.

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

sardaukar

10Support score
2Questions 1Answers 0Snippets