Font Awesome User's Guide | Oorian Framework

1. Overview

The Oorian FontAwesome Library provides a complete Java wrapper for Font Awesome, the world's most popular icon library. It lets you add icons to your Oorian pages entirely from Java with full type safety, fluent method chaining, and support for all Font Awesome families, styles, animations, and transformations.

Key Features

Over 4,200 icon name constants via FaIconName -- no more typos in icon strings
All 5 Font Awesome icon families: Classic, Duotone, Sharp, Sharp Duotone, and Brands
17 icon styles spanning Solid, Regular, Light, and Thin across families
9 built-in CSS animations (beat, bounce, spin, fade, shake, and more)
Rotation (90/180/270 degrees) and flip (horizontal/vertical/both) transformations
Relative and literal sizing from 2XS to 10x
Flexible resource loading: CDN, local files, or Font Awesome Kit
Fluent API with method chaining for concise icon configuration

2. Getting Started

Required Files

The Font Awesome extension consists of two components:

File	Description
`oorian-fontawesome-x.y.z.jar`	The Oorian Font Awesome library JAR. Add this to your web application's classpath (e.g., `WEB-INF/lib`). Available from the downloads page.
`all.min.css`	The Font Awesome CSS stylesheet. By default, this is loaded from CDN (`cdnjs.cloudflare.com`). To host locally, download from the Font Awesome download page and deploy the `css/` and `webfonts/` folders.

CDN Mode (Default): By default, the library loads Font Awesome CSS from cdnjs.cloudflare.com. Set a local root path with FontAwesome.setFontAwesomeRootPath("/fontawesome") to use local files instead.

Initialize the Library

In your page's createBody() method, call FontAwesome.initialize(this) to add the required CSS resources.

Java

@Override
protected void createBody(Body body)
{
    FontAwesome.initialize(this);
}

That's it! The initialize() call adds the Font Awesome CSS to the page head. No JavaScript code is needed.

Custom Configuration (Optional)

If your files are hosted locally instead of CDN, set the root path before calling initialize():

Java

FontAwesome.setFontAwesomeRootPath("/assets/fontawesome");
FontAwesome.initialize(this);

Create an Icon

After initializing the library, create icon components and add them to the page body.

Java

// Create a solid home icon
FaIcon homeIcon = new FaIcon(FaIcon.SOLID, FaIconName.HOUSE);
body.addElement(homeIcon);

3. FaIcon Component

FaIcon is the primary class for rendering Font Awesome icons. It extends the Oorian I element (the HTML <i> tag), which is the standard element for Font Awesome icons. Each constructor sets the appropriate CSS classes on the element.

Constructors

FaIcon(String styleAndName) — Creates an icon from a raw class string. Use this when you have a pre-built Font Awesome class string:

Java

FaIcon icon = new FaIcon("fa-solid fa-globe");

FaIcon(IconStyle style, String iconName) — Creates an icon with a type-safe style and icon name. This is the most commonly used constructor:

Java

FaIcon icon = new FaIcon(FaIcon.SOLID, FaIconName.GLOBE);
FaIcon icon2 = new FaIcon(FaIcon.REGULAR, "calendar");

FaIcon(IconStyle style, String iconName, float fontSize) — Creates an icon with style, name, and a pixel-based font size:

Java

FaIcon icon = new FaIcon(FaIcon.SOLID, FaIconName.STAR, 24f);

FaIcon(IconStyle style, String iconName, Color color) — Creates an icon with style, name, and a Color object:

Java

FaIcon icon = new FaIcon(FaIcon.SOLID, FaIconName.HEART, Color.RED);

FaIcon(IconStyle style, String iconName, float fontSize, Color color) — Creates an icon with style, name, pixel font size, and color:

Java

FaIcon icon = new FaIcon(FaIcon.SOLID, FaIconName.STAR, 32f, Color.GOLD);

Configuration Methods

All configuration methods return this for fluent chaining:

Method	Returns	Description
`setIconColor(Color color)`	`FaIcon`	Sets the icon color using a `Color` object
`setIconColor(String color)`	`FaIcon`	Sets the icon color using a CSS color string (e.g., `"#e74c3c"`)
`setSize(FaSize size)`	`FaIcon`	Applies a Font Awesome size class
`setAnimation(FaAnimation animation)`	`FaIcon`	Applies a CSS animation effect
`setRotate(FaRotate rotate)`	`FaIcon`	Applies a fixed rotation angle
`setFlip(FaFlip flip)`	`FaIcon`	Applies a mirror transformation
`setFixedWidth(boolean fixedWidth)`	`FaIcon`	Toggles fixed width (`fa-fw`) for consistent alignment

Fluent Chaining Example

Java

FaIcon icon = new FaIcon(FaIcon.DUOTONE_SOLID, FaIconName.GEAR)
    .setAnimation(FaAnimation.SPIN)
    .setSize(FaSize.X3)
    .setIconColor("#3498db");
body.addElement(icon);

4. Icon Styles

Font Awesome organizes icons into families, each offering multiple weight styles. The FaIcon.IconStyle enum defines all 17 styles, and FaIcon provides convenient static constants for direct access.

Classic Family

The standard Font Awesome icons. Solid is included in the free tier; Regular, Light, and Thin are Pro only.

Constant	CSS Class	Description
`FaIcon.SOLID`	`fa-solid`	Filled, bold icons (Free)
`FaIcon.REGULAR`	`fa-regular`	Outlined icons (Pro)
`FaIcon.LIGHT`	`fa-light`	Thin-stroked icons (Pro)
`FaIcon.THIN`	`fa-thin`	Ultra-light icons (Pro)

Java

FaIcon solid   = new FaIcon(FaIcon.SOLID, FaIconName.HOUSE);
FaIcon regular = new FaIcon(FaIcon.REGULAR, FaIconName.HOUSE);
FaIcon light   = new FaIcon(FaIcon.LIGHT, FaIconName.HOUSE);
FaIcon thin    = new FaIcon(FaIcon.THIN, FaIconName.HOUSE);

Duotone Family

Two-layered icons with primary and secondary colors. All Duotone styles are Pro only.

Constant	CSS Classes	Description
`FaIcon.DUOTONE_SOLID`	`fa-duotone fa-solid`	Two-tone filled icons
`FaIcon.DUOTONE_REGULAR`	`fa-duotone fa-regular`	Two-tone outlined icons
`FaIcon.DUOTONE_LIGHT`	`fa-duotone fa-light`	Two-tone light icons
`FaIcon.DUOTONE_THIN`	`fa-duotone fa-thin`	Two-tone ultra-light icons

Java

FaIcon icon = new FaIcon(FaIcon.DUOTONE_SOLID, FaIconName.CALENDAR_CHECK);

Sharp Family

Squared-off corners and geometric edges. All Sharp styles are Pro only.

Constant	CSS Classes	Description
`FaIcon.SHARP_SOLID`	`fa-sharp fa-solid`	Sharp filled icons
`FaIcon.SHARP_REGULAR`	`fa-sharp fa-regular`	Sharp outlined icons
`FaIcon.SHARP_LIGHT`	`fa-sharp fa-light`	Sharp light icons
`FaIcon.SHARP_THIN`	`fa-sharp fa-thin`	Sharp ultra-light icons

Sharp Duotone Family

Combines the geometric look of Sharp with the two-layer Duotone rendering. Pro only.

Constant	CSS Classes	Description
`FaIcon.SHARP_DUOTONE_SOLID`	`fa-sharp-duotone fa-solid`	Sharp two-tone filled
`FaIcon.SHARP_DUOTONE_REGULAR`	`fa-sharp-duotone fa-regular`	Sharp two-tone outlined
`FaIcon.SHARP_DUOTONE_LIGHT`	`fa-sharp-duotone fa-light`	Sharp two-tone light
`FaIcon.SHARP_DUOTONE_THIN`	`fa-sharp-duotone fa-thin`	Sharp two-tone ultra-light

Brands Family

Logos and brand marks for companies, platforms, and services. Available in the free tier.

Constant	CSS Class	Description
`FaIcon.BRANDS`	`fa-brands`	Brand and logo icons (Free)

Java

FaIcon github = new FaIcon(FaIcon.BRANDS, FaIconName.GITHUB);
FaIcon twitter = new FaIcon(FaIcon.BRANDS, FaIconName.TWITTER);
FaIcon linkedin = new FaIcon(FaIcon.BRANDS, FaIconName.LINKEDIN);

Free vs. Pro: FaIcon.SOLID and FaIcon.BRANDS are available with Font Awesome Free. All other styles (Regular, Light, Thin, Duotone, Sharp, Sharp Duotone) require a Font Awesome Pro subscription and Kit code.

5. Icon Name Constants

The library provides two classes with icon name constants. FaIconName is the current, comprehensive class with 4,203 constants covering all Font Awesome 7.x Pro icons. FaIcons is the legacy class, which is now deprecated.

FaIconName (Recommended)

Contains 4,203 public static final String constants, one for each icon in Font Awesome 7.x. Constants are named using UPPER_SNAKE_CASE matching the icon slug. Numeric names are prefixed with an underscore.

Java

// Standard icons
FaIconName.HOUSE           // "house"
FaIconName.CALENDAR_CHECK  // "calendar-check"
FaIconName.MAGNIFYING_GLASS // "magnifying-glass"
FaIconName.USER_GRADUATE   // "user-graduate"

// Brand icons
FaIconName.GITHUB     // "github"
FaIconName.TWITTER    // "twitter"
FaIconName.BLUESKY    // "bluesky"

// Numeric icons (underscore-prefixed)
FaIconName._0          // "0"
FaIconName._42_GROUP   // "42-group"
FaIconName._500PX      // "500px"

FaIcons (Legacy - Deprecated)

The original constants class with approximately 190 commonly used icon names. Also provides static factory methods. This class is deprecated; prefer FaIconName for new code.

Java

// Legacy usage (still works but deprecated)
FaIcons.GLOBE           // "globe"
FaIcons.CALENDAR_CHECK  // "calendar-check"
FaIcons.TRASH_CAN       // "trash-can"

Migration: To migrate from FaIcons to FaIconName, simply change the class name. The constant names and values are identical for the overlapping icons. For example, FaIcons.GLOBE becomes FaIconName.GLOBE.

6. Icon Sizing

The FaSize enum provides two categories of sizing: relative sizes that scale relative to the parent element's font size, and literal sizes that apply a fixed multiplier.

Relative Sizes (em-based)

These sizes scale relative to the current font size and maintain text alignment:

Constant	CSS Class	Scale
`FaSize.XXS`	`fa-2xs`	0.625em
`FaSize.XS`	`fa-xs`	0.75em
`FaSize.S`	`fa-sm`	0.875em
`FaSize.L`	`fa-lg`	1.25em
`FaSize.XL`	`fa-xl`	1.5em
`FaSize.XXL`	`fa-2xl`	2em

Literal Sizes (1x–10x)

These apply a fixed multiplier to the icon's base size:

Constant	CSS Class	Multiplier
`FaSize.X1`	`fa-1x`	1x
`FaSize.X2`	`fa-2x`	2x
`FaSize.X3`	`fa-3x`	3x
`FaSize.X4`	`fa-4x`	4x
`FaSize.X5`	`fa-5x`	5x
`FaSize.X6`	`fa-6x`	6x
`FaSize.X7`	`fa-7x`	7x
`FaSize.X8`	`fa-8x`	8x
`FaSize.X9`	`fa-9x`	9x
`FaSize.X10`	`fa-10x`	10x

Usage Examples

Java

// Relative sizing -- good for inline text
FaIcon small = new FaIcon(FaIcon.SOLID, FaIconName.INFO).setSize(FaSize.XS);
FaIcon large = new FaIcon(FaIcon.SOLID, FaIconName.INFO).setSize(FaSize.XXL);

// Literal sizing -- good for standalone icons or hero sections
FaIcon hero = new FaIcon(FaIcon.SOLID, FaIconName.ROCKET).setSize(FaSize.X5);

Pixel-Based Sizing (via Constructor)

For precise control, use the constructor that accepts a float font size in pixels:

Java

// Sets font-size: 48px directly via inline style
FaIcon icon = new FaIcon(FaIcon.SOLID, FaIconName.STAR, 48f);

Choosing a sizing approach: Use FaSize relative sizes when icons appear inline with text. Use literal sizes or pixel-based sizing for standalone icon displays, hero sections, or when exact dimensions are required.

7. Animations

The FaAnimation enum provides 9 built-in CSS animations that can be applied to any icon. Animations are powered by Font Awesome's CSS and run entirely in the browser.

Constant	CSS Class(es)	Effect
`FaAnimation.BEAT`	`fa-beat`	Scales the icon up and down rhythmically
`FaAnimation.BEAT_FADE`	`fa-beat-fade`	Beat animation combined with an opacity fade
`FaAnimation.BOUNCE`	`fa-bounce`	Icon bounces up and down
`FaAnimation.FADE`	`fa-fade`	Fades in and out
`FaAnimation.FLIP`	`fa-flip`	3D flip along the Y axis
`FaAnimation.SHAKE`	`fa-shake`	Shakes back and forth (great for alerts)
`FaAnimation.SPIN`	`fa-spin`	Continuous 360-degree rotation
`FaAnimation.SPIN_REVERSE`	`fa-spin fa-spin-reverse`	Continuous rotation in reverse (counter-clockwise)
`FaAnimation.SPIN_PULSE`	`fa-spin-pulse`	Rotation in discrete steps (8 frames)

Usage

Java

// Spinning loading indicator
FaIcon spinner = new FaIcon(FaIcon.SOLID, FaIconName.SPINNER)
    .setAnimation(FaAnimation.SPIN)
    .setSize(FaSize.X2);

// Pulsing notification bell
FaIcon bell = new FaIcon(FaIcon.SOLID, FaIconName.BELL)
    .setAnimation(FaAnimation.SHAKE)
    .setIconColor("#f39c12");

// Bouncing attention-grabber
FaIcon arrow = new FaIcon(FaIcon.SOLID, FaIconName.ARROW_DOWN)
    .setAnimation(FaAnimation.BOUNCE)
    .setSize(FaSize.X3);

// Heartbeat effect
FaIcon heart = new FaIcon(FaIcon.SOLID, FaIconName.HEART)
    .setAnimation(FaAnimation.BEAT)
    .setIconColor("#e74c3c");

Performance: Animations use CSS transforms and opacity transitions. Avoid placing a large number of simultaneously animated icons on a single page, as this can impact browser rendering performance.

8. Rotations & Flips

Icons can be rotated to fixed angles or flipped (mirrored) along one or both axes. These transformations are applied via CSS classes and can be combined with other features like animations and sizing.

Rotations (FaRotate)

Constant	CSS Class	Effect
`FaRotate.DEG_90`	`fa-rotate-90`	Rotates 90 degrees clockwise
`FaRotate.DEG_180`	`fa-rotate-180`	Rotates 180 degrees (upside down)
`FaRotate.DEG_270`	`fa-rotate-270`	Rotates 270 degrees clockwise (or 90 counter-clockwise)

Java

// Right arrow rotated to point down
FaIcon downArrow = new FaIcon(FaIcon.SOLID, FaIconName.ARROW_RIGHT)
    .setRotate(FaRotate.DEG_90);

// Upside-down icon
FaIcon flipped = new FaIcon(FaIcon.SOLID, FaIconName.THUMBS_UP)
    .setRotate(FaRotate.DEG_180);

Flips (FaFlip)

Constant	CSS Class	Effect
`FaFlip.HORZ`	`fa-flip-horizontal`	Mirrors horizontally (left-right)
`FaFlip.VERT`	`fa-flip-vertical`	Mirrors vertically (top-bottom)
`FaFlip.BOTH`	`fa-flip-both`	Mirrors in both directions

Java

// Horizontally flipped icon (mirror image)
FaIcon mirrored = new FaIcon(FaIcon.SOLID, FaIconName.PERSON_SNOWBOARDING)
    .setFlip(FaFlip.HORZ);

// Vertically flipped icon
FaIcon flippedVert = new FaIcon(FaIcon.SOLID, FaIconName.CARET_UP)
    .setFlip(FaFlip.VERT);

Combining Rotations, Flips, and Other Features

Java

// Rotated + colored + sized
FaIcon icon = new FaIcon(FaIcon.SHARP_SOLID, FaIconName.CIRCLE_ARROW_UP)
    .setRotate(FaRotate.DEG_90)
    .setSize(FaSize.X3)
    .setIconColor("#2ecc71");

// Flipped + animated
FaIcon plane = new FaIcon(FaIcon.SOLID, FaIconName.PLANE)
    .setFlip(FaFlip.HORZ)
    .setAnimation(FaAnimation.BOUNCE)
    .setSize(FaSize.X3)
    .setIconColor("#9b59b6");

9. Colors & Styling

Icon colors can be set using the setIconColor() method, which accepts either a CSS color string or an Oorian Color object. Since FaIcon extends the Oorian I element, all standard Oorian styling methods are also available.

Setting Colors

Java

// CSS color string (hex, named, rgb, etc.)
FaIcon red = new FaIcon(FaIcon.SOLID, FaIconName.HEART)
    .setIconColor("#e74c3c");

FaIcon blue = new FaIcon(FaIcon.SOLID, FaIconName.CIRCLE)
    .setIconColor("rgb(52, 152, 219)");

// Oorian Color object
FaIcon green = new FaIcon(FaIcon.SOLID, FaIconName.CHECK, Color.GREEN);

// Via constructor
FaIcon gold = new FaIcon(FaIcon.SOLID, FaIconName.STAR, 24f, Color.GOLD);

Fixed Width for Alignment

Use setFixedWidth(true) to ensure icons occupy the same horizontal space. This is essential when icons appear in vertical lists or navigation menus where alignment matters.

Java

// Navigation menu with aligned icons
FaIcon homeIcon = new FaIcon(FaIcon.SOLID, FaIconName.HOUSE).setFixedWidth(true);
FaIcon infoIcon = new FaIcon(FaIcon.SOLID, FaIconName.INFO).setFixedWidth(true);
FaIcon mailIcon = new FaIcon(FaIcon.SOLID, FaIconName.ENVELOPE).setFixedWidth(true);

Inherited Oorian Styling

Because FaIcon extends I (which extends Element), you can use all standard Oorian element methods for additional styling:

Java

FaIcon icon = new FaIcon(FaIcon.SOLID, FaIconName.STAR);
icon.setStyle("cursor: pointer; transition: color 0.3s;");
icon.addAttribute("title", "Favorite");

10. Factory Methods (FaIcons)

The FaIcons class provides static factory methods for quickly creating icons in any style. While FaIcons is deprecated, its factory methods remain a convenient shorthand. You can also use FaIconName constants with these methods.

Note: These factory methods live on the deprecated FaIcons class. For new projects, prefer the new FaIcon(IconStyle, String) constructor with FaIconName constants.

Classic Family Factory Methods

Method	Overload	Style
`FaIcons.createSolid(icon)`	`FaIcons.createSolid(icon, color)`	Solid
`FaIcons.createRegular(icon)`	`FaIcons.createRegular(icon, color)`	Regular
`FaIcons.createThin(icon)`	`FaIcons.createThin(icon, color)`	Thin

Duotone Family Factory Methods

Method	Overload	Style
`FaIcons.createDuotoneSolid(icon)`	`FaIcons.createDuotoneSolid(icon, color)`	Duotone Solid
`FaIcons.createDuotoneRegular(icon)`	`FaIcons.createDuotoneRegular(icon, color)`	Duotone Regular
`FaIcons.createDuotoneLight(icon)`	`FaIcons.createDuotoneLight(icon, color)`	Duotone Light
`FaIcons.createDuotoneThin(icon)`	`FaIcons.createDuotoneThin(icon, color)`	Duotone Thin

Sharp Family Factory Methods

Method	Overload	Style
`FaIcons.createSharpSolid(icon)`	`FaIcons.createSharpSolid(icon, color)`	Sharp Solid
`FaIcons.createSharpRegular(icon)`	`FaIcons.createSharpRegular(icon, color)`	Sharp Regular
`FaIcons.createSharpLight(icon)`	`FaIcons.createSharpLight(icon, color)`	Sharp Light
`FaIcons.createSharpThin(icon)`	`FaIcons.createSharpThin(icon, color)`	Sharp Thin

Sharp Duotone & Brands Factory Methods

Method	Overload	Style
`FaIcons.createSharpDuotoneSolid(icon)`	`FaIcons.createSharpDuotoneSolid(icon, color)`	Sharp Duotone Solid
`FaIcons.createSharpDuotoneRegular(icon)`	`FaIcons.createSharpDuotoneRegular(icon, color)`	Sharp Duotone Regular
`FaIcons.createSharpDuotoneLight(icon)`	`FaIcons.createSharpDuotoneLight(icon, color)`	Sharp Duotone Light
`FaIcons.createSharpDuotoneThin(icon)`	`FaIcons.createSharpDuotoneThin(icon, color)`	Sharp Duotone Thin
`FaIcons.createBrand(icon)`	`FaIcons.createBrand(icon, color)`	Brands

Examples

Java

// Using factory methods with FaIcons constants (legacy)
FaIcon globe = FaIcons.createSolid(FaIcons.GLOBE);
FaIcon redBell = FaIcons.createSolid(FaIcons.BELL, "#e74c3c");

// Using factory methods with FaIconName constants
FaIcon rocket = FaIcons.createDuotoneSolid(FaIconName.ROCKET);
FaIcon github = FaIcons.createBrand(FaIconName.GITHUB, "#333");
FaIcon sharp = FaIcons.createSharpSolid(FaIconName.GEAR, "#1a73e8");

Deprecated Factory Methods

The following methods have been renamed and should no longer be used:

Deprecated Method	Replacement
`FaIcons.createDual(icon)`	`FaIcons.createDuotoneSolid(icon)`
`FaIcons.createDual(icon, color)`	`FaIcons.createDuotoneSolid(icon, color)`

11. Complete Examples

Example 1: Base Page with Font Awesome

Create a reusable base page class that loads Font Awesome resources for all subclasses:

Java

import com.oorian.fontawesome.FontAwesome;
import com.oorian.html.HtmlPage;
import com.oorian.html.elements.Head;

public abstract class AppBasePage extends HtmlPage
{
    @Override
    protected void createHead(Head head)
    {
        head.addMeta("name", "viewport", "width=device-width, initial-scale=1.0");

        // Configure local Font Awesome files
        FontAwesome.setFontAwesomeRootPath("/fontawesome");
        FontAwesome.addResources(head);
    }
}

Example 2: Icon-Based Navigation Menu

Build a navigation sidebar with consistently aligned icons:

Java

private void createNavMenu(Div sidebar)
{
    addNavItem(sidebar, FaIconName.HOUSE,             "Dashboard");
    addNavItem(sidebar, FaIconName.USERS,             "Users");
    addNavItem(sidebar, FaIconName.CALENDAR_DAYS,     "Schedule");
    addNavItem(sidebar, FaIconName.CHART_PIE_SIMPLE,  "Reports");
    addNavItem(sidebar, FaIconName.GEAR,              "Settings");
}

private void addNavItem(Div container, String iconName, String label)
{
    Div item = new Div();
    item.setStyle("display: flex; align-items: center; padding: 12px 16px;");

    FaIcon icon = new FaIcon(FaIcon.SOLID, iconName)
        .setFixedWidth(true)
        .setIconColor("#666");

    Span text = new Span(label);
    text.setStyle("margin-left: 12px;");

    item.addElement(icon);
    item.addElement(text);
    container.addElement(item);
}

Example 3: Loading Indicator

Create a reusable loading spinner component:

Java

private Div createLoadingOverlay(String message)
{
    Div overlay = new Div();
    overlay.setStyle("display: flex; flex-direction: column; "
        + "align-items: center; justify-content: center; padding: 40px;");

    FaIcon spinner = new FaIcon(FaIcon.DUOTONE_SOLID, FaIconName.SPINNER_THIRD)
        .setAnimation(FaAnimation.SPIN)
        .setSize(FaSize.X3)
        .setIconColor("#4285f4");

    P text = new P(message);
    text.setStyle("margin-top: 16px; color: #666;");

    overlay.addElement(spinner);
    overlay.addElement(text);
    return overlay;
}

Example 4: Status Badges with Icons

Use different icon styles and colors to represent status:

Java

private Div createStatusBadge(String label, String iconName,
        String color, String bgColor)
{
    Div badge = new Div();
    badge.setStyle("display: inline-flex; align-items: center; padding: 6px 12px; "
        + "border-radius: 20px; background: " + bgColor + ";");

    FaIcon icon = new FaIcon(FaIcon.SOLID, iconName)
        .setIconColor(color)
        .setSize(FaSize.S);

    Span text = new Span(label);
    text.setStyle("margin-left: 6px; color: " + color + "; font-size: 0.85em;");

    badge.addElement(icon);
    badge.addElement(text);
    return badge;
}

// Usage
container.addElement(createStatusBadge("Active",   FaIconName.CIRCLE_CHECK,       "#2ecc71", "#e8f5e9"));
container.addElement(createStatusBadge("Warning",  FaIconName.TRIANGLE_EXCLAMATION, "#f39c12", "#fff8e1"));
container.addElement(createStatusBadge("Error",    FaIconName.CIRCLE_XMARK,       "#e74c3c", "#fce4ec"));

Example 5: Social Media Links

Create a row of brand icons for social media:

Java

private void createSocialLinks(Div footer)
{
    Div social = new Div();
    social.setStyle("display: flex; gap: 16px; justify-content: center;");

    social.addElement(createSocialIcon(FaIconName.GITHUB,    "#333"));
    social.addElement(createSocialIcon(FaIconName.LINKEDIN,  "#0077b5"));
    social.addElement(createSocialIcon(FaIconName.X_TWITTER, "#000"));
    social.addElement(createSocialIcon(FaIconName.INSTAGRAM, "#e4405f"));
    social.addElement(createSocialIcon(FaIconName.BLUESKY,   "#0085ff"));

    footer.addElement(social);
}

private FaIcon createSocialIcon(String iconName, String color)
{
    return new FaIcon(FaIcon.BRANDS, iconName)
        .setSize(FaSize.XL)
        .setIconColor(color);
}

Example 6: Complete Page

A full page demonstrating multiple Font Awesome features:

Java

@Page("/dashboard")
public class DashboardPage extends HtmlPage
{
    @Override
    protected void createHead(Head head)
    {
        head.setTitle("Dashboard");
        FontAwesome.addResources(head);
    }

    @Override
    protected void createBody(Body body)
    {
        // Header with brand icon
        Div header = new Div();
        header.addElement(new FaIcon(FaIcon.DUOTONE_SOLID, FaIconName.GAUGE_HIGH)
            .setSize(FaSize.X2)
            .setIconColor("#1a73e8"));
        header.addElement(new H1("Dashboard"));
        body.addElement(header);

        // Notification with animated bell
        FaIcon alertBell = new FaIcon(FaIcon.SOLID, FaIconName.BELL)
            .setAnimation(FaAnimation.SHAKE)
            .setIconColor("#f39c12");
        body.addElement(alertBell);

        // Metric cards with themed icons
        addMetricCard(body, FaIconName.USERS,      "1,247", "Total Users",  "#4285f4");
        addMetricCard(body, FaIconName.CHART_LINE, "89.2%", "Uptime",       "#2ecc71");
        addMetricCard(body, FaIconName.BOLT,       "342ms", "Avg Response", "#9b59b6");
    }

    private void addMetricCard(Body body, String iconName,
            String value, String label, String color)
    {
        Div card = new Div();
        card.addElement(new FaIcon(FaIcon.DUOTONE_SOLID, iconName)
            .setSize(FaSize.X2)
            .setIconColor(color));
        card.addElement(new H2(value));
        card.addElement(new P(label));
        body.addElement(card);
    }
}

← Back to Documentation View Feature Overview →

Table of Contents

1. Overview

Key Features

2. Getting Started

Required Files

Initialize the Library

Custom Configuration (Optional)

Create an Icon

3. FaIcon Component

Constructors

Configuration Methods

Fluent Chaining Example

4. Icon Styles

Classic Family

Duotone Family

Sharp Family

Sharp Duotone Family

Brands Family

5. Icon Name Constants

FaIconName (Recommended)

FaIcons (Legacy - Deprecated)

6. Icon Sizing

Relative Sizes (em-based)

Literal Sizes (1x–10x)

Usage Examples

Pixel-Based Sizing (via Constructor)

7. Animations

Usage

8. Rotations & Flips

Rotations (FaRotate)

Flips (FaFlip)

Combining Rotations, Flips, and Other Features

9. Colors & Styling

Setting Colors

Fixed Width for Alignment

Inherited Oorian Styling

10. Factory Methods (FaIcons)

Classic Family Factory Methods

Duotone Family Factory Methods

Sharp Family Factory Methods

Sharp Duotone & Brands Factory Methods

Examples

Deprecated Factory Methods

11. Complete Examples

Example 1: Base Page with Font Awesome

Example 2: Icon-Based Navigation Menu

Example 3: Loading Indicator

Example 4: Status Badges with Icons

Example 5: Social Media Links

Example 6: Complete Page