Jump to content

Icon fonts support


Recommended Posts

Hello, I'd like to use Icon fonts (typicons, font-awesome, ...) in my next Phaser (2.2.2) game but they are always cropped by Phaser (the right or top parts of each icon is missing).


The problem seems to come from pixi.js when it tries to estimate font dimensions in PIXI.Text.prototype.updateText() using some sequence of characters. Is there a way to fix that in Phaser?


Here is how I draw the icon X using typicons:


var x = game.add.text(200, 200, '\ue122', { font: '50px typicons', fill: '#fff', align: 'center' });


The right part of the X icon will be slightly cut out.


Thank you for your answer.

Link to comment
Share on other sites

  • 5 months later...
  • 2 years later...

Guys I did not get this to work, can you please help me?

This is my code:

<link rel="stylesheet" href="lib/fontawesome-free-5.0.13/web-fonts-with-css/css/fontawesome-all.min.css" />
    <script src="lib/phaser.js"></script>
    <script src="scripts/game.js"></script>
 this.computer = this.add.text(100, 100, '\uf108 ', { fill: '#4286f4', font: '30px FontAwesome' });

All I get is this :



Link to comment
Share on other sites

  • 2 months later...

I have the same problem, I could not load font-awesome in my game.

The solution I've found is to simply

1. create a start menu state for my game.

2. In that start menu, I call the font I'm going to use. As expected it does not work.

3. When I get into the game state, it works.

Explanation: The browser only loads font-awesome on the first use. So you have to call it before using it. The solution was found in this article: https://hacks.mozilla.org/2016/06/webfont-preloading-for-html5-games/

Bonus tip: If you're a font awesome pro user the font is: "32px Font Awesome 5 Pro" instead of "32px FontAwesome", you can check in the css file search for @font-face, there is an entry called font-family, use the name displayed.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...