[FIXED] How to vertically align icon font

Issue

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.

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;
}

<link rel="stylesheet" type="text/css" href="https://fontastic.s3.amazonaws.com/PxvnwqrSXE7pXNDNDqGp4i/icons.css">

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

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

Solution

You can try vertical-align: text-bottom or vertical-align: text-top, depending on which one you feel is more vertically centered.

For your shopping cart icon, it seems text-top is most vertically centered.

Example at: https://jsfiddle.net/p3g189bg/

Answered By - mushroom chan

Answer Checked By - Mary Flores (PHPFixing Volunteer)