How do I use fontawesome icons?

Jon

unread,

Jan 7, 2021, 3:54:10 AM1/7/21

to TiddlyWiki

Hi,

I've installed the fontawesome plugin but there aren't any instructions as to how to use it and to get icons in a tiddler (unless I've missed them)

I notice the cheat sheet doesn't work in my wiki, so that might be a clue that something's not right.

Any pointers?

Thanks

Jon

unread,

Jan 7, 2021, 6:48:14 AM1/7/21

to TiddlyWiki

Ah, so after a bit of lateral thinking, found the instructions at https://fontawesome.com/

So, just in case I'm not the only one asking the question, this would go in the tiddler (Icon id in quotes):

<i class="far fa-moon

f186"></i>

Cheers

Jon

TiddlyTweeter

unread,

Jan 7, 2021, 7:28:23 AM1/7/21

to TiddlyWiki

Right! The mechanism to actually display the glyphs has to use CSS classes. The font characters themselves are not directly accessible using entity numbers as the font is activated through classes. It is not globally loaded, I think.

My understanding.

TT

Jon

unread,

Jan 7, 2021, 7:29:45 AM1/7/21

to TiddlyWiki

Thanks TT!

TW Tones

unread,

Jan 7, 2021, 6:35:31 PM1/7/21

to TiddlyWiki

I cant find it now but there is a package of font awesome Icons as SVG's for tiddlywiki.

Tones

Odin

unread,

Jan 8, 2021, 1:55:46 AM1/8/21

to TiddlyWiki

http://fa5-free-svg.tiddlyspot.com/

It is this one. I like this solution as well because you can install individual icons. That helps keep the wiki small if you are using only a couple of extra icons.

Op vrijdag 8 januari 2021 om 00:35:31 UTC+1 schreef TW Tones:

Jon

unread,

Jan 8, 2021, 5:53:46 AM1/8/21

to TiddlyWiki

That does sound better as I am only using a few.

Thanks

Jon

TiddlyTweeter

unread,

Jan 8, 2021, 6:23:42 AM1/8/21

to TiddlyWiki

Odin & Jon

Right! It is the right place to go if you just need a few icons!

The guy behind it, morosanuae, took great care to make them all "TW Ready" ... meaning he has coded standard TW icon sizing in to all of them. That makes it even better!

Best wishes

TT

Jon

unread,

Jan 8, 2021, 9:17:58 AM1/8/21

to TiddlyWiki

Unlike the CSS variety, the disadvantage of using the svg icons is that I don't think you can colour them - or can you?

Sylvain Naudin

unread,

Jan 8, 2021, 10:10:33 AM1/8/21

to TiddlyWiki

Hi Jon,

You can use CSS stylecheet.

Simple example with this first tiddler with $:/tags/Stylesheet and this in text : .facss { fill:red; }

In other tiddler, style with @@.facss {{$:/images/fa5/solid/bug}}@@ for example.

Cheers,

Sylvain

Jon

unread,

Jan 8, 2021, 10:32:59 AM1/8/21

to TiddlyWiki

Hi Sylvain,

That really is 'awesome'!

Thanks

Jon

unread,

Jan 8, 2021, 5:23:44 PM1/8/21

to TiddlyWiki

Hi Sylvain,

Is it possible to alter the size?

Nothing I've tried seems to work.

Regards

Jon

backplane

unread,

Jan 8, 2021, 6:55:14 PM1/8/21

to TiddlyWiki

Try adding a div around the icon block and using CSS to size the DIV

Jon

unread,

Jan 9, 2021, 4:27:08 AM1/9/21

to TiddlyWiki

...sorry, not sure how to do that

Sylvain Naudin

unread,

Jan 9, 2021, 5:07:07 AM1/9/21

to TiddlyWiki

Hello Jon,

In your stylesheet tiddler, change my example with this :

.facss svg {
fill:red;
width: 100pt;
height: 100pt;
}

We add svg attribute, and just play with width and height.

Jon

unread,

Jan 9, 2021, 9:02:31 AM1/9/21

to TiddlyWiki

Ah, it was the svg bit I was missing.

Thanks again Sylvain.

Reply all

Reply to author

Forward