Add Font Awesome icons into articles

You have great content in an article, but as you review it, you realize you'd like some more visual signposts along the way to make the text a little more engaging. Since KnowledgeOwl pays for a Pro license for Font Awesome to handle things like Category icons, you can also add a wide range of Font Awesome icons into your articles.

There's currently no editor control to help you do this, but with a little Font Awesome know-how and a brief shift into the article editor's Code View, you can add exactly the visual bling you've been looking for. You'll follow a two-step process:

1. Get your icon from Font Awesome. They provide a number of tools to change color, icon family, and style. Refer to the Get your icon instructions below.
2. Add your icon to your article. Refer to the Add your icon to an article instructions below.

Get your icon

To begin, you'll need to choose the icon you want from Font Awesome's website and copy the HTML code for it. To do so:

1. Go to https://fontawesome.com/.
2. Search for the icon you'd like to add and select it.
3. The details for the icon open in a modal.
4. Use the Font Awesome controls here to customize the icon. For example, you can:
   1. Change the color using the color palette.
   2. Change the Icon Family using the style dropdown near the top (usually includes options like Classic, Duotone, and Sharp).
   3. Change the style of the icon using the buttons available (Standard, Regular, Light, and Thin).
5. Once you've set up the icon the way you like, select anywhere in the HTML tab to copy the HTML code for the icon.

Now that you have your icon, you can add it anywhere into the article you're using.

Add your icon to an article

Once you have your icon HTML copied, add it into the article you're working with:

1. In KnowledgeOwl, open the article for editing.
2. Highlight some text in the editor near where you want to add the icon. This isn't strictly necessary but makes adding the icon a bit faster!
3. Select the </> Code View control in the editor:
   Select the </> Code View control in the editor.
   The editor switches to Code View and should have the same text highlighted.
4. Paste the HTML for your icon in wherever you'd like the icon to appear. We like to use ours at the start of paragraphs or headings. For example, here's where we added it into the Add your icon to an article heading above:

   <h2><i class="fa-solid fa-circle-2" style="color: #1d284f;"></i> Add your icon to an article</h2>

5. Select the </> Code View control again to toggle back to the live editor view.
6. Review your icon placement and be sure you like it.
7. Be sure to Save your changes.

Congratulations, you've now added icons into your article!