network - glyph - node font.multi fontAwesome icon blank

[dockstreet]

Hi,

I tried to specify a node from the multifont example with a FontAwesome glyph, but the icon I was trying to use showed up blank?

{ id: 3, font: { multi: 'html', face: 'FontAwesome' }, label: ' \uf286 <b>This</b> is an\n<i>html</i> <b><i>multi-</i>font</b> <code>label</code>', x: 40, y: 40 },

Is it expected or a bug?

Or perhaps there is another way to combine an image with text in an node without SVG? kind regards!!!

[mbroad]

When you resize or interact with the graph in some way, does the icon begin to appear?

I'm wondering if this is related to #1835

[dockstreet]

Hmm.... I did try to resize, but still same result, perhaps it is related? thanks for looking into this!

[wimrijnders]

Frankly, I'm amazed that you got that far. You might be the first to try it.
I don't think this is implemented, but I'll have a look.

Update: OK, weird. There is no reason why it shouldn't work, at least I can't find it. Will get back to this.

[sawatts]

Coincidentally I have just been trying to do this myself - setting the italic and bold italic faces to fontawesome so that I can add icons in two different colours to the label along with regular text.

Didn't work for me either.

[wimrijnders]

Er. Okay. Uhm. I got it.

Eventually, all I did was upgrade FontAwesome from v4.3.0 to v4.5.0:

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

.... because I accidentally noticed that some icons were working.

Go ahead, facepalm. It is that kind of moment. I did.

[wimrijnders]

On the other hand, I am somewhat excited that this works at all! I didn't know you could throw around icons in label texts and have it working right out of the box. Really cool.

[sawatts]

Not seeing FontAwesome glyphs in multi labels for FA v4.7.0. They are fine as node icons and in regular HTML constructs.

I had the nodes (option default) font.ital.face to FontAwesome, font.ital.mod to empty string, font.multi to true. The node-specific label then contains <i>\uf0c2</i> some other text... for a cloud glyph (amongst others).

Can't say I've used multi-font labels before though - so something may be wrong. However the "blank boxes" were the correct colour at least.

[wimrijnders]

FA 4.7 working for me:

But I'm not doing anything as fancy as changing multi-fonts. Will get back to it later.

[sawatts]

This may be back to loading the options after the network has been formed (cf. #3350). A couple of the nodes are refreshed from the server and their label icons then appear (correct colour, way too big).

I'll try to refactor to download the options before the network is first created.

[sawatts]

Nope. Only creating the network after I've pulled the options from the server doesn't change behaviour (but at least the edges are colours after the destination!).

When the graph is first drawn, all glyphs in the labels are drawn as missing characters (cf []) but have the correct colour. On the first update from the server, the Icon based nodes now show the glyphs in the label - but these are the same size as the Icon itself (changing the font.ital size to 4 hasn't changed the label glyph size). Other nodes (all shape nodes) are unchanged.

FontAwesome icons are also used in the general display (buttons etc).

I probably have an overly complex set up here to try to pin down the issue.

[dockstreet]

Would it be challenging to also include an image such as a plot or graph into the node as well? not sure if the canvas supports to include an image besides the glyphs?

[wimrijnders]

@dockstreet yes, it would be challenging. Icons work here because they get treated as characters and they just go along with the flow.

Images are supported, but only by themselves, e.g. see example imagesWithBorders.

A trick to combine text and images is to use HTML overlays, meaning that you have a floating div on top of a node. See e.g. this demo from #3300. This is a form of cheating in the sense that these are not true nodes within the network; but if it works for you, hey, who cares.