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

Question

I am using Font Awesome to add icons to p:before selectors and I am wondering how I can indent only the 2nd line of the paragraph so that the text is aligned.

Here is what my current output looks like:

And here is what I am trying to accomplish:

Here is my code:

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

And here is my CSS:

.result .location:before {
    content: "\f041";
    padding-right:6px;
    color:#b3b3b3;
}

Is it possible to accomplish this as-is? Or will I need to restructure my code to achieve this effect?

Answer 1

Pad the entire paragraph to the right and then pull the fontawesome icon to the left to fill the space created.

.result {
    padding-left: 30px;
}

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

jsfiddle

Answer 2

What you could add in some   after the <br /> and make your code look like this:

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

add the   in until it is moved over as far as you need it.

I hope that helped you out.