Use Font Awesome Icons in Rise 360 with Mighty

Tiny visual cues can do a lot in a Rise course. A light bulb before a “getting started” section, an arrow beside a prompt, or a simple icon in a block can make a page feel more designed without rebuilding the whole lesson.

How to Use Font Awesome Icons in Articulate Rise with Mighty

Here’s the clever bit: with Mighty, you can use Font Awesome as a custom font inside Articulate Rise 360, then insert icons anywhere you can format text.

What you’ll build#

In the source walkthrough, John from Mighty adds a Font Awesome light bulb icon above a “Getting Started” heading in a Rise lesson. The same workflow works for other free Font Awesome icons too, as long as you grab the right Unicode value and use the matching font style.

The basic idea is:

• Download the free Font Awesome web fonts.
• Convert the font files Rise needs.
• Upload Font Awesome as a custom font in Rise.
• Paste the icon’s Unicode into the Rise editor using code view.
• Style the icon like text: size, color, and weight.

It’s a small technique, but it’s especially handy when your course needs more visual hierarchy and you don’t want to create, export, upload, and manage a bunch of separate image files.

Step 1: Download the free Font Awesome web font#

Start at the Font Awesome website. In the video, John uses the free option, though he notes you could go the Pro route if your team has access.

1. Go to Font Awesome.
2. Choose Start with Free.
3. Go to the Download section.
4. Download the Web Font package.

That download gives you a zip folder. Inside, look for the webfonts folder.

For this workflow, the important files are the Font Awesome Regular and Solid font files. Font Awesome icons come in different styles — solid, regular, light, duotone, thin, and others — but not all of those are available in the free set.

In the video, John focuses on the free Regular and Solid styles.

Step 2: Check which icon style you need#

Before uploading anything into Rise, it helps to confirm which Font Awesome style your icon uses.

In the walkthrough, John searches Font Awesome for a light bulb icon. On the icon page, Font Awesome shows the available styles. Some are Pro-only, while the free options include styles like Solid and Regular, depending on the icon.

This matters because the icon will only appear in Rise if you use the font style that contains that icon.

For example:

• If the icon is available in Regular, it can display using your regular Font Awesome font file.
• If the icon is available in Solid, it can display using your solid Font Awesome font file.
• If the icon is Pro-only in a specific style, it will not appear unless you have and upload that Pro font file.

That distinction becomes important later when you switch between regular and bold text in Rise.

Step 3: Convert the Font Awesome files to WOFF#

Rise’s custom font upload expects WOFF files. The Font Awesome files John points to in the download are TTF files, so you need to convert them before uploading.

In the video, John uses CloudConvert for this step.

1. Open CloudConvert.
2. Select the Font Awesome Solid .ttf file.
3. Convert it to .woff.
4. Select the Font Awesome Regular .ttf file.
5. Convert it to .woff.
6. Download both converted .woff files.

You should now have two WOFF files ready for Rise:

• Font Awesome Regular as a .woff file
• Font Awesome Solid as a .woff file

Step 4: Upload Font Awesome as a custom font in Rise#

Now move into your Rise course.

In the walkthrough, John goes to the custom font area through the course theme settings:

1. Open your Rise course.
2. Go to Theme.
3. Go to Fonts.
4. Choose More.
5. Select Add new font.
6. Name the font Font Awesome.

Rise asks you to upload font files for different weights. Here’s the setup John uses:

• For Regular, upload the Font Awesome Regular .woff file.
• For Bold, upload the Font Awesome Solid .woff file.

Then save the font.

This is the key move in the whole workflow. By assigning Regular and Solid to different font weights, you can switch between Font Awesome styles in the Rise editor by changing the text weight.

Regular text uses the regular Font Awesome icon style. Bold text uses the solid Font Awesome icon style.

Step 5: Add space for the icon in your lesson#

Go back into the Rise lesson where you want the icon to appear.

In the video, the icon is added right above a section labeled Getting Started. John first creates a little space where the icon will go, then applies the new Font Awesome font.

1. Click into the block or text area where you want the icon.
2. Add a space or placeholder character where the icon should appear.
3. Highlight that placeholder text.
4. Change the font to your new Font Awesome custom font.

At this point, Rise knows that the selected text should use Font Awesome. Next, you’ll swap the placeholder for the actual icon using its Unicode value.

Step 6: Copy the icon Unicode from Font Awesome#

Back on the Font Awesome site, open the icon you want to use.

For the light bulb example, John searches for the light bulb icon. Near the top of the icon page, Font Awesome provides the icon’s Unicode value.

1. Find your icon on Font Awesome.
2. Confirm the style you want to use is available.
3. Copy the icon’s Unicode value.

You don’t need to copy an SVG or download an image. The Unicode value is what tells the Font Awesome font which icon character to display.

Step 7: Paste the Unicode in Rise code view#

Now return to Rise.

1. Highlight the placeholder text you added.
2. Open Code View in the text editor.
3. Replace the placeholder with the Font Awesome Unicode format.

The format John uses is:

&#xUNICODE;

So the sequence is:

1. Type &#x
2. Paste the Unicode value from Font Awesome.
3. Add the semicolon if needed.
4. Switch back out of code view.

When you return to the normal editor view, the text should display as the Font Awesome icon.

That’s the moment where the trick clicks: you’re not inserting an image. You’re inserting a character from a custom icon font.

Step 8: Style the icon like text#

Once the icon appears, you can format it inside Rise much like any other text.

In the video, John adjusts the icon by changing:

• Size
• Color
• Bold styling, when using the solid icon file

That means you can make the icon feel integrated with your course design instead of dropping in a one-off graphic that needs separate editing.

Need the icon larger? Increase the text size.

Need it to match a brand accent? Change the text color.

Need the solid version? Set it to bold, assuming you uploaded the solid Font Awesome file as the bold font weight.

A quick note on regular vs. solid icons#

John shows a useful troubleshooting example with an arrow icon.

He finds an arrow icon where the Regular style is Pro-only, but the Solid style is available in the free set. When he pastes the Unicode while using the regular Font Awesome font, the icon does not display correctly. But when he switches the text to Bold, Rise uses the solid Font Awesome file — and the icon appears.

So if an icon does not show up, check two things:

• Is that icon available in the Font Awesome style you’re trying to use?
• Are you using the matching text weight in Rise?

For the setup from the video:

• Regular text = Font Awesome Regular
• Bold text = Font Awesome Solid

That mapping is what lets you use both styles from the same custom font entry in Rise.

Why this matters for course design#

Rise is great for building clean courses quickly, but sometimes the default text-and-block rhythm needs a little extra visual structure. Icons are a lightweight way to add that structure.

You might use them to:

• Signal tips, warnings, examples, or reflection moments.
• Add emphasis to headings without creating custom graphics.
• Support scanning in longer lessons.
• Keep icon styling consistent across a course.
• Match brand colors directly in the editor.

It’s also a practical production win. On tight timelines, creating and maintaining separate icon image files can become a nuisance — especially when stakeholders ask for “just one more” color or size adjustment. With this approach, many of those changes happen right in Rise.

Just keep accessibility in mind. Decorative icons should not carry meaning on their own. If the light bulb signals a tip, the surrounding text should still say “Tip” or otherwise make the meaning clear. Icons can reinforce the message, but they should not be the only way a learner gets it.

The takeaway#

Download the free Font Awesome web fonts, convert the Regular and Solid TTF files to WOFF, upload them in Rise as a custom font, then insert icons with &#x plus the icon’s Unicode value.

Once it’s set up, you can add polished little visual cues right inside the Rise editor — no separate image workflow required. Try it the next time a lesson needs a bit more hierarchy without a full redesign.