Html 将段落的第二行缩进以与第一行对齐？

我正在使用在选择器之前的p:中添加图标，我想知道如何只缩进段落的第2行，以便文本对齐

以下是我当前的输出：

以下是我试图实现的目标：

这是我的密码：

<div class="result>
   <p class='fa location'>{{ address }}<br/>{{ citystate }}</p>
</div>

---

有可能做到这一点吗？或者我需要重新构造代码以实现此效果吗？

将整个段落向右填充，然后向左拉动fontawesome图标以填充创建的空间

.result {
    padding-left: 30px;
}

.result .location:before {
    content: "\f041";
    color:#b3b3b3;
    margin-left: -10px;
    padding-right: 2px;
}

---

将整个段落向右填充，然后向左拉动图标以填充创建的空间

.result {
    padding-left: 30px;
}

.result .location:before {
    content: "\f041";
    color:#b3b3b3;
    margin-left: -10px;
    padding-right: 2px;
}

---

您可以在

之后添加一些

，并使您的代码如下所示：

<div class="result>
   <p class='fa location'>{{ address }}<br/>&nbsp;&nbsp;{{ citystate }}</p>
</div>

---

您可以在

之后添加一些
，并使您的代码如下所示：

<div class="result>
   <p class='fa location'>{{ address }}<br/>&nbsp;&nbsp;{{ citystate }}</p>
</div>

谢谢，看来效果不错。我在整个段落中添加了一个20px的填充，然后在“：before”类中添加了一个-20px的左边空白，在“：before”类中添加了右边空白，现在它已经正确对齐了。谢谢，这看起来效果很好。我在整个段落中添加了一个20px的填充，然后在“：before”类中添加了一个-20px的左边空白和右边空白，现在它正确对齐了。