TiddlyMap and FontAwesome 5 Free - a partial working solution

[Frédéric Demers]

Hello everyone; I am a big fan of TiddlyWiki and thought a partial 2-step solution would help a few of you.

The problem:

FontAwesome 4 integration with TiddlyMap works well using http://tobibeer.github.io/tw/fa/#GettingStarted. FontAwesome 5 splits up the font files in 3 (as of v5.14.0 included in the plugin: regular with ~150 icons, solid with ~1000 icons and brands with ~450 icons). Turns out it also uses the same font family name for the regular and solid icons (generally a wise choice when "regular" vs "solid" styles are used to highlight the selection of an icon, and fine for general TiddlyWiki/web use which relies on CSS classes). However, the default font family naming convention includes spaces, which appears to be incompatible with vis.js (or at least the vis.js packaged with TiddlyMap - I get the sense TiddlyMap has not been updated in a while).

A partial & simple working solution:

The following steps will give you access to the ~1000 solid icons in TiddlyMap, and the full sets in the rest of TiddlyWiki. 

Prequisites:

- install FontAwesome 5 Free for TiddlyWiki here: https://thediveo.github.io/TW5FontAwesome/output/fontawesome.html (I usually also import the cheatsheet and tiddlers needed for that to work)

- install TiddyMap from here http://tiddlymap.org

Changes:

- change the font family name at the top AND bottom of "$:/plugins/TheDiveO/FontAwesome/fonts/Font Awesome 5 Free Solid.css" tiddler to remove the spaces in the font family name:

---> font-family: 'Font Awesome 5 Free'; -> font-family: 'Font_Awesome_5_Free';

- change the font family name at the bottom of the "$:/plugins/felixhayashi/tiddlymap/js/Adapter" shadow tidder to match

(for the curious the unminimized source of this tidder is here: http://tiddlymap.org/api/services_Adapter.js.html):

---> ... t.icon={shape:"icon",face:"FontAwesome" ... -> t.icon={shape:"icon",face:"Font_Awesome_5_Free" (this step requires a TiddlyWiki refresh)

Outcome:

- you can now use any solid style icons in your maps by editing the node and populating the "FA-icon:" field with the appropriate unicode.

- in addition, if you need brand or regular icons, you can import (drag and drop) the SVG-based tiddler from https://fa5-free-svg.tiddlyspot.com and use it's tidder name (e.g. $:/images/fa5/brands/apple) in the "TW-icon:" field instead.

A more complete solution adding a few fields in the edit node dialog and some smarts to set the node icon according to their values, but I have not yet figured out how to do that elegantly.

Big thanks to the fine folks who brought us TiddlyWiki, FontAwesome 5 Free and TiddlyMap