Hi Anna,
If you mean icon fonts like Font Awsome, usually it should be enough to set node's or cell's font to the respective font and specify icon as Unicode number in text value -
<head>
<meta charset="UTF-8">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
</head>
e.node.setFont(new Font("Font Awesome 5 Free", 6));
e.node.setText("\uF200");
Free icons from Font Awsome specifically are rendered only in
600-900 range of font weight though, which you can't specify via our public APIs. If that's what you are using, you'll have to override our drawing code, e.g. something like this -
var original = MindFusion.Drawing.Text.prototype.draw;
MindFusion.Drawing.Text.prototype.draw = function (context, drawShadow)
{
if (this.isIcon)
{
context.font = '600 4px "Font Awesome 5 Free"';
context.fillStyle = "black";
context.fillText(this.text, this.x + 5, this.y + 10);
}
else
{
original.apply(this, [context, drawShadow]);
}
};
e.node.text.isIcon = true;
You could as well create an Icon class with a single draw function as above, and add its instances to nodes similar to extra images and text from this topic -
https://mindfusion.eu/Forum/YaBB.pl?num=1488530760Regards,
Slavcho
Mindfusion