Consistent Style across all Icons

[Aidan Grey]

I need a consistent style across my icons on the editor toolbars, sidebar, etc. I've created my own buttons, and have no problem styling them, but I need them to match the built-in icons/buttons.

I've tried using my own, with tc-image-button class, but they don't look the same.

Can't figure out how to replace the existing icons with my own either.

Surely there's a way to make them consistent across the board one way or another, and do styling.

[Mat]

What do you mean with consistent? It is trivial to apply the same CSS to them but all(?) core icons are custom drawn by Jeremy so your icons will not look the same unless his personal drawing style is imitated.

You mention that you can't figure out how to replace existing icons with your own; this may be a better route if you want consistency. You simply open the icons and replace their code with your own. At least that is the first step. There will probably be some tweaking with sizes. 

BTW, fellow tiddleur morosanue very recently unleashed all(?) the Font Awesome icons but tweaked to suit TW. These probably use a consistend style.

<:-)

[Ton Gerner]

Hi Aidan,

Have a look at:

http://tw5custom.tiddlyspot.com/#Icons

https://groups.google.com/forum/#!msg/tiddlywiki/xoBAOY7OMGY/pqHygsFFBQAJ

Cheers,

Ton

[Aidan Grey]

So, I want them all to have the same styling. Either mine, or built in. Icon style is a different issue, and if I can get the CSS/Appearance to be the same, then I can sort out the icons myself (I've got a pro membership to FA, so...)

Attached is the tiddler with my svg icon. Here's how I'm calling it: <$button class="tc-btn-invisible tc-image-button">[img[six]]</$button>

This should, theoretically, give me exactly the same styling as the built-in buttons.  But it doesn't - nothing at all is visible. I've also tried transclusion as {{six}}, also no good.

As far as replacing existing buttons goes: on $:/core/images/info-button, I replaced the existing def with {{six}}, which worked, but none of the usual styling applied. Instead of muted colors and hover differences like the built in buttons, it's just black, no change on hover.

What I am doing wrong?

[Birthe C]

The button svg in the toolbars are inkomplete. They do not have a type set.

Birthe

[Mohammad]

See the note by Brithe. He gave the solution.

open your svg tiddler and remove the type

[Aidan Grey]

That was it guys! Thanks!!

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/8e2f1f7a-b852-45a5-b803-56a43a149cdd%40googlegroups.com.