Add Font Awesome icons to your HTML5 games powered by Phaser thanks to its DOM support

With Phaser native DOM support you can add your preferred GUI framework to your HTML5 Phaser games.

I already showed you how to add Bootstrap components to Phaser projects and how to add jQuery UI components to Phaser projects, now it’s time to see how to add Font Awesome icons.

You may wonder why you should need to use DOM icons when you can draw your own icons as PNG images.

Well, mostly for two reasons:

1 – You suck at designing icons and you don’t want to be the millionth developer to use just another icon pack you can find on the web.

2 – Because they are cool, and thanks to some CSS tricks you can achieve interesting results, like this button:

Press it. It works! And it’s a Font Awesome icon. Actually, they are three Font Awesome icons on a layer with SVG gradients.

Let’s have a look at the files, starting from index.html where Font Awesome is loaded.

<!DOCTYPE html>
<html>
	<head>
        <style type = "text/css">
            body{
                background: #000000;
                padding: 0px;
                margin: 0px;
            }
        </style>
		<script defer src="all.js"></script>
		<script src = "phaser.min.js"></script>
        <script src = "game.js"></script>
    </head>
	<body>
        <div id = "thegame"></div>
	</body>
</html>

You have to load Font Awesome through JavaScript, and you find all information in the official Font Awesome docs page.

Then, the creation of the button itself, in a file called fontawesome.html:

<style type = "text/css">
    .smallcircle svg * {
        fill: url(#gradient1);
    }
    .playbutton svg * {
        fill: url(#gradient2);
    }
    .fa-play g g path {
        stroke: black;
        stroke-width: 20;
    }
</style>
<span class = "fa-layers fa-fw fa-10x">
    <i class = "fas fa-circle" style = "color:black"></i>
    <span class = "smallcircle">
        <i class = "fas fa-circle" data-fa-transform = "shrink-3" style = "color:Tomato"></i>
    </span>
    <span class = "playbutton">
        <i class = "fas fa-play" data-fa-transform = "shrink-8" style = "margin-left:35px"></i>
    </span>
</span>
<svg width = "0" height = "0">
    <radialGradient id = "gradient1">
        <stop offset = "0%" style = "stop-color: rgb(252, 207, 49); stop-opacity: 1"/>
        <stop offset = "70%" style = "stop-color: rgb(252, 207, 49); stop-opacity: 1"/>
        <stop offset = "100%" style = "stop-color: rgb(245, 85, 85); stop-opacity: 1"/>
    </radialGradient>
    <linearGradient id = "gradient2">
        <stop offset="0%" style = "stop-color: rgb(255, 0, 0); stop-opacity: 1" />
        <stop offset="100%" style = "stop-color: rgb(255, 0, 255); stop-opacity: 1" />
    </linearGradient>
</svg>

The button is built using Font Awesome layers and SVG gradients, so to change button layout and colors you only have to edit the HTML file, without having do draw aything.

Finally the JavaScript file with the Phaser game:

let game;

window.onload = function() {
    let gameConfig = {
        type: Phaser.AUTO,
        backgroundColor: 0xe5e5e5,
        scale: {
            mode: Phaser.Scale.FIT,
            autoCenter: Phaser.Scale.CENTER_BOTH,
            parent: "thegame",
            width: 500,
            height: 500
        },

        // this is needed to work with DOM elements
        dom: {
            createContainer: true
        },
        scene: playGame
    }
    game = new Phaser.Game(gameConfig);
    window.focus();
}

class playGame extends Phaser.Scene {
    constructor() {
        super("PlayGame");
    }
    preload() {

        // this is how we load HTML content
        this.load.html("fontawesome", "fontawesome.html");
    }
    create() {

        // a DOM elements is added pretty much like a sprite
        let button = this.add.dom(game.config.width / 2, game.config.height / 2).createFromCache("fontawesome");

        // click listener
        button.addListener("click");

        // on click callback function
        button.on("click", function(e) {
            alert("play the game!")
        })

        this.tweens.add({
            targets: button,
            scaleX: 0.9,
            scaleY: 0.9,
            ease: 'Power1',
            duration: 1000,
            yoyo: true,
            repeat: -1
        });
    }
}

Here the HTML page is loaded as a DOM element, animated and made interactive.

And now you can have fancy icons in your HTML5 games powered by Phaser and Font Awesome. Download the source code of the entire project.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers