PHP GD渲染Unicode专用区（PUA）字体

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.

Answer 1

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

$text = json_decode('""');
...
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.