如何给font-awesomes图标一个固定的宽度？

Question

我正在使用Bootstrap并Font Awesome制作一张类似FAQ zalando的表格.

所以在左侧,应该有一个图标,在右侧,应该有文字.

我希望文本完全在彼此之下,它们不应该彼此不一致.如果我给图标一个跨度,那么它将被忽略.

这是我的代码:

<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

作为对此的更新,FontAwesome现在内置了固定宽度支持.

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

的fa-fw类提供的固定宽度的风格.

Answer 2

将您的图标放入元素内并使其表现为 ，inline-block以便您可以更改其width和margin。

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