Icon fonts support

[coudboule]

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.

[Jacobross85]

Just for future reference for anyone that lands on this question. I have found that adding a space after the unicode for fontAwesome gets rid of the cutoff to the right of the icon so something like 

var dec = this.add.text( x, y, '\uf0a8 ', { fill : '#fff', font : '32px fontAwesome' });

Works well. 

[vastron]

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' });
        console.log(this.computer.text);

All I get is this :

 

[nocaoper]

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.