Icons and Font Awesome 7

Font Awesome is the web's most popular icon toolkit — scalable vector icons you control with CSS. Font Awesome 7.1.0 Free is the latest major release, delivering a refreshed icon set alongside a new recommended delivery method: Kits. This article covers both setup routes and everything you need to get FA 7 running in MokoCassiopeia.

Font Awesome 6 is now Long Term Support (LTS) — critical bug fixes only. All new icon work happens in FA 7.

What’s New in Font Awesome 7

FA 6 (LTS)FA 7.1.0
Status Long Term Support — critical fixes only Current
Free icons ~2,000+ Updated & expanded set
Styles (Free) Solid, Regular, Brands Solid, Regular, Brands
Styles (Pro) + Light, Thin, Duotone + Light, Thin, Duotone, Sharp
CDN delivery Font Awesome CDN (v5 and below only) Kits (recommended) or self-host
Class prefix fa-solid, fas fa-solid, fas (same)
Custom icons Pro Kits only Pro Kits only
Important: The Font Awesome CDN no longer serves v6 or v7 directly via a CSS URL. For FA 7 you must use a Kit or self-host the files. The old <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/..."> CDN pattern only works for FA 5 and below.

Method 1 — Font Awesome Kit (Recommended)

A Kit is Font Awesome’s hosted delivery system — one script tag, automatically updated, with optional custom subsetting and your own icon uploads. A free Kit covers all FA 7 Free icons.

Step 1: Create a free account and Kit

  1. Go to fontawesome.com and sign up for a free account.
  2. In your account dashboard, go to Kits and click Create a New Kit.
  3. Name your kit, choose version 7.x.x (Latest), and pick Web Fonts or SVG delivery.
  4. Copy your Kit embed code — it looks like this:
<script src="https://kit.fontawesome.com/XXXXXXXX.js" crossorigin="anonymous"></script>

Where XXXXXXXX is your unique 8-character kit token.

Step 2: Add the Kit to MokoCassiopeia

In Joomla, the best place to load a Kit script is via a custom HTML module in the debug position or via the template’s custom scripts field:

Option A — Template Custom Script
  1. Admin → System → Site Templates → MokoCassiopeia
  2. Click Advanced tab
  3. Paste the kit <script> tag into the Custom Scripts (Head) field
  4. Save
Option B — Custom HTML Module
  1. Admin → Content → Site Modules → New
  2. Choose Custom HTML
  3. Paste the kit <script> tag as content
  4. Position: debug | Published on all pages
  5. Save

Kit settings you can configure without touching code

  • Version lock — pin to 7.1.0 or follow Latest
  • Subsetting — serve only the icons your site actually uses (faster load)
  • v4 compatibility — maps old fa fa-icon classes to FA 7 equivalents
  • Custom icons — upload your own SVGs and use them alongside FA icons (Pro)
  • SVG vs Web Font — switch delivery mode without changing your HTML

Method 2 — Self-Host FA 7 Free

Download the web package from fontawesome.com/versions and host the files yourself.

  1. Download fontawesome-free-7.1.0-web.zip
  2. Unzip and copy the folder into your Joomla /media/ directory, e.g. /media/fontawesome/
  3. Link the stylesheet in the template’s Custom Styles (Head) field:
<link rel="stylesheet" href="/media/fontawesome/css/all.min.css">
Self-hosting avoids third-party requests and works offline. The trade-off is that you manage updates manually.

Basic Usage

Icon class syntax is identical between FA 6 and FA 7 — existing markup doesn’t need to change.

<!-- Solid (Free) -->
<i class="fa-solid fa-check"></i>

<!-- Regular (Free) -->
<i class="fa-regular fa-heart"></i>

<!-- Brands (Free) -->
<i class="fa-brands fa-github"></i>

<!-- Short aliases also work -->
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="fab fa-twitter"></i>

Sizing & CSS Customisation

<!-- Relative sizes: xs, sm, lg, xl, 2xl -->
<i class="fa-solid fa-house fa-lg"></i>
<i class="fa-solid fa-house fa-2xl"></i>

<!-- Fixed sizes: 1x through 10x -->
<i class="fa-solid fa-house fa-3x"></i>

<!-- Color via CSS -->
<i class="fa-solid fa-fire" style="color:var(--bs-danger)"></i>

<!-- Spin animation -->
<i class="fa-solid fa-spinner fa-spin"></i>

<!-- Fixed-width (useful in menus/lists) -->
<i class="fa-solid fa-home fa-fw"></i> Home

Live Examples

Styles (Free)
fa-solid
fa-regular
fa-brands
Sizes
Common Icons
fa-house fa-user fa-envelope fa-check fa-xmark fa-bars fa-magnifying-glass fa-cart-shopping fa-phone fa-location-dot fa-arrow-right fa-spinner (spin)

Free vs Pro

FeatureFreePro
Solid, Regular, Brands icons Yes Yes
Light, Thin, Duotone, Sharp styles No Yes
Icon count 2,000+ 26,000+
Kit hosting Yes Yes
Custom icon uploads No Yes
Icon subsetting No Yes

Resources