拉斐尔js字体很棒 [英] Font awesome with raphael js

问题描述

我想要的是使用 raphaeljs 创建一个简单的圆圈，其中将包含Facebook的"f"(这将也可用于其他类似情况)."f"符号将由 font-awesome 产生.

What I want is to create a simple circle with raphaeljs that will have the facebook's 'f' inside (this will also be used for other similar cases). The 'f' symbol will be produced by font-awesome.

我做过的(但没有用)是使用css和/或作为raphael属性来设置字体系列.

What I have done (and did not work) is to set the font family using css and/or as a raphael attribute.

代码如下:

<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');

这里也是使您的生活更轻松的小提琴.从我所看到的问题是，拉斐尔将字符放置在文本节点内的tspan内，无法对其进行解码.任何人都有解决该问题的想法吗?

Here is also a fiddle to make your life easier. From what I have seen the issue is that raphaels places the character inside a tspan inside the text node and it cannot be decoded. Anyone has an idea how to overcome this issue?

推荐答案

使用 canvas.text(50,50，'\ uf09a'); 代替 canvas.text(50，50，'&#xf09a'); 并且有效

这篇关于拉斐尔js字体很棒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！