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)

• Expanded H5P Virtual Tour – can now be an Escape challenge! – 14th October 2021
• New H5P content type – Sort the paragraphs – 5th October 2021
• Moodle 4.0 with BigBlueButton – 26th September 2021