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.