Use Fontawsome with Tiddlywiki

[Mohammad]

Searching the Tiddlywiki Toolmap shows these two plugin to use fontawsome with TW5

• http://tobibeer.github.io/tw/fa/#GettingStarted
  
• http://thediveo.github.io/TW5FontAwesome/
  

However the plugins are heavy and large in size (like 300kb)! Is there any way to have a plugin lighter or is there any experience using a few selected font icons wiith TW?

Note: I want the plugin work offline and not use the CDN!

Mohammad

[barro...@gmail.com]

Mohammad,

I was thinking the same.  The font base64 encoded and glyphs (letters/icons) appear be individual components-- maybe someone would know if just a partial collection of glyphs could be extracted and/or or encoded as a new file to be used instead of the full collection file.

[TonyM]

Mohammad,

What do you want to use it for?, I wanted icons

Either import on the icons you want, Or use selected css files instead for lower size.

It being a While since I played with font awesome but download Font Awesome free fontawesome-free-5.3.1-web.zip from https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css

And unzip it, Have a look under the svg's folder and there are over a 1000 svgs you can drag and drop on to your wiki as needed. You can use the free inkscape to color or edit them, and or export them as png

If you drag and drop them onto your wiki, they open very big, just edit them and add  width="32" height="32" inside the opening <svg    width="32" height="32"> or your preferred size, with any other statements, use the existing ones if they are there.

You can also drag and drop one of the css files and tag it $:/tags/Stylesheet

Save and Maybe reload

This for example then works

<div class="fa-pulse">
Text
</div>

<div class="fa-rotate-180">

Text

</div>

<div class="fa-flip-horizontal">

Text

</div>

But if you read behind the scenes you can do a lot more

Sometime even just reading the css file shows you how they implement their ow class definitions using standard css

eg;

<div class="fa-lg">
Text
</div>

uses the following css

.fa-lg {
  font-size: 1.33333em;
  line-height: 0.75em;
  vertical-align: -.0667em; }

Which you could use on your own.

However this all started for me using https://thediveo.github.io/TW5FontAwesome/output/fontawesome.html

Regards

Tony

[barro...@gmail.com]

 Many thanks Tony, I was using the plugin version, didn't realize there were svg's which I prefer-- this moves things forward on one of my projects and I don't have to use the huge complete font collection.

[TonyM]

Oh,

The reason I mentioned using inkscape to generate png files is because as far as I can see svgs dont work when renamed $:/favicon.ico

Tony

[Mohammad]

Hi Tony

Many thanks for your explanation!

I learned how I can import part of svgs as I needed.

Cheers

Mohammad

[@TiddlyTweeter]

Ciao TonyM, barro & Mohammad

... just edit them and add  width="32" height="32" inside the opening <svg    width="32" height="32">

Thanks TonyM for alerting us FA did an SVG release. Excellent!

A few quick notes on this--mainly 'cause I think it could be great to convert all those SVGs. But there are a few points I want to make.

For the FontAwesome SVGs, used as is, I would set width="auto" height="22pt" In fact you can leave width out entirely as "auto" is implied. The reason is that FA SVGs have a "viewBox" that is normally 512 high but can come in variant widths.

And the 22 "points" height is when you want the the same height as icons in TW as the core icons are all (I think) 22pt x 22pt (viewBox="0 0 128 128") -- i.e square.

SVGs can be confusing at first as the dimensions are not exactly the apparent "image" size. The width and height are actually a scaling in relation to the viewBox.

NOW, if you want square icons, like they are in TW, you could force the FA SVG to reshape by using width="22pt" height="22pt" and adding preserveAspectRatio="none". I suspect many of the FA SVGs will reshape well. Anyway, IMO its better interface icons are the same size :-)

Here's an example of how the start could look for an FA SVG for a TW icon ...

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="22pt" height="22pt" preserveAspectRatio="none">

Hope this is helpful!
Josiah

[Mohammad]

Josiah!

Many thanks for clarification! Yes, TW icons are 22x22 points.

Mohammad

[Sylvain Naudin]

Le lundi 1 octobre 2018 08:49:06 UTC+2, Mohammad a écrit :

However the plugins are heavy and large in size (like 300kb)!

Yep, few weeks ago I've made a base64 of FA 5.3.1 and export tid is 290,1 kb ;)

[TonyM]

Josiah,

Thanks for that info, I will be adding it directly in my SVG usage notes, thanks heaps

Tony

[TonyM]

Mohammad,

Also review http://google.github.io/material-design-icons/ and https://material.io/tools/icons/?style=baseline for the material icons

Getting icons

The icons are available in several formats and are suitable for different types of projects and platforms, for developers in their apps, and for designers in their mockups or prototypes.

Licensing

We have made these icons available for you to incorporate them into your products under the Apache License Version 2.0. Feel free to remix and re-share these icons and documentation in your products. We'd love attribution in your app's about screen, but it's not required. The only thing we ask is that you not re-sell the icons themselves.

Browsing and downloading individual icons

The complete set of material icons are available on the material icon library. The icons are available for download in SVG or PNGs, formats that are suitable for web, Android, and iOS projects or for inclusion in any designer tools.

Downloading everything

Grab the latest stable zip archive (~60MB) of all icons or the bleeding-edge version from master.

Git Repository

The material icons are available from the git repository which contains the complete set of icons including all the various formats we are making available.

$ git clone http://github.com/google/material-design-icons/

Regards

Tony

[Mohammad]

Many thanks. This is a great addition.

Best

Mohammad

[@TiddlyTweeter]

Ciao TonyM & all

I had a look at the Material  Design Icons. Very useful. A couple of notes...

Sizing -- they all seem to be 24x24 so making TW ready versions should be a cinch by simply changing height and width in the SVGs to 22pt x 22pt.

License -- though the site says attribution is not strictly necessary I myself favour putting a note directly into the Tiddler after the SVG. This is part so I can, later, know where to go for more. Part because I think it helps other uses to know too if they get included in something public. Part because its basically good to acknowledge.

Here is something I made up that I think will work ...

<!--
Material Design icon from - https://material.io
License - https://www.apache.org/licenses/LICENSE-2.0.html (Apache 2.0)
-->

Best wishes
Josiah

[TonyM]

Also,

There are some two colour icons which work well using inkscape to recolour one or both colours.

Regards
Tony

[barro...@gmail.com]

However the plugins are heavy and large in size (like 300kb)!

Yep, few weeks ago I've made a base64 of FA 5.3.1 and export tid is 290,1 kb ;)

Is there any way to make a smaller sized plugin of just a selection of characters rather than the full collection of characters?

[TonyM]

Barro,

Yes!. In fact I think a Few of us are doing this. However rather that a plugin where all tiddlers will remain in the wiki, perhaps using a json bundle. This allows images to be deleted if unneeded from the wiki where plugins will remain unless all in the plugin is deleted.

I have attached an example json of 115 selected fontawesome icons. Please do not distribute without acknowledging FontAwesome. The bundle needs improvements such as

• Acknowledgement of the source
• Add a System prefix's they do not appear in standard searches eg $:/images/fa/svg/imagename
• the addition of keywords in each image tiddler to assist searching

I am keen to improve the import process to make selecting images easier.

I have included a tid file for selecting icons on the current tiddler as a clue how to review and select images.

Regards

Tony

[barro...@gmail.com]

Many thanks as always.  Acknowledged about acknowledgements-- I'm all bout attributing even if its something as small as a  code segment- if it wasn't for people sharing their efforts, mine wouldn't have gone as far as they have.