CODEWITHSUNDEEP
htmlcssfont-awesomeparagraphtext-indent
user3306747
user3306747

Reputation: 47

Indent 2nd line of a paragraph to line up with first line?

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:

Non-indented

And here is what I am trying to accomplish:

Indented

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?

Upvotes: 1

Views: 5376

Answers (2)

essmahr
essmahr

Reputation: 676

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

Upvotes: 5

Aurous
Aurous

Reputation: 132

What you could add in some &nbsp; 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 &nbsp; in until it is moved over as far as you need it.

I hope that helped you out.

Upvotes: 0

Related Questions