我正在尝试在商业网站开发项目中使用 font-awesome 字体堆栈,我们已将其置于工作阶段,但仍面临一个问题。
当在移动设备上查看我们的网站时(或浏览器不支持导入字体堆栈),所有图标都被替换为方块(因为 font-awesome 使用 Unicode 字符来表示图标)。
这破坏了我们网站的外观和感觉(特别是我们编写的自定义管理面板)。
我们想出的解决方法是退回到使用 PHP 渲染包含所需图标的图像(颜色等指定为参数之一的大小等)。
以前从未有过此问题,但现在我很难让 PHP 渲染出专用区域 (PUA) 字符。
以下是我正在尝试使用的一些示例代码:
然而,这似乎只是渲染图像内部的方块。我认为这是因为我没有正确地将Unicode字符输入到PHP中,可能是我忽略了一些非常愚蠢的东西。
欢迎任何建议。
当在移动设备上查看我们的网站时(或浏览器不支持导入字体堆栈),所有图标都被替换为方块(因为 font-awesome 使用 Unicode 字符来表示图标)。
这破坏了我们网站的外观和感觉(特别是我们编写的自定义管理面板)。
我们想出的解决方法是退回到使用 PHP 渲染包含所需图标的图像(颜色等指定为参数之一的大小等)。
以前从未有过此问题,但现在我很难让 PHP 渲染出专用区域 (PUA) 字符。
以下是我正在尝试使用的一些示例代码:
<?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>
然而,这似乎只是渲染图像内部的方块。我认为这是因为我没有正确地将Unicode字符输入到PHP中,可能是我忽略了一些非常愚蠢的东西。
欢迎任何建议。