RaphaelJS 中的 Font Awesome 图标答案

【问题标题】：Font Awesome icon in RaphaelJSRaphaelJS 中的 Font Awesome 图标
【发布时间】：2020-09-30 16:37:11
【问题描述】：

我正在尝试将Font Awesome 图标添加到RaphaelJS 中的画布。

这是我目前所拥有的：jsFiddle

canvas = Raphael('my-canvas', 100, 100);
var myIcon = canvas.text(50,50,'\uf056');
myIcon.attr('font-size', 40);
myIcon.attr('fill', '#000');
myIcon.attr('font-weight', '300');
myIcon.attr('font-family','FontAwesome');

（我的代码基于这个问题：Font awesome with raphael js）

图标以“实心”样式显示，但我想将样式更改为“常规”或“浅色”。我尝试将字体粗细设置为 300，将字体系列设置为“Font Awesome 5 Pro”，如 here 所述，但没有任何成功。

我还在本地开发环境中使用有效的 Font Awesome Pro 许可证进行了尝试，结果相同。然而，我确实发现如果我禁用对 Font Awesome 4 的旧版支持，图标将不再显示。也许 Font Awesome 5 不再支持此解决方案？

任何正确方向的提示或指示将不胜感激！

【问题讨论】：

标签： font-awesome raphael

【解决方案1】：

根据this，字体必须设置为“Font Awesome 5 Pro”才能将图标显示为“浅色”或“常规”。但我的问题是让 Raphael JS 使用正确的字体。设置除 'FontAwesome' 之外的任何字体系列只会导致显示正方形。

解决方案非常简单。只需在字体字符串中添加额外的引号，图标就会正确显示！

myIcon.attr('font-family',"'Font Awesome 5 Pro'");

【讨论】：