Borders and Pulls

It's possible to pull a Font Awesome icon (character) to either side - left or right.

This can be useful both for alignment requirements, and also as a typographical style.

Look at the following:

<i class="fa fa-quote-left fa-2x fa-pull-left" style="color:Grey"></i>

Here you can see we are using the left quote character (fa-quote-left), the size attribute (fa-3x) and then pulling the character to the left (fa-pull-left)

And here is the following text. Notice how the quote character is pulled to the left hand side and the text flows around it?  We colour this grey as that seems to work well - not quite so 'heavy' on the page.

Of course it's easy to add the end quote too by changing the quote-left to quote-right, and changing the pull-left to pull-right

<i class="fa fa-quote-right fa-2x fa-pull-right fa-border" style="color:Grey"></i>

And here is the following text. Notice how the quote character is pulled to the left hand side and the text flows around it?  We colour this grey as that seems to work well - not quite so 'heavy' on the page.

So here's your challenge...

Can you add the quote marks on both sides of a paragraph like this?

One more small addition that can work well, is adding a border.

Taking the first example again:

<i class="fa fa-quote-left fa-2x fa-pull-left fa-border" style="color:Grey"></i>

Let's see how that border looks...

Notice how the quote character now has a list border around it? There's no real control over this, but it does give the character being used more of an icon type feel.

More Font Awesome tricks next month !