Getting Started

Install the package using your preferred package manager:

npm install font-awesome-for-phaser

pnpm add font-awesome-for-phaser

yarn add font-awesome-for-phaser

Before using Font Awesome for Phaser, make sure you have:

• Phaser 3 installed in your project
• Font Awesome fonts available (either via CDN or self-hosted)

To use Font Awesome icons in your Phaser game, you need to load the Font Awesome fonts before initializing your game.

The simplest way is to use the CDN version:

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

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: YourScene,
};

// Load Font Awesome before starting the game
loadFont().then(() => {
  new Game(config);
});

If you prefer async/await syntax:

async function startGame() {
  await loadFont();
  new Game(config);
}

startGame();

The library is built with TypeScript and includes full type definitions. No additional configuration is needed - just import and use!

import { loadFont, IconText, getIconChar } from 'font-awesome-for-phaser';
// All types are automatically available

Once you’ve set up the library, you can verify it’s working by creating a simple icon in one of your scenes:

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

class MyScene extends Phaser.Scene {
  create() {
    // Create a simple game controller icon
    const icon = new IconText(this, 100, 100, 'gamepad', 64, {
      color: '#ffffff',
      iconStyle: 'solid',
    });
    this.add.existing(icon);
  }
}

If you see a gamepad icon appear at position (100, 100), you’re all set! 🎉

• Learn about Basic Usage patterns
• Explore the IconText Component
• Configure Self-Hosted Fonts for production
• Check the API Reference for all available functions

1. Make sure loadFont() completes before creating the game
2. Check that the font name is wrapped in quotes: font: '36px FontAwesome' (not font: 36px FontAwesome)
3. Verify you’re using the correct icon style for your chosen icon

1. Ensure you have @types/phaser installed
2. Update to the latest version of the library
3. Check your tsconfig.json includes proper module resolution