Some icon sizes & colors are inconsistent when using Borderless Toolbar Button Style

[rmmanseau]

Specifically the two that are part of the font awesome distribution that comes with tzk, the copy icon and the inbox icon.

After a bit of digging the problem was that tiddlywikis styling only applied to <svg> elements, not <i> elements.

luckily the two icons are available as SVGs here:
http://fa5-free-svg.tiddlyspot.com/

I replaced the icon tiddlers in my wiki and the sizing & coloring becomes consistent, sharing in case anybody else would like to use the borderless button style.

[sobjornstad]

Another option would be to add to a tiddler tagged $:/tags/Stylesheet:

button i.far, button i.fa {
	max-height: 1em;
	max-width: 1em;
	font-size: 100% !important;
	color: <<colour "tiddler-controls-foreground">>;
}

Unfortunately this makes it display wrong with the default rounded buttons, or I'd just make this part of the default. I don't have the time to look further into this at the moment, but if anyone has a reason to want it to display nicely in both modes, feel free to figure it out and send me something.

[rmmanseau]

fwiw the SVG solution displays properly in all available modes.

I could see about setting up a PR if you're happy with the SVG solution.

[sobjornstad]

PRs don't really work well because they can't be easily back-applied to my Zettelkasten (which auto-generates everything in this repository through a build process). But if you'd like to attach the files and an explanation of exactly what to change (along with or instead of a patch), I can look at changing that. Long-term, I'd prefer to get the font-based method working since then it will also work correctly for any future icons I add without having to do anything special, but as I said it requires more fiddling than I'm currently willing to do. :-)

…

On Wed, Feb 16, 2022, at 00:37, rmmanseau wrote: fwiw the SVG solution displays properly in all available modes. I could see about setting up a PR if you're happy with the SVG solution. — Reply to this email directly, view it on GitHub <#3 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AARUZRTBA3LXUWKR6JD4ZX3U3NA2RANCNFSM5OGGTP5A>. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you commented.Message ID: ***@***.***>