FontAwesome icons are higher up in Safari than Chrome - html

Question

I don't know why this is happening, but my FontAwesome icons are appearing offset in Safari.
In Chrome they look like this:
In Safari, like this:
Now, I'm using Foundation, React.js, and FontAwesome, so providing the CSS via JSFiddle proved very cumbersome. I tried to skin off as much as I can and make it barebones, and I believe you can still see it happening in this JSFiddle. Just look at it in Safari and then in Chrome and you should notice an offset.
Here is the JSFiddle laid out here:
HTML:
<div class="line">
<i class="fa fa-cog"></i>
<span class="name" >cfb</span>
</div>
CSS:
.line {
color: #60b0c6;
text-transform: capitalize;
}
.name {
font-size: 13px;
cursor: pointer;
width: 93%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
position: relative;
top: 6px;
left: 2px;
}
.fa-cog {
font-size: 12px;
margin-right: 4px;
opacity: 1;
cursor: pointer;
color: #333;
}
.fa {
position: relative;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
I have no idea how to fix this and am very puzzled.
Edit: Vertical align does not work on my end.

Answer 1

Adding vertical-align fixes it:
.fa {
position: relative;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
vertical-align: middle; /* Or try bottom or baseline */
}

Answer 2

Remove top and left from .name class and give vertical-align will do the trick.
Here i use vertical-align:top;
.name {
font-size: 13px;
cursor: pointer;
width: 93%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
position: relative;
vertical-align:top; //Here.
}
.fa {
position: relative;
display: inline-block;
vertical-align:top; // Here
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Working Fiddle Checked in Firefox, Chrome, Safari.

Answer 3

I think you could achieve that by defining vertical-align: middle.