Search code examples
htmlcssfont-awesomevertical-alignment

align font-awesome icon in the middle

Im using font awesome icons. Somehow i cant seem to get them in vertically aligned in the middle.

The white part has to be in the middle of the black part. I made a pen using codepen. https://codepen.io/kevin-bobsen/pen/qKZKRX I tried:

vertical-align:middle;
text-align:center;

still not working.

Solution

  • Add line-height to your #icons id:

    #icons i {

  line-height: 30px;

}