twitter-bootstrap 如何给 font-awesomes 图标一个固定的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18535684/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to give font-awesomes icon a fixed width?
提问by Brigitte Fellner
I am using Bootstrapand Font Awesometo make a table like the one from FAQ zalando.
我正在使用Bootstrap并Font Awesome制作一张类似于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>
采纳答案by LeBen
Put your icon inside the element and make it behave as an inline-blockso you can change its widthand margin.
将您的图标放在元素内并使其表现得像 an，inline-block这样您就可以更改它的width和margin。
回答by mwotton
As an update to this, FontAwesome now has fixed-widthsupport built in.
作为对此的更新，FontAwesome 现在内置了固定宽度支持。
<i class="fa fa-fw fa-user"></i>
The fa-fwclass supplies the fixed-width style.
的fa-fw类提供的固定宽度的风格。
回答by Netsurfer
Both, the original code of the Zalando website and the Fiddle by LeBen, are not "ideal" - espacially when it comes to HTML semantics.
Zalando 网站的原始代码和 LeBen 的 Fiddle 都不是“理想的”——尤其是在 HTML 语义方面。
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.
只需将图标添加为 background-image 并将所有这些元素的 padding-left 设置为所需的值。
回答by Seth Warburton
Just target the icons classes directly adding your styles in css:
只需定位图标类，直接在 css 中添加您的样式：
[class*="btn-"]:before,
[class^=" btn"]:before {
margin-right: 1em;
}
And there's no need for an empty , just use:
并且不需要一个空的，只需使用：
<div class="row">
<div value='register' class="icon-user span4">
Registrierung
</div>
<div id='Newsletter' class="icon-mobile-phone span4">
Newsletter
</div>
</div>
