Changing the size of built-in icons

#1

Hi! I’m wondering how I could use a built-in icon (e.g. $:/core/images/link) but control the size of it – make it the same size as surrounding text, so I could do something like:

<a href="http://www.example.com" target="_blank" >{{$:/core/images/link}}</a>

and have it be a nice unobtrusive little icon instead of a giant one. Is there a built in way to do that?

I could go get some more icons, but I like using built-in stuff if I can, just for simplicity.

#2

Here are a few ways to “make it (a built-in icon) the same size as surrounding text.”

  • Place the icon transclusion within a $button widget:
    <$button class="tc-btn-invisible">{{$:/core/images/link}}</$button>

  • Define a “resize” CSS classname by putting the following into a tiddler tagged with $:/tags/Stylesheet:
    .resize svg { height:1em; width:1em; }
    which you can then use like this:
    <span class="resize">{{$:/core/images/link}}</span>
    or this:
    @@.resize {{$:/core/images/link}}@@
    or this:
    <a href="http://www.example.com" target="_blank" class="resize">{{$:/core/images/link}}</a>

enjoy,
-e

3 Likes
Resize Core Icon
#3

A simple trick I make use of for occasional icons I want to mention in wiki text is to edit the image tiddler and change the width and height to “1em” it continues to work elsewhere as expected but also adjusts when used in text.

  • In hindsight this would be good for all icons.
  • Its efectivly the same as Erics use of 1em without the class

Erics solution is possibly best if you are likely to do this to more than a few icons.

  • perhaps something like @EricShulman solution could be included css.
#4

Thanks, both of you! I ended up going with the button option, since a button with tm-open-external-window is functionally identical to the link I was using – and I have another button right next to it so that way the two will match.