[TW5] FontAwesome plugin upgraded to Font Awesome 5.0.2

[TheDiveO]

So I took the time to upgrade the TW5FontAwesome plugin to use the new Font Awesome 5 fonts, in particular: 5.0.2. Enjoy!

GitHub page: https://github.com/TheDiveO/TW5FontAwesome
Plugin example page: http://thediveo.github.io/TW5FontAwesome/

[TonyM]

Thanks for your contribution

For others passing this way, the free Icon set can be viewed here https://fontawesome.com/icons?d=gallery&m=free

Edit: See also https://www.w3schools.com/icons/fontawesome_icons_webapp.asp

Regards

Tony

[TonyM]

TheDiveO

I note in the v 5.0 it mentions 

Better Tech

All-new SVG w/JS, modernized CSS, and official JavaScript component packages.

I have identified a way of using font awesome icons in place of the TW5 SVG for buttons etc... below

But I wonder what font awesome is offering on the SVG front?

We can use of the following in place of an image transclusion in buttons

<i class="fa fa-ban"></i>

Or the classier

<i class="fa fa-ban" style="font-size:16px;color:red"></i>

Which can also be transcluded allowing us to name our own icons

Eg icon-delete tiddler containing <i class="fa fa-ban"></i>

{{icon-delete}}

Regards

Tony

On Sunday, 31 December 2017 08:54:07 UTC+11, TheDiveO wrote:

[TonyM]

Further info,

If you download the fontawesome-free-5.0.2.zip and extract the files 

\advanced-options\raw-svg contains SVG images that can be dragged and dropped into TiddlyWiki

Regards

Tony

[TheDiveO]

Thanks for pointing out the SVG icons; I noticed them too. And after quite some consideration I decided to keep with the WOFF web font way of things for now. I don't see too much benefit for a plugin(!) yet in using SVG, as it has in this particular plugin usecase much more overhead compared to the well-compressed WOFF. I don't know which icons are going to be used, so a plugin needs to package all icons. Considering the small sizes of the Font Awesome WOFF files in the tenths of kilobytes this looks like a price well spent.

But as you point out, there are other uses where you can pick individual icons and then use them as TW5 icons. For this, Font Awesome 5 is simply great!

Best regards,
TheDiveO

[coda coder]

There's an issue with the CSS in $:/plugins/TheDiveO/FontAwesome/styles/tiddlylinks/system

See https://github.com/TheDiveO/TW5FontAwesome/issues/3

[Diego Mesa]

Hello,

Ive always wanted to use font-awesome icons as the "icon" field of a tiddler. Does this plugin allow for that? Or I guess we'd have to do as Tony says and manually import all of the SVG icons ourselves?

Thanks!

[Diego Mesa]

I can confirm that if you do as Tony said, you end up importing 115 new SVG icons you can then use as tiddler icons and transclude and manipulate!

Thanks all

[TonyM]

Of course if you only require a few importing a few svg's only can be useful.

I have also installed the free inkscape that helps export an svg as png (then drag and drop that) so you can use it as your $:/favicon.ico

raegards

Tony