在文本旁边使用图标

Question

我试图将这些图标放在文本旁边，但我不知道如何。

这是HTML：

    <section class="info">
        <div class="container">
            <div class="row">
                <span class="fa fa-location-arrow fa-5x"></span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elit </p>
                <span class="fa fa-credit-card fa-5x"></span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elit </p>
                <span class="fa fa-calendar fa-5x"></span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elit </p>
            </div>
    </section>

这就是CSS：

.info {
  width: 100%;
  background-color: #f98835;
}

.info .row {
  margin: 30px 0;
  text-align: left;
}

.info .row .fa {
  color: black;
  margin: 20px 0;
}

.info .row p:last-child {
  margin-bottom: 70px;
}

我试图在文本中使用float：left，但是正在破坏..

Answer 1

将浮动添加到fa类：

.info .row .fa {
  color: black;
  margin: 20px 0;
  float: left;
  clear: both; /* may not be necessary */
}

但从逻辑上讲，我会将span.fa元素放在段落元素中，在这种情况下，clear应该移到p：.info .row p { clear:both; }。

Answer 2

将float：left和width添加到.fa类。您可以使用col类为您执行此操作。

Demo

<强> CSS：

.info { 
    background-color: #f98835;
    padding: 30px 0 100px;
    color: #fff;
}
.info .fa {
    color: #000;
}

<强> HTML：

<section class="info">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-2 col-lg-1 text-center">
                <span class="fa fa-location-arrow fa-5x"></span>
            </div>
            <p class="col-xs-12 col-sm-10 col-lg-11">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elit</p>
            <div class="col-xs-12 col-sm-2 col-lg-1 text-center">
                <span class="fa fa-credit-card fa-5x"></span>
            </div>
            <p class="col-xs-12 col-sm-10 col-lg-11">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elit</p>
            <div class="col-xs-12 col-sm-2 col-lg-1 text-center">
                <span class="fa fa-calendar fa-5x"></span>
            </div>
            <p class="col-xs-12 col-sm-10 col-lg-11">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elitem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in enim ornare nunc mattis congue eu vitae libero. Mauris elit urna, placerat mollis mi consectetur, imperdiet auctor massa. Cras finibus turpis eget elit</p>
        </div>
    </div>
</section>

在CSS中，您不需要将.info类的宽度设置为100％，因为section元素是块级元素。此外，在该部分添加填充消除了对行和last-child p元素的边距的需要（因为IE8中不支持last-child）。最后，你可以删除text-align：left;因为这是段落的默认行为（除非你已经覆盖了css中的其他地方）。

在你的标记中，不要忘记在每一行中添加至少一个col类。如果在每个断点处只需要一个全宽列，则只需使用col-xs-12。对于少于768px的视口，我制作了图标堆栈。您可以通过将col-xs设置为12以外的其他值来更改它，但是您可能需要设置一些媒体查询来相应地调整图标大小。