9

我正在使用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>
4

5 回答 5

38

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

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

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

于 2014-09-02T06:55:38.193 回答
2

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

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

于 2013-08-30T14:50:03.617 回答
2

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

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

只需将图标添加为 background-image 并将所有这些元素的 padding-left 设置为所需的值。

于 2013-08-30T15:04:27.117 回答
0

只需针对图标类直接在 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>
于 2014-08-20T13:44:33.433 回答
0

在不想在 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>

于 2021-02-18T17:45:52.970 回答