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>

example

Can you provide a JSFiddle ? – WonkierSteam9 Feb 25 '15 at 09:57 — WonkierSteam9, Feb 25 '15 at 09:57
`vertical-align: middle; display: inline-block`? – Morpheus Feb 25 '15 at 10:00 — Morpheus, Feb 25 '15 at 10:00
What kind of iconic font do you use? Please share link – Ivan Gerasimenko Feb 25 '15 at 10:10 — Ivan Gerasimenko, Feb 25 '15 at 10:10
https://jsfiddle.net/crphowLg/7/ – Pbinder Feb 26 '15 at 09:22 — Pbinder, Feb 26 '15 at 09:22

score 2 · Accepted Answer · answered May 07 '15 at 07:03

2

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 May 07 '15 at 07:03

mushroom chan

36
5

I was trying bottom instead of text-botton. Thanks a lot. – Pbinder May 08 '15 at 15:56

Penny Liu · Answer 2 · 2020-03-11T08:01:34.800

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>

Swapnil Motewar · Answer 3 · 2015-02-25T10:07:56.020

0

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/

edited Feb 25 '15 at 10:07

answered Feb 25 '15 at 10:00

Swapnil Motewar

1,080
6
12

score 0 · Answer 4 · answered Feb 25 '15 at 10:06

0

Try using line-height attribute

You can set it to 0.5,1,1.5 etc

answered Feb 25 '15 at 10:06

Vignesh Subramanian

7,161
14
87
150

score 0 · Answer 5 · answered Feb 25 '15 at 10:17

0

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

answered Feb 25 '15 at 10:17

Julian Veling

357
2
13

score 0 · Answer 6 · answered Feb 25 '15 at 12:30

0

You can try using valign: middle

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

answered Feb 25 '15 at 12:30

MJ95

459
1
6
22

How to vertically align icon font

6 Answers6