Button with stacked fontawesome

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Button with stacked fontawesome

vgs pro asked 7 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 Szymanska staff pro premium answered 7 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

vgs pro answered 7 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

Marta Szymanska staff pro premium answered 7 years ago

Hi, we will try to find a good solution for this problem in our next updates. Best, Marta
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: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
About author
vgs
Pro User
55Support score
8Questions 5Answers
0Snippets likes 0Snippets