PHP GD Rendering Unicode Private Use Area (PUA) fonts

Question

I'm trying to use the font-awesome stack on a commercial web development project, and we have got it to a working stage, however we are left with one problem.

When viewing our websites on a mobile devices (or a browser without imported font stack support) all of our icons are replaced with squares (because font-awesome uses Unicode chars to represent the icons).

This breaks a lot of the way our website looks and feels (especially the custom admin panel we have coded).

The solution we came up with was to fall back to using PHP to render an image containing the icon we want (with the colour we want specified as an argument, along with size etc)

This has never been a problem before, but now I'm having huge trouble getting PHP to render the Private Use Area (PUA) chars.

Here is some sample code I'm trying to use:

<?php
  $icons = array(
    "icon-glass" => "\f000",
    "icon-music" => "\f001",
    "icon-search" => "\f002",
    // [...]
  );
  $font = "_assets/fonts/font-awesome/fontawesome-webfont.ttf";
  if(isset($_GET['icon'])) {
    $chr = $icons[$_GET['icon']];
    header("Content-type: image/png");
    $img = imagecreatetruecolor($_GET['w'], $_GET['h']);
    imagealphablending($img, true);
    $transparent = imagecolorallocatealpha( $img, 0, 0, 0, 127 );
    imagefill( $img, 0, 0, $transparent );
    $black = imagecolorallocate($img, 255, 0, 0);
    imagettftext($img, 20, 0, 32, 32, $black, $font, $chr);
    imagesavealpha($img, true);
    imagepng($img);
    exit;
  }
?>
<div style="background-color:black; width:64px; height:64px;">
  <img src="dev?icon=icon-dashboard&w=64&h=64">
</div>
<br />
<div style="background-color:blue; width:64px; height:64px;">
  <img src="dev?icon=icon-bolt&w=64&h=64">
</div>

However this seems to just render the squares inside the image. I'm thinking this is because I'm inputting the unicode chars badly to PHP and it's possibly something really silly that I'm missing.

Any suggestions are welcome.

For reference, this is the URL of the font-awesome stack: http://fortawesome.github.com/Font-Awesome/#overview — R4wizard, Oct 12 '12 at 12:34
Drawing squares means the characters are not available in the font you're using. Is the font path correct? Alternatively you could pre-produce images of the icons you need (not on demand, but as a one-time operation) and save them on your server. — dda, Oct 14 '12 at 07:22
The font path is correct, i'm thinking my problem is either in the format of the unicode chars, or gd can't handle the PUA of fonts. — R4wizard, Oct 20 '12 at 15:49

score 4 · Accepted Answer · answered Aug 10 '13 at 13:52

The PHP code I used to render Font Awesome TTF glyphs (mostly):

$text = json_decode('"&#xF099;"');
...
imagesavealpha($im, true);
$trans = imagecolorallocatealpha($im, 0, 0, 0, 127);
imagefill($im, 0, 0, $trans);
imagealphablending($im, true);

$fontcolor = imagecolorallocatealpha($im, 0, 0, 0, 0);

// Add the text
imagettftext($im, $x, 0, 0, 0, $fontcolor, $font, $text);
imagesavealpha($im, true);
imagepng($im);
imagedestroy($im);

The json-decode() handles the complexity of the unicode character. I used a GD version 2 or greater so had to use points instead of pixels.

My full class takes into account the desired height, but ignores width. You can view it at https://github.com/sperelson/awesome2png.

PHP GD Rendering Unicode Private Use Area (PUA) fonts

1 Answers1