TiddlyMap and FontAwesome not working anymore in the current version?

[IvoAlexander]

Hello Felix,

apologies if i am not following proper rules - this is the second time I use GitHub and my second post.
I try to use TiddlyMap and FontAwesome in the newest versions and for some reason the icons are not working in the map. Here is what I did:

1. Downloaded the current TiddlyWiki from here: https://tiddlywiki.com/
2. dragged the plugin from here http://thediveo.github.io/TW5FontAwesome/output/fontawesome.html (as recommended) into the empty TiddlyWiki.
3. Installed the TW5-TiddlyMap as recommended here http://tiddlymap.org/
4. The link decoration is working fine, the Font Awesome control tab is there, all good.
5. I opened the demo map and set the FA-icon entry to f206 of the "Have fun with"-node.
6. The Icon is not rendered, instead there is a black framed square with f205 in it, not the Bicycle I would expect...

Well, I asked that question TheDiveO first, and this is his answer:

The older plugin versions of FontAwesome were based on Font Awesome 4, the newer plugin releases base on Font Awesome 5 (FA5). Unfortunately, Font Awesome 5 brought some changes, such as separating the icons into three separate icon font files. I suspect that tiddlymap needs to be adapted to the new scheme, probably by pulling in the FA5-provided backward compatibility stylesheet. I haven't added this to my plugin because it makes the new features of FA5 at least partly inaccessible. I would suggest you to contact the author of tiddlymap.

...which is this issue about.
What am I doing wrong here?

Kind regards

[felixhayashi]

Hi @IvoAlexander

many thanks for raising this issue, wasn't aware of it.

Did you also have a look at tobibeer's "installation" steps (scroll the tiddler to the headline "Updating")? He describes how to create the stylesheet file for TW5 with embedding the font in the css file via base64 encoding.
See http://tobibeer.github.io/tw/fa/#Installation

Best wishes
Felix

P.S: If you manage to succeed to create a TW5 css file that works, please consider sharing it here ;)

[silvyn]

Just test the last TheDiveO version with FA5, and indeed it change quite a lot from FA4. Even just to use macro FA5 I need to study that, it seem more complicated than expected.

<<fa-lbadge glyph:"fa-android" fam:"fab">> for example.

[felixhayashi]

Hi @silvyn, yes I noticed that too :( I think recompiling the styles with the steps @tobibeer suggested might yield better results (which can also be used for TiddlyMap, however I am not 100% sure). The point is that in the plugin by @thediveo the icons cannot be simply referenced anymore by their font unicode (e.g. "f0f9") but I think this can be maybe redeemed by using tobias' instructions.

[silvyn]

Well, I just dit it I think, has I made before for 4.7.0, with just base64 woff, like Tobbias.

We have now 3 base64 encoded woff, and I have 3 macros to deal with fa-brands, fa-regular and fa-solid.

Have to test a bit more and clean it (maybe try min version) , test it with TiddlyMap, and share it 😀

[silvyn]

So after I realize that I lost my tiddler (failed saving with Timimi plugin on a new empty TW), I re-create a new 5.3.1 tiddler FontAwesome. Works in tiddler with fa macro that calls standard html code.
But with TiddlyMap, failed to use unicode.. I've search on your code (is it in $:/plugins/felixhayashi/tiddlymap/js/Adapter ?), but it's to much for me.. !

Instead unicode, can you convert it with name icon instead maybe ?

(I can use Tobbias unicode viewtemplate alone, but not with TiddlyMap - and not anymore icon like Brand since they are in other woff file with another fab vs fas/fa vs far code).