Button with stacked fontawesome

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,

Add comment

Marta Wierzbicka free answered 7 years ago

0 0 Best answer

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

Add comment

Marta Wierzbicka free answered 7 years ago

0 0 Best answer

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

Add comment

vgs pro answered 7 years ago

0 0 Best answer

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

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

vgs

Pro User 55Support score
8Questions 5Answers 0Snippets