How to vertically align icon font

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.

 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>

Answer 1

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/

Answer 2

You can try for vertical-align:middle;

or line-height:1;

or using padding property you can set icon position

example using vertical:middle; property js fiddle: http://jsfiddle.net/vrcarwrj/

Answer 3

Try using line-height attribute

You can set it to 0.5,1,1.5 etc

Answer 4

Alternatively to the above, using the span element method you describe, you could relatively position the span tag, relative to its parent div element.

Like:

div{
 position: relative;
}    
span.icon-shopping-cart{
 position: relative;
 top: 5px;
}

Answer 5

You can try using valign: middle

and/or then setting the line-height to 1px, 1.5px, etc.

Answer 6

Another nowadays example via Flexbox.

 span { font-family: helvetica, arial, sans-serif; display: inline-flex; align-items: center; padding: 0 1rem; font-size: 3rem; line-height: 4rem; border: 1px solid #ffb0d1; } /* target all Font Awesome 5 <svg> tags */ .svg-inline--fa { padding-right: 1.5rem; }

 <script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js"></script> <span> <i class="fas fa-shopping-cart"></i> Shopping Cart </span>