Trying to create buttons with icons positioned on the left side, I stumbled upon a useful example online. However, no matter how much I tweak the code, I can't seem to get the text inside the buttons to align vertically. Working within Bootstrap 4 framework. Any assistance would be greatly appreciated!
Here's the original code snippet.
Below is the snippet of the code:
.btn {
text-align: center;
font-size: 0.7em;
text-transform: uppercase;
background: #42473d;
padding: 1em 0.5em;
color: #fff;
}
.btn-primary:before {
font-family: 'FontAwesome';
font-size: 2em;
width: (18em / 14);
float: left;
margin: -0.5em -0.2em;
padding: 0.3em 0.6em;
background-color: #292c26;
content: "\f230";
}
.btn-secondary:before {
font-family: 'FontAwesome';
font-size: 2em;
width: (25em / 14);
float: left;
margin: -0.5em -0.2em;
padding: 0.3em 0.6em;
background-color: #292c26;
content: "\f179";
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<button class="btn btn-block rounded-0">
View Using Facebook
</button>
<button class="btn btn-block rounded-0">
View Using Facebook
</button>