Font Awesome and Moodle, Part 14 – Bootstrap
In part fourteen of this series we consider using Font Awesome as part of Bootstrap.
Font Awesome works really well with the full range of Bootstrap components. Consider these examples:
<a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog"></i> Settings</a>
As you can probably work out by now, this produces the following buttons.

Cool eh?
Of course, being a Moodle teacher or designer you might use something more like:
<a class="btn btn-lg btn-success" href="#">
<i class="fa fa-info fa-2x pull-left" style="color:#800000"></i> Learner support area</a>
This produces a button like this:

Note the href=”#” part of the code.
You can replace the # with any URL – such as https://wwwyoursite.com/learner_support
The link could be internal – to a page on your Moodle site, or external – to your main company website, or any other website address.
So now you know how to add simple buttons that link to different parts of your course or site 🙂
More next month!
- ElearningWorld – new writers wanted – 21st January 2021
- What will 2021 be like? – 14th January 2021
- Moodle plugin of the month – Masked field – 12th January 2021