How to center FontAwesome icon in css before content vertically - css

Question

I am going crazy. I have read dozens of blog articles and different stackoverflow postings but I am unable to vertically center a FontAwesome icon which is placed as content inside a css before pseudo element of a link element.
This is my CSS Code:
a.button {
background-color: green;
padding: 5px 10px;
color: #ffffff;
cursor: pointer;
position: relative;
display: inline-block;
}
a.button.forward {
padding-right: 35px;
}
a.button.back {
padding-left: 35px;
}
a.button.back:before {
font-family: FontAwesome;
content: "\f100";
font-size: 1em;
position: absolute;
top: 0;
bottom: 0;
left: 10px;
}
And thats the HTML code:
<a class="button back">back to<br/>whatever</a>
Here you can find a fiddle which shows my problem: https://jsfiddle.net/r1vysfaf/1
UPDATE:
I want to avoid using javascript to solve the styling issue. Furthermore the text of the link is dynamic and therefore it is not a solution to use "constant magic" spacings for paddings/margin/top.

Answer 1

Use display: table for parent and table-cell for child and alter your css as following:
a.button {
background-color: green;
padding: 5px 10px;
color: #ffffff;
cursor: pointer;
position: relative;
display: table;
}
a.button.forward {
padding-right: 35px;
}
a.button.back {
padding-left: 10px;
}
a.button.back:before {
font-family: FontAwesome;
content: "\f100";
font-size: 1em;
line-height: 1em;
display: table-cell;
vertical-align: middle;
padding: 0 10px 0 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a class="button back">back to<br/>whatever</a>

Answer 2

UPDATE
Added the forward button, plus position values in ems so an increase or decrease of font sizes or element will not offset the icon.
Instead of absolute , use relative on the pseudo-element.
FIDDLE
SNIPPET
a.button {
background-color: green;
padding: 5px 10px;
color: #ffffff;
cursor: pointer;
position: relative;
display: inline-block;
}
a.button.forward {
padding-right: 35px;
}
a.button.back {
padding-left: 35px;
}
a.button.back:before {
font-family: FontAwesome;
content: "\f100";
font-size: 1em;
position: relative;
top: .625em;
bottom: 0;
right: 1.25em;
}
a.button.forward:after {
font-family: FontAwesome;
content: "\f101";
font-size: 1em;
position: relative;
top: -.5em;
left: 1.25em;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<a class="button back">Back to<br/>whatever</a>
<a class="button back" style='font-size: 1.5em'>Font-size is<br/>increased by 50%</a>
<a class="button forward">Next to<br/>whatever</a>
<a class="button forward" style='font-size: .5em'>Font-size is<br/>decreased by 50%</a>