Icon Style has different results than Icon Class

Question

I am trying to use the Font-Awesome icons in my site.

I have the following HTML:

<a href="some-link"><center><h2><i class = "fa fa-hdd-o" style = "color:black;vertical-align:middle;font-size:40px"></i> Mining Rig Building Service</h2></center></a>

This is how I want it to look, which is also how it looks with the element-styling:

This has different results than if I use:

<a href="some-link"><center><h2><i class = "fa fa-hdd-o icon-40" style = "color:black;"></i> Mining Rig Building Service</h2></center></a>

With this in my stylesheet:

.icon-40 {
    font-size: 40px;
    vertical-align: middle;
    }

The icon isn't aligned correctly here:

I get the same result (with the misaligned icon) if I set the class to icon-40 fa fa-hdd-o instead of fa fa-hdd-o icon-40.

How can I align this icon? I want to use the class instead of the direct element-styling because I will have a lot of similar icons, and I don't want to use element-styling for all of them.

Answer 1

I don't see any problems, it looks like your example, inline - http://jsfiddle.net/G29Tw/

<a href="some-link"><center><h2><i class = "fa fa-hdd-o" style = "color:black;vertical-align:middle;font-size:40px"></i> Mining Rig Building Service</h2></center></a>