Font Awesome 7 Icons

Details
Category: Guides
  • Applicable Software: Mokonyx
  • Min Version Number: Development
  • Max Version Number: Not Applicable

Using Local FA7 Free

By default, Mokonyx loads the local minified FA7 Free CSS. No configuration needed. Use icons in your content with standard FA classes:

<i class="fa-solid fa-house"></i>
<i class="fa-regular fa-envelope"></i>
<i class="fa-brands fa-github"></i>

Choosing an Icon Style

Font Awesome groups icons into style families, each selected with a prefix class:

  • fa-solid — filled icons, the most common choice for buttons and navigation.
  • fa-regular — lighter, outlined versions of many icons.
  • fa-brands — logos for third-party services and social networks.

Always pair a style prefix with the specific icon name (for example fa-house). If an icon does not appear, confirm the icon name exists in the Free set and that the style you chose is available for it.

Using a Font Awesome Kit (Pro)

If you have a FA Pro subscription:

  1. Go to template settings, Advanced tab.
  2. Enter your Kit code in the Font Awesome Kit field.
  3. The local FA7 files will be replaced by your Kit script, giving access to Pro icons, custom sets, and versioned updates.

Drawer Icons

The left and right offcanvas drawer toggle icons are configurable in the Drawers tab. Enter any FA class string (e.g., fa-solid fa-chevron-right).

Tips and Troubleshooting

  • Use only one source at a time: if a Kit code is set, the local FA7 files are intentionally replaced to avoid conflicts.
  • Clear your site and browser cache after changing icon settings so updated CSS is loaded.
  • Pro-only icons will not render on the local Free set — add a Kit if you need them.

Need Help?

For assistance selecting or configuring icons for your Mokonyx site, contact Moko Consulting support.

Hits: 101