coudboule Posted January 18, 2015 Share Posted January 18, 2015 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 More sharing options...
Jacobross85 Posted June 25, 2015 Share Posted June 25, 2015 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. drhayes 1 Link to comment Share on other sites More sharing options...
vastron Posted June 11, 2018 Share Posted June 11, 2018 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 : Link to comment Share on other sites More sharing options...
nocaoper Posted August 16, 2018 Share Posted August 16, 2018 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 More sharing options...
Recommended Posts