Font Awesome in Moodle, Part 9 – pulling icons
Find out how to pull and border Font Awesome icons in Moodle.
(Link to Part 1 of this series – basics)
(Link to Part 2 of this series – icons)
(Link to Part 3 of this series – colour)
(Link to Part 4 of this series – size)
(Link to Part 5 of this series – colour & size combinations)
(Link to Part 6 of this series – rotating)
(Link to Part 7 of this series – fixed width icons)
(Link to Part 8 of this series – list icons)
(Link to Part 9 of this series – pulling icons)
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-2x) and then pulling the character to the left (fa-pull-left)
[wpfa icon=”quote-left” size=”2x” color=”grey” 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>
[wpfa icon=”quote-right” size=”2x” color=”grey” fa-pull-right] And here is the following text. Notice how the quote character is pulled to the right hand side and the text flows around it? Note this may not display correctly on this WordPress site 🙁
So here’s your challenge…
Can you add the quote marks on both sides of a paragraph in this way?
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>
Notice the addition of the fa-border option? It’s that simple to put a light border around the character 🙂
More Font Awesome tricks next month !
See the full collection of articles on using Font Awesome with Moodle try this dedicated (open and free) Moodle course on our ElearningWorld Academy.
- Share Local Moodle Docker Using Ngrok – 23rd March 2024
- Moodle jobs: Moodle/Totara Engage LXP admin – Contract – Telecomute (office in Schaumburg, Illinois) – 21st March 2024
- Moodle Educator Certificate (MEC) starting 1st April – 8th March 2024
