Html 在文本旁边使用图标

我试着把这些图标放在文本旁边，但我不知道怎么做

这是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>

我试图在文本中使用float:left，但正在中断

---

将浮点添加到

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；}

向.fa类添加float:left和一个宽度。您可以使用col类来完成这项工作

CSS:

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

<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>

HTML:

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

<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>

Lorem ipsum dolor sit amet，Concetetur Adipising Elite。伊尼姆·奥纳雷·努克·马蒂斯·康格·欧盟自由之旅的休止符。Mauris elit urna，Placelat mollis mi Concertetur，imperdiet拍卖商massa。最后一刻，我们的精英们都站在同一条战线上，继续前进。伊尼姆·奥纳雷·努克·马蒂斯·康格·欧盟自由之旅的休止符。Mauris elit urna，Placelat mollis mi Concertetur，imperdiet拍卖商massa。最后一刻，我要成为一名优秀的运动员。伊尼姆·奥纳雷·努克·马蒂斯·康格·欧盟自由之旅的休止符。Mauris elit urna，Placelat mollis mi Concertetur，imperdiet拍卖商massa。精梳毛茛
Lorem ipsum dolor sit amet，Concetetur Adipising Elite。伊尼姆·奥纳雷·努克·马蒂斯·康格·欧盟自由之旅的休止符。Mauris elit urna，Placelat mollis mi Concertetur，imperdiet拍卖商massa。最后一刻，我们的精英们都站在同一条战线上，继续前进。伊尼姆·奥纳雷·努克·马蒂斯·康格·欧盟自由之旅的休止符。Mauris elit urna，Placelat mollis mi Concertetur，imperdiet拍卖商massa。最后一刻，我要成为一名优秀的运动员。伊尼姆·奥纳雷·努克·马蒂斯·康格·欧盟自由之旅的休止符。Mauris elit urna，Placelat mollis mi Concertetur，imperdiet拍卖商massa。精梳毛茛
Lorem ipsum dolor sit amet，Concetetur Adipising Elite。伊尼姆·奥纳雷·努克·马蒂斯·康格·欧盟自由之旅的休止符。Mauris elit urna，Placelat mollis mi Concertetur，imperdiet拍卖商massa。最后一刻，我们的精英们都站在同一条战线上，继续前进。伊尼姆·奥纳雷·努克·马蒂斯·康格·欧盟自由之旅的休止符。Mauris elit urna，Placelat mollis mi Concertetur，imperdiet拍卖商massa。最后一刻，我要成为一名优秀的运动员。伊尼姆·奥纳雷·努克·马蒂斯·康格·欧盟自由之旅的休止符。Mauris elit urna，Placelat mollis mi Concertetur，imperdiet拍卖商massa。精梳毛茛

在CSS中，您不需要将.info类的宽度设置为100%，因为section元素是块级元素。此外，向节中添加填充消除了对行和最后一个子p元素的边距的需要（因为IE8不支持最后一个子元素）。最后，您可以删除文本align:left；因为这是段落的默认行为（除非您在css的其他地方覆盖了它）

---

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

在文本段落上使用

清除：两个
。我只需指定每个图标（从单个CSS精灵图像-）as
：在每个段落的
伪类之后。将图标放在段落的内部，而不是外部，并在其上放置一个float:left。清除也会像@amphetamachine所说的那样起作用。你错过了你的col-classes，但是p中的span.fa会起作用，但是它非常难看，看：@sebnuken