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!

• About
• Latest Posts

Stuart Mealor

Managing Director at HRDNZ

Stuart is interested in all things e-learning, with specific interests in Moodle, e-learning strategy, and business development.His experience in education over 30 years, MBA in International Business, and knowledge of e-learning systems implementation, together with graphic design background, give him a unique skill set for e-learning projects.

Latest posts by Stuart Mealor (see all)

• Moodle plugin of the month – Kopere Dashboard – 12th August 2020
• Get ready for H5P Interactive Book! – 9th August 2020
• Big Blue Button 2.2 – 8th August 2020