Question

有5年前的一篇SO帖子，展示了如何在Raphael.js中使用Font Awesome，包括有效的小提琴：

但这是针对FA版本4的，看来FA 5发生了很多变化。我正在尝试显示FA 5 Free实体图标-让我们说它是Raphael.js中的“青蛙”，实体样式，类=“ fas fa-frog”，Unicode = f52e。

（要添加更多的复杂性，实际上这是Mapbox地图中的Raphael图层。由于我还没有遇到过其他“ Raphael功能X无法在Mapbox图层中使用”的问题，因此我做出了一个有希望的假设，即我可以让FA5在普通的老拉斐尔市工作，它将解决我的问题。）

我尝试修改FA 5的SO代码；我已经检查了FA5套件脚本附带的min css（它说字体家族是“ Font Awesome 5 Pro”，即使使用免费图标时也是如此...）；我已经阅读了一些较旧的github问题，说必须设置字体粗细：Chrome中的粗体（aka实心）字体为900。我已经尝试了这些事情的几种排列。

<html>
<head>
  <script src="https://kit.fontawesome.com/{kit-id-goes-here}.js"></script>
</head>
<body>
  <div id="map"</div>
  <script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
  <script src="code/raphael.min.js"></script> <!-- (v2.2.0) -->
  <script src="code/rlayer.min.js"></script><!-- map -->
</body>
</html>

L.mapbox.accessToken = '...';
let map = L.map('map', { ... };
L.tileLayer(...).addTo(map);

let raphaelLayer = new R.Layer();
map.addLayer(raphaelLayer);

let paper = raphaelLayer._paper;

let t = this.iconText = paper.text(100, 100, '\uf52e');
t.attr('font-size', 18);
t.attr('fill', '#fff');
t.attr('font-family', 'Font Awesome 5 Pro');
t.attr('font-weight', 900);

我希望看到FA5青蛙以某种方式呈现，但是实际输出是当您指定某种无效的Unicode字符时显示的方形块。

Font Awesome指示其用户向SO发布此类问题，这就是我这样做的原因。如上所述，我对与FA5兼容的非Mapbox Raphael示例感到满意，并从那里获取了它。

如何在Raphael.js中使用Font Awesome 5？

0 个答案: