Adding Custom Icons in Moodle with CSS: A Simple Guide

Moodle, as a powerful learning management system, offers numerous ways to customize the look and feel of your courses. One of the most flexible features it provides is the ability to inject custom CSS to style elements across your platform. But while it’s a powerful tool, you need to tread carefully. If used improperly, CSS can cause layout issues or even break some of your Moodle pages. However, with the right setup, you can achieve some amazing things with minimal effort.

In this post, we’ll show you how to add icons to your Moodle course content using custom CSS. The key advantage of this method is that once set up, you can use these icons across your platform without needing to repeatedly add the same code every time.

Why Use Custom CSS for Icons?

Icons add visual interest and can make your content more engaging. With Moodle, adding icons traditionally requires manually adding HTML and code for each icon in every instance where you want them to appear. However, by using CSS, you can set up a global property once, and then apply it across your platform. This saves time and ensures consistency.

Step-by-Step Guide: Adding Icons with CSS in Moodle

Step 1: Set Up the Base Code in Your Course

Let’s start by looking at an example. Suppose you want to add a simple icon next to some text on your Moodle course page. Here’s the HTML code that would typically generate this effect:

<code><p class="alert alert-info">
    <i class="fa fa-arrow-circle-right"></i> Here is your alert text.
</p></code>Code language: HTML, XML (xml)

This code creates a paragraph with an icon to the left of the text. But manually adding this to each instance of an alert message or notice can become tedious. Instead, you can create a reusable CSS class that automatically applies the icon, styling, and other elements.

Step 2: Create Your Custom Class

Instead of manually adding the <i> tag every time, you can create a class like custom-alert-arrow to apply the same look and feel to all instances of this type of content. For this, you’ll use CSS to define how the alert should look, including the icon.

1. Inspect Your Page: Right-click and inspect the element to understand how the classes are defined.
2. Copy the CSS: Copy the relevant CSS for the alert (such as padding, margin, background color, etc.).
3. Create the Custom Class: Define your new custom-alert-arrow class in CSS, ensuring that it inherits all the styles from the existing alert.

Here’s an example of what the CSS might look like:

<code>.custom-alert-arrow {
    padding: 10px;
    margin: 5px;
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f;
    font-weight: bold;
}

.custom-alert-arrow::before {
    content: "\f0a9"; /* Unicode for the right arrow */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 6px;
}</code>Code language: PHP (php)

Step 3: Apply the CSS Globally

To make sure that this CSS is applied across your site, you need to add it to your Moodle theme’s CSS settings.

1. Go to Admin Settings: As an admin, navigate to Site administration > Appearance > Themes > Boost (or whatever theme you’re using) > Advanced settings.
2. Paste the CSS: In the CSS field, paste the code for your custom class.
3. Save and Refresh: After saving the changes, refresh your page to see the effects.

Once this is set up, the custom-alert-arrow class will automatically apply the desired icon and styling anywhere it’s used in Moodle.

Step 4: Use the New Class in Your Courses

Now, whenever you want to use this custom alert style with the icon, simply add the class custom-alert-arrow to any paragraph or div in your course content.

For example:

<code><p class="custom-alert-arrow">This is an alert with an icon!</p></code>Code language: HTML, XML (xml)

You’ll notice that when you view this text in Moodle, it will automatically include the icon and styling, without you needing to manually add any icon code.

Step 5: Fine-Tuning the Icon and Spacing

In the previous step, you added the icon, but it may not be perfectly aligned or spaced. You can adjust the spacing by modifying the padding in the ::before pseudo-element in your CSS:

<code>.custom-alert-arrow::before {
    content: "\f0a9"; /* Unicode for the right arrow */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 10px; /* Adjust this padding to fine-tune the icon spacing */
}</code>Code language: PHP (php)

This gives you flexibility to adjust the appearance further, depending on the look and feel you want to achieve.

Final Thoughts

Using CSS to add icons to your Moodle courses is a powerful technique for streamlining your course design. It allows you to apply consistent styling across your content with minimal effort, and once set up, all you need to do is use the class name wherever necessary.

If you’re new to CSS or Moodle customization, take it step by step. Start by understanding how the existing HTML and CSS work, and then move on to adding your custom properties. Over time, this will become an invaluable tool in your Moodle design toolkit.

Need help with the setup? Don’t hesitate to reach out to your Moodle admin or check out the official Moodle documentation for more advanced customization techniques.

Happy Moodling!