How to vertically align text with icon font pseudo element

Question

I am trying to vertically align font icons. I have tried "vertical-align: middle" but I always get a little align difference. The following example has 2 different ways to use the icons and they are not aligned correctly.

An example on Jsfiddle: https://jsfiddle.net/crphowLg/7/

<link rel="stylesheet" type="text/css" href="https://fontastic.s3.amazonaws.com/PxvnwqrSXE7pXNDNDqGp4i/icons.css">
<style>
div {
    font-size: 50px;
    font-family: helvetica,arial,sans-serif;
    text-transform: uppercase;
    background: yellow;
}
.cart {
    margin-top: 20px;
}
.cart:before {
    font-family: "fanatic-icons" !important;
    font-weight: normal;
    content: "b";
    margin-right: 5px;
    vertical-align: middle;
    text-transform: none;
}
</style>

<div>
<span class="icon icon-shopping-cart"></span>
    Shopping Cart
</div>

<div class="cart">
    Shopping Cart
</div>

Thank you.

Answer 1

I think it difference size of font. Because you using fanatic-icons font for it. So i think you try add padding for cart::before

display: inline;
font-family: "fanatic-icons" !important;
font-style: normal !important;
font-variant: normal !important;
font-weight: normal !important;
padding-bottom: 15px; //added it
text-transform: none !important;
vertical-align: middle;

goodluck !

Answer 2

DEMO

.cart:before {
  font-family: "fanatic-icons" !important;
  font-weight: normal;
  content: "b";
  margin-right: 15px;
  vertical-align: middle;
  text-transform: none;
  float: left;
}

Giving it float left and adjusting the margin-right will make it fit at the middle.

Answer 3

Update your css like below. I have added a class to your HTML as well. This can be achieved by using display:inline-block; and float properties in css

DEMO

CSS

div {
font-size: 50px;
font-family: helvetica,arial,sans-serif;
text-transform: uppercase;
background: yellow;
}

.cart {

display :inline-block;
width : 50%;

}

.cart1{
display: inline-block;
width:50%;
float:right;


}

.cart:before {
font-family: "fanatic-icons" !important;
font-weight: normal;
content: "b";
margin-right: 5px;  
text-transform: none;
}

HTML:

<div class ="cart1">
    <span class="icon icon-shopping-cart"></span>
    Cart
</div>

<div class="cart">
    Cart
</div>