How to give font-awesomes icon a fixed width?

Question

I am using Bootstrap and Font Awesome to make a table like the one from FAQ zalando.

So on the left side, there should be an icon, and on the right side, there should be text.

I want the text to be exactly under each other, they should not be out of alignment with each other. If I give the icons a span, then it will be ignored.

Here is my code:

<div class="row">
    <i class="span2 icon-user "></i>
    <div value='register' class="span4">
        Registrierung
    </div>
    <i class="icon-mobile-phone span2"></i>
    <div id='Newsletter' class="span4">
        Newsletter
    </div>
</div>
<div class="row">
    <i class="icon-euro span2"></i>
    <div value='kost' class="span4">
        Kosten
    </div>

    <i class="icon-phone span2"></i>
    <div id='probleme' class="span4">
        Probleme
    </div>
</div>

Answer 1

As an update to this, FontAwesome now has fixed-width support built in.

<i class="fa fa-fw fa-user"></i>

The fa-fw class supplies the fixed-width style.

Answer 2

Put your icon inside the element and make it behave as an inline-block so you can change its width and margin.

http://jsfiddle.net/LeBen/B9yjd/

Answer 3

Both, the original code of the Zalando website and the Fiddle by LeBen, are not "ideal" - espacially when it comes to HTML semantics.

Why having empty elements if you only want a background image for an element?

Just add the icon as background-image and set the padding-left for all these elements to the required value.