How do you put icons onto ur tags?

[jin]

I have been struggling about this for days and I don't want to ignore it anymore. I have already imported Font Awesome onto my wiki but how can I put an icon on my tags? It doesn't seem to work on my wiki and all that I can see are core icons

[Eric Shulman]

On Sunday, August 30, 2020 at 2:03:45 AM UTC-7, jin wrote:

I have been struggling about this for days and I don't want to ignore it anymore. I have already imported Font Awesome onto my wiki but how can I put an icon on my tags? It doesn't seem to work on my wiki and all that I can see are core icons

If you have a tag "foobar"...

1) create a tiddler named "foobar"

2) add an "icon" field whose value is the name of a tiddler containing an image (jpg, svg, png, ico)

The image named in the icon field will appear next to the "foobar" tag name in the tag pill

-e

 

[jin]

Hello, sorry I just figured out that I have to import jpg/svg/png/ico files to use it as an icon. I was confused because I imported FontAwesome and expect it to have the icons I need in the tag manager so I just disabled the plugin. Anyways, thank you.

[TW Tones]

Jin,

Never go days troubled by Tiddlywiki, make sure you ask here before you pull your hair out.

Here you will find font-awesome converted to tiddlywiki SVG tiddlers http://fa5-free-svg.tiddlyspot.com/

These can be used as icons including on tags

Or transcluded 

{{$:/images/fa5/solid/ghost}}

However you can also make use of html entities by code, or just paste them into where you need them

<$button class="tc-btn-invisible">
&#8251;
</$button>


<$button class="tc-btn-invisible">
Ξ

</$button>

But if you want to use special characters as an Icon you can create an SVG for it

Eg Music (tiddler)

<svg height="26px" width="24px">
  <text x="0" y="24" fill="red">♫</text>
</svg>

Then use Music in the icon field.

You may never be wanting for icons or SVG again.

Regrads

Tones

[Charlie Veniot]

G'day jin,

As one with a receding hairline, I definitely recommend avoiding any struggle beyond an hour or two ...

This may be too simplistic, but I rather like no-fuss-no-muss-good-enough solutions, so I throw it out there as an idea.

Could unicode characters be of use to you?  Copying and pasting them as part of any text is some easy, as long as having a unicode character doesn't screw up sorting of your tags (or wherever else you might use unicode characters.

Please note that some devices/browsers might not render a unicode character correctly, so play around and see what happens.

Screenshot example below. (I've setup my "💊MedsJourney" tag to have a corresponding Tiddler )  Cheers!

[Charlie Veniot]

BTW, total side note:  I rather like how a colorful unicode character in a tag makes that tag "pop" when editing a tiddler. (I appreciate "visual cues"; nice cognitive helpers. )  For example:

[jin]

Hello guys,

Sorry I keep deleting messages. Anyways, thank you for your recommendations, I'll definitely try to use it.

I didn't know that http://fa5-free-svg.tiddlyspot.com/ was what I'm looking for because what I know is this link: https://thediveo.github.io/TW5FontAwesome/output/fontawesome.html# and this is what I imported.

About the Unicode characters, I'll also use it too thanks for all the tips! I'm glad I learned something haha

[Charlie Veniot]

Now it is just a matter of finding the time and the means of re-attaching that pulled out hair.  Please forward any tips !

Unicode characters:  keep in mind they may look a little different from device/browser to device/browser (that can be a slight cognitive "what the {blank} ?").  And, if you get into "lists" that aren't sorting right alphabetically, putting them unicode "icons" as suffixes (instead of prefixes) is a quick hack to the, um, hack of using unicode characters as icons.

[jin]

Hi Charlie,

I just tried the unicode characters, funnily enough the lists didn't sort alphabetically! Haha thanks for the hack, I'll put it as suffix now

[Charlie Veniot]

Hey Justine,

'Tis the fun of experimentation, eh?

Sorting could be done via some custom Tiddler field instead of by Tiddler title, but that sounds like a pain in the caboose to me (i.e. largely duplicating tiddler titles in some fields just for the purpose of sorting.)  Icons as suffixes is so much easier to me.

But if suffix-ated icons ain't visually pleasing (or curiosity gets the best of you)...

Fields for sorting is something to look into if you have that itch.  Of course, being (in martial arts terms) a TiddlyWiki user at yellow-spotted belt level, I'm still not quite know-enough-to-be-dangerous able to offer technical help.

[jin]

Thank you Charlie!

[TW Tones]

Jin and Charlie,

Can I please suggest "simply avoid special characters in Tiddlywiki titles". That is why the icon and caption fields are available.

The Tiddlertitle is the "key" to information in tiddlywiki keeping them simple and easy to list and search.

• I could write an essay to back this up, 
• you may see I do a lot of support in this group, trust me I will be helping you fix broken things if you don't keep your titles clear.

If you want additional special characters on tiddlers that is another story, just ask. I am always developing things, one is an additional prefix and suffix to display around titles but not the titles themself as one example.

Regards

Tony

[Charlie Veniot]

Totally understood.  

I suppose I'm a total sucker for punishment and continue to use at my own risk.

Well, until it bites me in the caboose.

For now, I just can't help myself.  For example, I really love this (one of many simple/light yet really nice visual cues):

[jin]

Haha, noted tony :))