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现在内置了fixed-width支持。

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

fa-fw类提供固定宽度样式。

Answer 2

Zalando网站的原始代码和LeBen的Fiddle都不是“理想的” - 特别是在HTML语义方面。

如果您只想要元素的背景图像，为什么要使用空元素？

只需将图标添加为背景图像，并将所有这些元素的填充左侧设置为所需的值。

Answer 3

将您的图标放在元素中，并使其显示为inline-block，以便您可以更改其width和margin。

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

Answer 4

直接定位图标类，直接在css中添加样式：

[class*="btn-"]:before,
[class^=" btn"]:before {
    margin-right: 1em;
}

并且不需要空，只需使用：

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

Answer 5

在不想在 spans/divs 中敲打我所有的 FontAwesome 图标后，刚刚遇到了这个问题。添加类 'fa-fw' 确实解决了这个问题，但简单地用 CSS 调整图标的宽度也能解决这个问题（这可能是一个新东西，因为这是一篇旧帖子），所以如果你有很多图标，则不需要额外的类。 'svg-inline--fa' 是我所有图标的通用类 - 请参见示例

.item{
  padding: 5px;
}
    
.svg-inline--fa{
  font-size: 20px;
  width: 40px !important;
}

                <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" defer></script>
                
                <div class="item">
                    <i class="fas fa-bolt"></i>
                    Fast, local and friendly team
                </div>
                <div class="item">
                    <i class="fas fa-tags"></i>
                    Honest and transparent pricing
                </div>
                <div class="item">
                        <i class="fas fa-handshake"></i>
                    All our work is guaranteed
                </div>
                <div class="item">
                    <i class="fas fa-clipboard-check"></i>
                    Trained to the highest UK standards
                </div>

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

5 个答案: