Topic: Button with stacked fontawesome

vgs pro asked 4 years ago


Hello, putting stacked fa icons into a mdbootstrap button makes the characters place not at the same position. This minimal sample:
<button type="button" class="btn" >
 <span class="fa-stack"><i class="fa fa-shopping-cart fa-stack-2x" style="color:#000000"></i><i class="fa fa-check fa-stack-1x" style="color:#000000"></i></span>
 </button>
places the checkmark below the cart, see: sample It seems it has something to do with the css position property, but do you have any idea how I can fix this behavior? I dont want to set hardcoded padding / margin, as the button might have a variable size. Thank you in advance,

Marta Wierzbicka staff answered 4 years ago


Hi, this happens because our settings for icon inside button overwrite Font Awesome settings for .fa-stack. You can remove this part of code below from _buttons.scss file and then you will have default Font Awesome settings:
.fa {
font-size: 1rem;
position: relative;
vertical-align: middle;
margin-top: -2px;
}
Best, Marta

Marta Wierzbicka staff answered 4 years ago


Hi, we will try to find a good solution for this problem in our next updates. Best, Marta

vgs pro answered 4 years ago


Hello, thanks, I got it managed by overwriting those properties with inline css (I do not use scss and dont want to change anything on the mdb.css due updates). Nevertheless maybe you should try to fix this in the next version as from my point of view this is not a good behavior. Best regards

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: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags