Using Font Awesome icons in Open edX
Font Awesome icons are used across the internet. You've probably seen them a thousand times and not known or cared what they are. In this article we'll look at exactly what they are and how you can make use of them in your Open edX courses.
Before we start, it's worth noting that completing the steps in this article do require a very small amount of HTML knowledge, but it's likely that you'll be able to follow it even if you've never touched HTML or CSS previously. With that in mind, however, it is possible to make your course look really bad if you misuse or overuse icons like these, so consider when you should use an icon. Don't just bury your materials in them because you can.
As this is a long article, here's what we're going to cover:
- Frequently asked questions
- Step 1: Finding the right place to use an icon
- Step 2: Picking your icon
- Step 3: Inserting your icon
- Step 4: Making it accessible
- Step 5 (Optional): Getting fancy with icons
- Wrapping up & examples
Frequently Asked Questions
What is Font Awesome?
Font Awesome is a widely used icon library, which is used throughout the internet. Any time you see an icon, it's likely come from Font Awesome or one of its competitors. We use Font Awesome 4.7 here because it's used within Open edX itself, and when Font Awesome is enabled on a page, it's enabled everywhere - including within your content. It's also, for lack of a better turn of phrase, awesome.
Why should I use Font Awesome icons?
Icons are an incredibly effective way to communicate information visually, and give you a form of shorthand that you can use throughout your courses to communicate with your learner. You can use them to great effect to communicate often repeated information such as what the learner should expect to find in the following subsection, or to draw their attention to a vitally important point. They're also just more exciting and rapidly noticeable than text - when was the last time you saw a signpost which read "Please slow down, there are school children in this area" or "There is risk of rocks falling onto this stretch of road"?
Is using icons accessible?
Yes! There's a common misconception that using icons will immediately make your content inaccessible, but it very much depends on how you use them and relies on you providing reasonable alternatives. For certain users, such as dyslexic learners, icons can actually make your content more accessible. More visual does not have to equal less accessible. We'll cover how do use icons accessibly during this article.
How much code do I need to know?
Not much... or a lot. It really depends what you want to do. Simply inserting a logo into your text is easy. Working with that logo's size, shape and even interactivity is more complex, and can require advanced CSS and HTML knowledge. That's not to say you can't use them without this knowledge, you can just get more and more out of them the more knowledge you have.
Why not just use an image?
Font Awesome icons are faster to load, can be scaled infinitely and you can play with them with CSS, even animating them! They're easy to implement, don't bloat your files and uploads and are just generally better than images in every possible way, at least for displaying symbols.
Step 1: Finding the right place to use an icon
The first step before we start looking at icons is to actually determine where and why we need one. Here's some examples as to why you might need to use an icon, but really, the reasons are limitless.
- Signposting: Providing a consistent visual way to highlight that a learner will be participating in an activity. This is the use-case we're going to demonstrate in this article, as it's often the most useful.
- Brand recognition: So long as you are using the icon to refer to that brand, you can use one of many brand icons on Font Awesome to highlight particular brands and tools, like Facebook, YouTube and GitHub. This makes it easy to highlight familiar tools by using logos that your learners will be used to seeing.
- Aesthetics: While not always the best use of icons, you can use icons to make your course more aesthetically pleasing, such as using icons as bullet points.
Step 2: Picking your icon
Once you know where your icon needs to go, it's time to search through the Font Awesome 4.7 icon list for the icon you want.
There are a lot of icons to choose from, but once you've found the one you want, click it to view the full details. In this case I'm going to choose the book icon, fa-book.
At the bottom of each page is a sample snippet of code which you can use. In this case it's:
<i class="fa fa-book" aria-hidden="true"></i>
We're going to copy this and now head over to Open edX. Sadly, it's not so simple as just pasting this code. So hold your horses; our work isn't done yet.
Step 3: Inserting the icon
The first thing you're going to need to do to insert your icon is have an HTML component ready and waiting for it. As this is a more advanced topic, we won't cover doing this here. Once your HTML component is ready, you'll need to access the HTML editor by clicking HTML. This will present you with the HTML for your component.
The next step is to paste in the icon code where you want your icon to appear. So as a reminder, we copied this code from the bottom of the Font Awesome page:
Which we then paste into our HTML editing window in the place we want it. I want to put this icon up as part of my heading, so I'm putting it within my <h3> tag:
Once the code is in, we need to modify it. Instead of using <i> tags for this, we're going to use <span>. While using <i> is a common convention lately on some sites, it's not technically correct HTML (<i> should technically only be used for 'alternative voice' content, such as foreign languages, in case you were wondering). Switching to using spans will also make our lives a bit easier for styling, as we won't be fighting with the core site's about whether <i> tags should be italicized. This means our icon code now becomes:
<span class="fa fa-book" aria-hidden="true"></span>
Speaking of arguing with the core site, we're going to need to add something inside this span tag, else the visual editor has a habit of being helpful and removing your span because it thinks it's empty. We'll just put in a non-breaking space for now, and to do that we enter in between the opening and closing tag of our span. This makes our code something like this:
<span class="fa fa-book" aria-hidden="true"> </span>
Which looks like this in the editor with my text:
Note that after you click OK, you won't see it in the visual editor (so be careful working around it in future, you may accidentally overwrite it!), but you will see it upon hitting save. Here's mine after saving in Studio:
This looks pretty good! It'll look even better in the LMS, but before we go and take a look at it let's make it accessible.
Step 4: Making it accessible
To ensure the icon is accessible, we're going to add some additional HTML around the icon for users who are visually impaired, or even blind. If your icon is purely decorative, you can skip this step, you're done. But our example was using an icon as a signpost to indicate that this subsection contains a reading activity, so we need to make sure that information is communicated to everyone, not just the sighted.
First up, let's add a description to the icon that appears on mouseover. This is useful to users with visual impairments, or just anyone who forgets what the icon means. We do this back in the HTML editor by adding a title attribute as follows:
<span class="fa fa-book" aria-hidden="true" title="Reading activity:"> </span>
Next, we need to add this information for screen readers. You might have seen the aria-hidden="true" attribute already present. This will hide the icon entirely from screen readers, but we still want them to know the information. Alongside our icon span, we're going to include another span with our text in it:
<span class="fa fa-book" aria-hidden="true" title="Reading activity:"> </span> <span class="sr">Reading Activity:</span>
The class="sr" attribute that we've included is a class for making sure the text it contains is only available to screen readers. By replicating the same description we already gave, we make sure that the information the icon represents is available to everyone. Note that at no point do we state that this is an icon. That's worthless information to someone on a screen reader, and we want to give them the most seamless experience that we can by just simply stating what the icon represents.
Here's the code from my final example:
You should notice once you hit save that the text is no longer visible outside of the edit window, it's for screen readers only. Sneaky, huh? There are a number of accessibility guidelines on the Font Awesome website, should you wish to delve any deeper into the art of using icons accessibly. Here's our final version after publishing it to the LMS, with all of our theme's styling applied, complete with a tooltip on mouseover:
We're good to go, but what else can we do with icons visually?
Step 5 (Optional): Getting fancy with icons
Because Font Awesome icons can be worked with in the same way as text, you can do almost whatever you want with them. The Font Awesome website has a number of great examples of this, but be warned that not all of them will work as expected within Open edX without some tweaking. Here's a few of our favorites, and how to use them in Open edX specifically:
Making the icon bigger
There are two ways to do this, one way is to use CSS, but that's more advanced than we'd like to get into right now. Instead, we're going to use Font Awesome's built-in sizing to do this quickly and easily.
First up, locate your icon code. Here's mine from earlier:
<span class="fa fa-book" aria-hidden="true" title="Reading activity:"> </span>
All we need to do within the class attribute is add in fa-2x, fa-3x and so on, up to 5x (being 2,3, and 5 times the normal size, respectively). In this case I'm going to make it 3 times larger, using fa-3x. This makes our code:
<span class="fa fa-book fa-3x" aria-hidden="true" title="Reading activity:"> </span>
This is much too big for our original use-case for this code, but here's what it looks like when dropped into our previous example, just to give you an idea of what effect this has on our icon from before:
Using icons as bullets in lists
This one's cool for making lists a bit more decorative, but it's slightly more complex to implement. Not much though, and it can be very effective for decoration.
When you insert a bulleted list, you'll see your code looks something a little like this:
<ul>
<li>Lists</li>
<li>are great</li>
<li>for readability</li>
<li>and stuff</li>
</ul>
Let's say in this example that we're going to change all of our bullets to cogwheels. We've identified what icon that is, it's fa-cog. First, we add class="fa-ul" to our unordered list (the <ul> tag) as well as a style attribute to override the core platform styling, as shown on the first line here:
<ul class="fa-ul" style="list-style-type: none;">
<li>Lists</li>
<li>are great</li>
<li>for readability</li>
<li>and stuff</li>
</ul>
Now within each list item, we'll add in an icon, similarly how we've done previously except with an extra class of fa-li. This gives us a final icon code of <span class="fa-li fa fa-cog"> </span> in order to make the icons sit to the side of the text, similarly to bullets. We effectively sneakily replace them, while keeping our content formatted as a list (which is good for accessibility and readability). Here's our list with this code added to each list item:
<ul class="fa-ul" style="list-style-type: none;">
<li><span class="fa-li fa fa-cog"> </span>Lists</li>
<li><span class="fa-li fa fa-cog"> </span>are great</li>
<li><span class="fa-li fa fa-cog"> </span>for readability</li>
<li><span class="fa-li fa fa-cog"> </span>and stuff</li>
</ul>
Now the list is done and beautiful, and it'll look something like this in our content. More interesting than regular bullets, no?
Wrapping up & examples
All in all, Font Awesome icons can be a powerful visual addition to your courses, and the possibilities for their use are immense, particularly when combined with the use of CSS. If you use icons in an interesting way, why not drop us an email and show us what you've done? We'd love to see what you do with them! Here's some previous examples that you might find helpful for inspiration:
