Loading...
 
Features / Usability

Features / Usability


[SOLVED] Bug in PluginIcon preventing correct re-sizing?

posts: 228 Ukraine

Hi,

The FontAwesome icons in PluginIcon are tiny and do not re-size correctly ('button width' 'button height') - only the transparent box (or 'area') around the icon get bigger, but the icon stays the same size. Here you can see an example:
Screenshot From 2024 02 16 12 04 59

The first 'WhatsApp' PluginIcon on the left is tiny, about 15px x 15px, the second one, about 50px x 50 px, is PluginImage.

Here is the code for the first two:

Copy to clipboard
{button href="https://wa.me/xxxxxxxxxx" _icon_name="whatsapp" _type=" " _target="_blank"} {img type="fileId" fileId="1719" link="https://wa.me/xxxxxxxxxx"}


Could this be due to PluginIcon using a .png instead of .svg, where if you increase the size of the .png it would not look good so it was coded to only increase the size of the area surrounding the icon? Also interesting is that the size of the WhatsApp icon (and probably most others) when downloaded to my local environment (entire library, not individual) is about 50px x 50px., so maybe there is a bug that is making it smaller to start with?

In any case, an image with a link works fine, I just thought I'd give a heads up should this be an 'Easy first contribution' for someone.

br,
Mike

posts: 4656 Japan

Hi, Mike,

To be sure what we are talking about here, PluginIcon uses syntax like

Copy to clipboard
{icon name="whatsapp" size="3"}
. This produces


The size of an icon in a button is determined by the CSS rule for that particular button (.btn, .btn-sm, .btn-lg, etc.), which is based on font sizes. This is why the icon in your button is small.

I tried making a larger button with a big icon and text, with syntax like this:

Copy to clipboard
{button href="Make_a_call" _text="Call me maybe" _icon_name="whatsapp" _style="font-size: 3rem"}
, which produces


Call me maybe

So that looks like it might do the job for you.


-- Gary

posts: 228 Ukraine

ok, my bad. After preparing the question for a long time, I realized I completely mixed up PluginIcon and PluginButton rolleyes

So, yes, I was referring to PluginButton where you can use the FontAwesome icons. The standard 'height/width' options in the gui do not change the size of the icon, only the size of the 'button', which makes sense.

I see you added: _style="font-size: 3rem"
which, of course, does change the size of the actual icon (there's a lot of info about em vs. rem sizing on the web).

So, no bug, But it's good Tiki has other options (like an image with a link) so users can find workarounds (like in my case, if I don't know css).

Thanks Gary, hope all is well,
Mike