如何将图标放在段落旁边

Question

任何人都知道如何让这些文字与图标保持一致？我已经尝试了一切..

HTML：

<section class="info">
                <div class="container">
                    <div class="row">
                            <p>
                                <span class="fa fa-location-arrow fa-5x"></span>
                                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>
                            <p>
                                <span class="fa fa-credit-card fa-5x"></span>
                                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>
                            <p>
                                <span class="fa fa-calendar fa-5x"></span>
                                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 { 
  background: #f78840;
}
.info .row {
  text-align: justify;
}
.info .row .fa {
  color: black;
  margin: 50px 20px 20px 20px;

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

我已经尝试了很多，但找不到解决方案。非常欢迎任何帮助。

Answer 1

.row {
position: relative;
}
.fa {
display: inline-block;
position: absolute;
left: 0px;
}
.row p {
margin-left: 100px; /* width of the icons */
}

我没有试过这个，但它会给你一个你可以做的事情的开始。 我们可以在<p> - 标签周围添加更多div，并使它们成为位置：relative。

Answer 2

我认为你已经在使用Bootstrap了。在这种情况下使用其media object。这可确保文本始终位于图像的右侧。但它可能是Bootstrap的一个新增功能。

有关媒体对象的更多背景信息，请参阅Stubbornella's blogpost或CSS Wizardy's blogpost

如果没有你的CSS，它将如下所示。如果您希望所有图标占据相同的宽度，可能需要在.media-left内的跨度中添加一个额外的类，以使其具有固定的width。

＆＃13;

＆＃13;

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');
@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css');

＆＃13;

<section class="info">
  <div class="container">
    <div class="row">
      <p>
        <div class="media">
          <div class="media-left">
            <span class="fa fa-location-arrow fa-5x"></span>
          </div>
          <div class="media-body">
            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

          </div>
        </div>
        <div class="media">
          <div class="media-left">
            <span class="fa fa-credit-card fa-5x"></span>
          </div>
          <div class="media-body">
            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
          </div>
        </div>
        <div class="media">
          <div class="media-left">
            <span class="fa fa-calendar fa-5x"></span>
          </div>
          <div class="media-body">
            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
          </div>
        </div>

    </div>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;