raphael js 的字体真棒答案

【问题标题】：Font awesome with raphael jsraphael js 的字体真棒
【发布时间】：2014-03-17 09:35:43
【问题描述】：

我想要的是创建一个带有raphaeljs 的简单圆圈，其中包含 facebook 的“f”（这也将用于其他类似情况）。 'f' 符号将由font-awesome 生成。

我所做的（但没有工作）是使用 css 和/或作为 raphael 属性设置字体系列。

代码如下：

HTML

<div id='share-facebook'></div>

CSS

#share-facebook {
  font-family: FontAwesome;
}

Javascript

var canvas = Raphael('share-facebook', 100, 100);
var facebookWrapper = canvas.circle(50,50,50);
facebookWrapper.attr('fill', '#E3E3E3');
facebookWrapper.attr('stroke','none');
var facebookText = canvas.text(50,50,'&#xf09a');
facebookText.attr('font-size', 40);
facebookText.attr('fill', '#fff');
facebookText.attr('font-family','FontAwesome');

Here 也是一个让你的生活更轻松的小提琴。从我所看到的问题来看，raphaels 将字符放在文本节点内的 tspan 内，并且无法解码。任何人都知道如何克服这个问题？

【问题讨论】：

标签： raphael font-awesome

【解决方案1】：

使用canvas.text(50,50,'\uf09a'); 代替canvas.text(50,50,'&#xf09a'); 就可以了

【讨论】：

【解决方案2】：

不是您期望的答案，但您可以使用 Raphael 免费图标 (http://raphaeljs.com/icons/) 代替 FontAwesome。每个图标都是您可以执行的 Raphael 路径：

paper.path(<icon path here>).attr({fill: "#000", stroke: "none"});

那么我猜你可以像使用任何其他路径一样应用任何变换、缩放、定位。

我对你的小提琴做了一点更新来演示http://jsfiddle.net/K6rrf/1/。我没有删除您的代码，只是添加了最后两行...

希望对你有所帮助

干杯

【讨论】：

谢谢。我已经熟悉 raphael，我在同一个项目中使用它，但我想在这个项目中利用 FontAwesome。如果没有其他选择，那么这将是我最后的选择。