Font Awesome for Phaser

Main utilities and types for game development with Phaser.

You can check a small demo clicking here.

📦 Installation

npm install font-awesome-for-phaser
# or
pnpm add font-awesome-for-phaser
# or
yarn add font-awesome-for-phaser

🌐 UMD/CDN (JavaScript)

If you prefer not to use TypeScript or want to include the library via CDN, you can use the UMD build:

<script src="https://cdn.jsdelivr.net/npm/font-awesome-for-phaser@0.9.0/dist/font-awesome-for-phaser.min.js"></script>

The library will be available globally as window.FontAwesomeForPhaser. You can use it like this:

// Load the font
await window.FontAwesomeForPhaser.loadFont();

⚠️ Note: While UMD builds are available, we strongly recommend using TypeScript for better type safety, IntelliSense, and development experience. The TypeScript version provides better error detection and autocomplete features.

🚀 Add to your project

First, you must have the free font awesome imported in your page.

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

const config: Phaser.Types.Core.GameConfig = {
  //......
};

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

// or
async function startGame() {
  await loadFont();

  new Game(config);
}

If you want to use self-hosted fonts, you can pass a URL pointing to your all.min.css file:

loadFont('/fonts/font-awesome/all.min.css').then(() => {
  new Game(config);
})

Usage

You can use Font Awesome icons in your Phaser game in two ways:

Using icon as text

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

// .....
const iconText = scene.add.text(0, 0, char, {
  font: `36px 'FontAwesome'`, // IMPORTANT! The name of the font MUST BE between char ('), if you use `font: '36px FontAwesome', won't work
  color: '#ffffff',
});
// PS: The font should be 'FontAwesome', or 'Font Awesome 7 Free' or 'Font Awesome 7 Brands'. Depends of the char

iconText.setOrigin(0.5);
scene.add.existing(iconText);

// Or you can use our component
import { IconText } from 'font-awesome-for-phaser';

// PS: `this` is the scene
const icon = new IconText(this, 90, 90, 'gamepad', 64, {
  color: '#0066cc',
  iconStyle: 'solid', // 'solid' | 'regular' | 'brands';
});
this.add.existing(icon); // Don't forget to add in scene

Documentation

You can read the full documentation in this link.