Seeking assistance with using Flexbox to align an SVG and text within a button. The alignment works perfectly in Chrome and Safari, but Firefox is presenting some challenges.
To see the issue live, check out this Codepen demonstration: Please be aware that I am importing an external CSS sheet from https://github.com/mastastealth/sass-flex-mixin/blob/master/_flex.scss.
http://codepen.io/dominicchapman/pen/EgNgoq
The SCSS code is as follows:
.Button {
border: 0 none;
height: 32px;
padding: 0 16px;
font-size: 14px;
background-color: orange;
color: white;
.Icon {
fill: white;
}
&:hover, &:active {
background: red;
}
}
.Button__icon {
@include inline-flex;
@include align-items(center);
.Icon {
margin-right: 11px;
height:16px;
width:6px
}
}
Your help on this matter would be highly appreciated. Thank you in advance.