以下是在 html5 画布上绘制 Font Awsome 字形的方法：
-
Font Awesome 中的链接：
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
-
将上下文字体设置为 Font Awesome：
// set the canvas context's font-size and font-face
context.font='14px FontAwesome';
-
在画布上绘制一个 Font Awesome 字符：
// specify the desired character code with the Unicode prefix (\u)
context.fillText('\uF047',20,50);
这是示例代码和演示：
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.font='12px verdana';
ctx.fillText('Please wait for Font Awesome to load...',20,30);
// give font awesome time to load
setTimeout(start,2000);
function start(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.font='30px FontAwesome';
ctx.fillText('\uF047',20,50);
}
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<h4>Font Awesome glyph drawn onto html5 canvas</h4>
<canvas id="canvas" width=300 height=100></canvas>
[补充：加载 FontAwesome 的另一种方式]
作为@Kaiido cmets，您可以通过在画布元素（或其他元素）上设置font-family:fontawesome 来使浏览器开始加载FontAwesome。
演示展示了如何“即时”加载自定义字体（包括 FontAwesome）。
[补充：一个 FontAwesome 加载功能]
与 img 一样，字体是异步加载的，因此您必须等待它们完全加载，然后才能在画布上使用它们进行绘制。但与 imgs 不同的是，字体没有内置的 .onload 方法来告诉我们何时完全加载。
这是一个解决方法 onload 函数，当 FontAwesome 完全加载并准备好在画布上fillText 时，您可以使用它来触发回调：
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw,ch;
AwesomeFontOnload(start,3000);
function start(){
ctx.font='48px fontawesome';
ctx.fillText('\uF064\uF065 \uF0a5',20,75);
}
function AwesomeFontOnload(callback,failAfterMS){
var c=document.createElement("canvas");
var cctx=c.getContext("2d");
var ccw,cch;
var fontsize=36;
var testCharacter='\uF047';
ccw=c.width=fontsize*1.5;
cch=c.height=fontsize*1.5;
cctx.font=fontsize+'px fontawesome';
cctx.textAlign='center';
cctx.textBaseline='middle';
var startCount=pixcount();
var t1=performance.now();
var failtime=t1+failAfterMS;
//
requestAnimationFrame(fontOnload);
//
function fontOnload(time){
var currentCount=pixcount();
if(time>failtime){
alert('Font Awsome failed to load after '+failAfterMS+'ms.');
}else if(currentCount==startCount){
requestAnimationFrame(fontOnload);
}else{
callback();
}
}
//
function pixcount(){
cctx.clearRect(0,0,ccw,cch);
cctx.fillText(testCharacter,ccw/2,cch/2);
var data=cctx.getImageData(0,0,ccw,cch).data;
var count=0;
for(var i=3;i<data.length;i+=4){
if(data[i]>10){count++;}
}
return(count);
}
}
}); // end $(function(){});
</script>
</head>
<body>
<h4>Font Awesome glyphs drawn onto html5 canvas</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>