Bad vertical allignment with fontawesome

Question

I am rendering the following component:

<a id="ember527" class="ember-view" href="#/billing"><i class="icon-euro icon-2x"></i>&nbsp;&nbsp;Billing</a>

An it shows like this:

The icon is alligned with the text, but I would like it to be centered vertically. Is this possible?

EDIT: take a look at this jsfiddle

Answer 1

You can try by setting to the icon the display: block; property and `float: left;.

If for other needs you need to adjust also the "Billing" vertical alignment, you can insert it into a span and give to it the same "display: block;" property.

Then, play with top margins and then you're ok ;)

Hope it helps, good luck!

Answer 2

just add this to your css file :

.icon-euro {
    vertical-align:middle;
}