Positioning quote icons

1

Hey guys,

I’m trying to position the Font Awesome icons around the quote using the following code:

 $("#quotebox").html("<i class = 'fa fa-quote-left quote-mark'></i>" + "<p class = 'quote-content>'" + randomQuote.content + "</p>" + "<i class = 'fa fa-quote-right quote-mark'></i>" + "<br>" + "<h3>" + randomQuote.title + "</h3>");

But the icons appear above and below the quote instead. I can manually position them using CSS but this isn’t suitable as the positioning needs to be dynamic depending on the length of the quote.

Thanks in advance!

2

<p> is a block level element, so it will position itself to the left (it will not float after another element). That is why the first icon appears above it. You can fix this by using a <span> instead.

The reason that the second icon appears below it, is because randomQuote.content contains a new line character (\n) at the end. You could slice() the string to remove it.

1 Like
3

Thanks for this, really helpful.

How did you find the “\n” character in the JSON data? I can’t seem to see it anywhere! There are a few spaces at the end of each quote which I can see however.

4

CodePen’s console shows:

content: "<p>A good designer may not have all the answers, but he knows which questions to ask.</p>
"

As you see the end quotation mark is on a new line. Now if you check your browser console (CTRL + SHIFT + J):

content: "<p>A good designer may not have all the answers, but he knows which questions to ask.</p>\n"

This does show the \n.

1 Like
5

Ah awesome thanks, I see it now.