TNT | How to Use Font Awesome

1 What is Font Awesome — and why does TNT use it?

Before the 2026 redesign, TNT used image files from The Noun Project for icons — individual .png or .svg files downloaded, renamed, and stored in an images/ folder. That works, but it has downsides:

Every icon is a separate HTTP request (slows page load)
Resizing a raster PNG makes it blurry
Recoloring requires editing the file or writing CSS filters
Keeping track of dozens of image files is tedious

Font Awesome solves all of that. It is a web font where each “character” is an icon. Because it’s a font:

One CDN link loads every icon — no individual file downloads
Perfectly sharp at any size, on any screen (vector-based)
Recolor with a single CSS rule — color: red; is all it takes
Sizing is instant with Bootstrap text utilities or font-size
Industry standard — you will see FA on almost every professional site

S.P.A.R.K. connection: Choosing Font Awesome is itself a design decision — not a default. When you prompt an AI for UI help, understanding why a tool was chosen lets you ask better follow-up questions and critically evaluate the suggestions you get back.

Feature	Noun Project PNG/SVG	Font Awesome Free
No. of HTTP requests per icon	1 per file	0 (loaded with the font)
Sharpness at any size	SVG yes / PNG no	Yes (vector font)
Recolor with CSS	SVG inline only	Yes — just `color:`
Number of free icons	Unlimited (free tier)	~2,000+
Custom / unique artwork	Yes	No (predefined set)
Attribution required (free)?	Yes	No
Used in industry UIs	Sometimes	Very widely

Bottom line: Use Font Awesome for interface icons (buttons, nav, labels). Use Noun Project when you need a specific piece of illustration or custom artwork. TNT uses both — FA for UI elements, Noun Project for hero images and mascots.

2 Free vs Pro — what do you actually get for free?

Font Awesome has several tiers. As a student or indie developer, the Free tier is genuinely excellent. Here is what matters:

What	Free	Pro (~$99/yr)
Solid icons (`fas`)	~1,600 icons	~7,000 icons
Regular / outline icons (`far`)	Small subset	Full set
Brand logos (`fab`)	All brands	All brands
Light / Thin / Duotone styles	No	Pro only
Sharp style variants	No	Pro only
CDN delivery	Yes	Yes
Commercial use	Yes (SIL OFL)	Yes

Watch out: The Font Awesome website shows ALL icons by default, including Pro-only ones. If you copy an icon class name from the site without checking the filter, it may silently render as a blank square in your page. Always filter to Free before copying a class name. Step 3 shows you exactly how.

3 Loading Font Awesome in your page

One <link> tag in your <head> gives you every free icon:

<!-- Font Awesome 6.5 — Free tier via CDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
      rel="stylesheet">

That’s it. No npm, no download, no build step. The CDN delivers the font files automatically. Every page in the 2026 TNT site includes this line.

Alternative CDN: Font Awesome also provides their own CDN kit. Go to fontawesome.com/start, create a free account, and they give you a personalised <script> kit tag. The CDN link above works without an account and is what TNT uses for simplicity.

4 How to search for free icons

Follow these steps every time you need an icon:

Go to fontawesome.com/icons
Type a keyword in the search box (e.g. star, lock, house)
Click the “Free” filter button — it appears as a toggle near the top of the results. This is the critical step.
Click any icon in the results
On the icon’s detail page, click “Copy HTML” — it copies the ready-to-paste  tag
Paste it directly into your HTML

Pro tip: You can also filter by style (Solid, Regular, Brands) at the same time as Free. Most of the time you want Solid + Free — that gives you the largest selection.

Here are some icons you might find when searching common words:

fa-house

fa-star

fa-lock

fa-user

fa-envelope

fa-gear

fa-trash-can

fa-pen

fa-magnifying-glass

fa-circle-info

fa-triangle-exclamation

fa-check

fa-xmark

fa-arrow-right

fa-rocket

fa-gamepad

5 The HTML pattern — the `` tag

Every Font Awesome icon follows the same pattern:

<i class="PREFIX fa-ICON-NAME"></i>

Two things to fill in: the prefix and the icon name.

Prefix — tells FA which style to use:

fas Solid — filled shapes. Largest free selection. Use this most of the time.
far Regular — outline/stroke style. Smaller free subset.
fab Brands — company and technology logos (GitHub, Bootstrap, JS, etc.).

Icon name — always starts with fa- followed by the name:

<!-- Solid star -->
<i class="fas fa-star"></i>

<!-- Outline star (free subset) -->
<i class="far fa-star"></i>

<!-- GitHub brand logo -->
<i class="fab fa-github"></i>

<!-- Bootstrap logo -->
<i class="fab fa-bootstrap"></i>

Live result:

fas fa-star

far fa-star

fab fa-github

fab fa-bootstrap

Empty tag: The  tag has no visible text inside it — the icon is rendered purely by CSS from the class name. Never put text between the tags. Always close the tag: , not .

6 Sizing icons

Icons inherit the font-size of their parent element. There are two easy ways to change the size:

Method A — Font Awesome size classes (quickest):

<i class="fas fa-star fa-xs"></i>    <!-- 0.75em -->
<i class="fas fa-star fa-sm"></i>    <!-- 0.875em -->
<i class="fas fa-star"></i>           <!-- 1em (default) -->
<i class="fas fa-star fa-lg"></i>    <!-- 1.25em -->
<i class="fas fa-star fa-xl"></i>    <!-- 1.5em -->
<i class="fas fa-star fa-2xl"></i>   <!-- 2em -->
<i class="fas fa-star fa-2x"></i>    <!-- 2em -->
<i class="fas fa-star fa-3x"></i>    <!-- 3em -->
<i class="fas fa-star fa-5x"></i>    <!-- 5em -->

fa-xs fa-sm default fa-lg fa-xl fa-2xl fa-3x fa-5x

Method B — inline font-size CSS (most precise):

<i class="fas fa-star" style="font-size: 2.5rem;"></i>

Best practice: Use FA size classes (fa-lg, fa-2x, etc.) for quick adjustments. Use font-size in CSS when you need a precise value that matches your design system — for example, to match the line-height of surrounding text.

7 Coloring icons

Because icons are a font, they respond to the CSS color property — the same property you use for text:

<!-- Inline style -->
<i class="fas fa-heart" style="color:#E74C3C;"></i>

<!-- Bootstrap text-color utility -->
<i class="fas fa-heart text-danger"></i>
<i class="fas fa-heart text-success"></i>
<i class="fas fa-heart text-warning"></i>
<i class="fas fa-heart text-primary"></i>
<i class="fas fa-heart text-muted"></i>

<!-- Inherit from parent (most flexible) -->
<button class="btn btn-success">
    <i class="fas fa-check"></i> Save   <!-- icon inherits button text color -->
</button>

hex #E74C3C text-danger text-success text-warning text-primary text-muted CSS variable

8 Using icons in context

Icons are most useful when they support text, not replace it. Here are the patterns TNT uses throughout the site:

In a button — icon before the label with me-1 spacing:

<button class="btn btn-success btn-sm">
    <i class="fas fa-shuffle me-1"></i> Encrypt
</button>

<button class="btn btn-danger btn-sm">
    <i class="fas fa-rotate-left me-1"></i> Clear All
</button>

In a heading:

<h2><i class="fas fa-lock me-2" style="color:#C67B20;"></i> Encrypted Output</h2>

Encrypted Output

In a list:

<ul class="list-unstyled">
    <li><i class="fas fa-check text-success me-2"></i> Free to use</li>
    <li><i class="fas fa-check text-success me-2"></i> Scales perfectly</li>
    <li><i class="fas fa-xmark text-danger me-2"></i> Requires internet (CDN)</li>
</ul>

Free to use
Scales perfectly
Requires internet (CDN)

Accessibility note — always add aria-hidden="true" when the icon is purely decorative (the text beside it already conveys the meaning):

<button class="btn btn-primary">
    <i class="fas fa-save" aria-hidden="true"></i> Save
</button>

<!-- Icon-only button? Add a screen-reader label -->
<button class="btn btn-primary" aria-label="Save document">
    <i class="fas fa-save"></i>
</button>

9 Live icon explorer

Type a Font Awesome icon name below (without the fa- prefix) and pick a style to see it rendered instantly.

Icon name:

fa-

Style prefix:

Size:

Try these:

10 Quick reference card

Bookmark this — or just remember steps 3-6 and you are set.

<!-- 1. Load FA in <head> -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
      rel="stylesheet">

<!-- 2. Use an icon -->
<i class="fas fa-rocket"></i>          <!-- solid, default size  -->
<i class="fas fa-rocket fa-2x"></i>    <!-- solid, 2× size       -->
<i class="fas fa-rocket text-danger"></i> <!-- Bootstrap red color  -->
<i class="fas fa-rocket" style="color:#E69F4D;"></i>  <!-- hex color  -->
<i class="far fa-star"></i>             <!-- regular / outline    -->
<i class="fab fa-github"></i>           <!-- brand logo           -->

<!-- 3. In a button -->
<button class="btn btn-primary">
    <i class="fas fa-save me-1" aria-hidden="true"></i> Save
</button>

Using Font Awesome

1 What is Font Awesome — and why does TNT use it?

2 Free vs Pro — what do you actually get for free?

3 Loading Font Awesome in your page

4 How to search for free icons

5 The HTML pattern — the `<i>` tag

6 Sizing icons

7 Coloring icons

8 Using icons in context

Encrypted Output

9 Live icon explorer

10 Quick reference card

Using Font Awesome

1 What is Font Awesome — and why does TNT use it?

2 Free vs Pro — what do you actually get for free?

3 Loading Font Awesome in your page

4 How to search for free icons

5 The HTML pattern — the <i> tag

6 Sizing icons

7 Coloring icons

8 Using icons in context

Encrypted Output

9 Live icon explorer

10 Quick reference card

5 The HTML pattern — the `<i>` tag