Search code examples
htmlcssgoogle-chromesafarifont-awesome

FontAwesome icons are higher up in Safari than Chrome

I don't know why this is happening, but my FontAwesome icons are appearing offset in Safari.

In Chrome they look like this:

enter image description here

In Safari, like this:

enter image description here

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.

Solution

  • 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 */
}