API Reference

This page provides a complete reference for all functions, classes, and types available in Font Awesome for Phaser.

Functions

loadFont()

Loads Font Awesome fonts before initializing your Phaser game.

function loadFont(cssUrl?: string): Promise<void>

Parameters

Name	Type	Default	Description
`cssUrl`	`string`	Font Awesome CDN	Optional URL to the Font Awesome CSS file

Returns

Promise<void> - Resolves when the font is loaded and ready to use.

Examples

Using CDN (default):

import { loadFont } from 'font-awesome-for-phaser';

await loadFont();

Using self-hosted fonts:

await loadFont('/fonts/font-awesome/all.min.css');

With promise chain:

loadFont().then(() => {
  new Phaser.Game(config);
});

Notes

Must be called before creating any icons
Should complete before initializing your Phaser game
Uses Font Awesome 6 Free CDN by default
Font files are loaded asynchronously

getIconChar()

Returns the Unicode character for a Font Awesome icon.

function getIconChar(iconName: string): string

Parameters

Name	Type	Description
`iconName`	`string`	The Font Awesome icon name (e.g., ‘heart’, ‘star’)

Returns

string - The Unicode character representing the icon.

Examples

import { getIconChar } from 'font-awesome-for-phaser';

const heartChar = getIconChar('heart');
// Returns: '\uf004'

const starChar = getIconChar('star');
// Returns: '\uf005'

Using with Phaser text:

const icon = this.add.text(100, 100, getIconChar('gamepad'), {
  font: "48px 'FontAwesome'",
  color: '#ffffff',
});

Notes

Returns the character immediately (synchronous)
Case-sensitive icon names
Does not validate if the icon exists
Same icon name may exist in multiple styles (solid/regular/brands)

Classes

IconText

A Phaser text object configured for Font Awesome icons.

class IconText extends Phaser.GameObjects.Text

Extends Phaser.GameObjects.Text with automatic Font Awesome configuration.

Constructor

constructor(
  scene: Phaser.Scene,
  x: number,
  y: number,
  iconName: string,
  size: number,
  options?: IconTextOptions
)

Parameters

Name	Type	Description
`scene`	`Phaser.Scene`	The scene the icon belongs to
`x`	`number`	X coordinate
`y`	`number`	Y coordinate
`iconName`	`string`	Font Awesome icon name
`size`	`number`	Icon size in pixels
`options`	`IconTextOptions`	Optional configuration

Examples

Basic usage:

const icon = new IconText(this, 100, 100, 'heart', 48, {
  color: '#ff0000',
  iconStyle: 'solid',
});
this.add.existing(icon);

With centering:

const icon = new IconText(this, 400, 300, 'star', 64);
icon.setOrigin(0.5);
this.add.existing(icon);

Interactive icon:

const button = new IconText(this, 100, 100, 'play', 64, {
  color: '#00ff00',
});
button.setInteractive({ useHandCursor: true });
button.on('pointerdown', () => {
  this.scene.start('GameScene');
});
this.add.existing(button);

Inherited Methods

Since IconText extends Phaser.GameObjects.Text, all text methods are available:

setOrigin(x, y) - Set the origin point
setScale(scale) - Scale the icon
setAlpha(alpha) - Set transparency
setTint(color) - Apply tint color
setInteractive() - Make clickable
setVisible(visible) - Show/hide
destroy() - Remove from scene

And many more! See Phaser Text documentation.

Types

IconTextOptions

Configuration options for IconText.

interface IconTextOptions {
  color?: string;
  iconStyle?: IconStyle;
}

Properties

Property	Type	Default	Description
`color`	`string`	`'#ffffff'`	Hex color code (e.g., ‘#ff0000’)
`iconStyle`	`IconStyle`	`'solid'`	Icon style: ‘solid’, ‘regular’, or ‘brands’

Example

const options: IconTextOptions = {
  color: '#0066cc',
  iconStyle: 'solid',
};

const icon = new IconText(this, 100, 100, 'gamepad', 48, options);

IconStyle

Union type for available icon styles.

type IconStyle = 'solid' | 'regular' | 'brands';

Values

Value	Description	Font Family
`'solid'`	Filled icons (most common)	`'FontAwesome'` or `'Font Awesome 6 Free'`
`'regular'`	Outlined icons	`'Font Awesome 6 Free'`
`'brands'`	Brand/logo icons	`'Font Awesome 6 Brands'`

Example

// Solid style (default)
const solidIcon = new IconText(this, 100, 100, 'heart', 48, {
  iconStyle: 'solid',
});

// Regular style
const regularIcon = new IconText(this, 200, 100, 'heart', 48, {
  iconStyle: 'regular',
});

// Brands style
const brandIcon = new IconText(this, 300, 100, 'github', 48, {
  iconStyle: 'brands',
});

Notes

Not all icons are available in all styles
Check Font Awesome to see which styles are available for each icon
Solid is the most comprehensive style with the most icons

Complete Usage Example

Here’s a complete example showing all API features:

import { loadFont, getIconChar, IconText } from 'font-awesome-for-phaser';
import type { IconTextOptions } from 'font-awesome-for-phaser';

// 1. Load fonts before game starts
async function startGame() {
  await loadFont('/fonts/font-awesome/all.min.css');

  const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: GameScene,
  };

  new Phaser.Game(config);
}

class GameScene extends Phaser.Scene {
  create() {
    // 2. Using IconText component
    const playButton = new IconText(this, 400, 300, 'play-circle', 80, {
      color: '#00ff00',
      iconStyle: 'solid',
    });
    playButton.setOrigin(0.5);
    playButton.setInteractive({ useHandCursor: true });
    this.add.existing(playButton);

    // 3. Using getIconChar with manual text
    const heartChar = getIconChar('heart');
    const healthText = this.add.text(20, 20, heartChar, {
      font: "32px 'FontAwesome'",
      color: '#ff0000',
    });

    // 4. Using options object
    const iconOptions: IconTextOptions = {
      color: '#ffd700',
      iconStyle: 'solid',
    };
    const coinIcon = new IconText(this, 100, 20, 'coins', 32, iconOptions);
    this.add.existing(coinIcon);
  }
}

startGame();

TypeScript Support

Font Awesome for Phaser is written in TypeScript and includes full type definitions. No additional @types package needed!

import { loadFont, IconText, getIconChar } from 'font-awesome-for-phaser';
import type { IconTextOptions, IconStyle } from 'font-awesome-for-phaser';

// Full IntelliSense and type checking
const options: IconTextOptions = {
  color: '#ff0000',
  iconStyle: 'solid', // ✓ Type checked
  // invalid: 'value',  // ✗ TypeScript error
};

Browser Support

Font Awesome for Phaser works in all modern browsers that support:

ES6+ JavaScript
CSS @font-face
WOFF2 fonts
Phaser 3

Tested on:

Chrome 90+
Firefox 88+
Safari 14+
Edge 90+

Next Steps

Check Icon Styles for available icons
Review Getting Started guide
Explore IconText Component examples