How to center align font awesome icons vertically in a circle div?

You can use line-height to align the icon in the div.

Try adding this .fa-camera-retro { line-height: inherit;} to your css. Using inherit makes line-height take on the height of its containing div, so all icons will be centered even if those divs are different sizes. If you want, you can also set the line-height to the div's height in pixels to explicitly center it, ie line-height: 80px .

Here's the example working in a fiddle.

Not to detract from the above solution which functions perfectly, but Font Awesome has a great inbuilt stacking feature that can be used with the following code:

FontAwesome 4x

<span class="fa-stack fa-2x">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

Full documentation and working examples can be found here.

FontAwesome 5x

FontAwesome 5 works in exactly the same way. Just need to adjust the FontAwesome icons to match the new classes for different styles.

<span class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>

Full documentation and working examples can be found here.