html - 如何将图标放在段落旁边

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。 - 标签并使它们position:relative。