[Styling] Button icons seem to be off if using fontawesome

[wucherpfennig]

I do not know whether somebody noticed it but with the default tabler css the button icons just seem to be off if you are using fontawesome. (they always seem to have the same size)

However if I add some "corrections" to the icon class like:

.page {
  .icon {
    font-size: 1em !important;
    height: 1.25em;
    margin: 0 .5em 0 -.5em;
    width: 1.25em;
    line-height: 1.25em;
  }
}

It just looks better.

I do not know what to do with this information but I wanted to share this "fix" if somebody is using multiple button sizes on their project.

BR wucherpfennig

[kevinpapst]

Yes, as the original bundle is using the SVG tabler icon set, the classes don't work properly.

You should use the button macro instead: https://github.com/kevinpapst/TablerBundle/blob/main/docs/components-buttons.md

Icon mapping is done through tabler.yaml.

Best is to clone the demo and have a look at all the examples in there.

[wucherpfennig]

Thank you for your input. I actually tried to use your macro but using it like:

{% from '@Tabler/components/buttons.html.twig' import link_button %}

{% set urlNotification = path('notification_view', {'id': notification.id }) %}

{{ link_button('Ansicht', urlNotification, 'fa fa-eye', 'primary', 'sm' )}}

{% from '@Tabler/components/button.html.twig' import button %}

{{ button('fa fa-eye' , {title : 'Ansicht'|trans, combined: 1, buttonType: 'a', url: urlNotification, class: 'btn-sm'}, 'primary') }}

will always add the "faulty" icon class. Having a look at the button macro (not the link_button). the output from

        {%- if icon is not same as (false) -%}
            {{ tabler_icon(icon, true, icon) }}
        {% endif %}

always yields in a icon class.

If you are ok with it I would later write a PR allowing overriding the $withIconClass via the button macro. eg.

....
   {% set icon = values.icon ?? icon %}
++   {% set withIconClass = values.withIconClass ?? false %}
....
    {%- if icon is not same as (false) -%}
++            {{ tabler_icon(icon, withIconClass, icon) }}
     {% endif %}

--- Update

Having a look at twig extension and considering regarding the change above I also would have to update icon function with something like

return ($withIconClass ? 'icon ' : '') . ($this->icons[str_replace('-', '_', $name)] ?? ($default ?? $name));

>> return ($withIconClass ? 'icon ' : 'me-2') . ($this->icons[str_replace('-', '_', $name)] ?? ($default ?? $name));

in order to add some spacing to the icon...

[kevinpapst]

Please try the demo, it will explain the usage. We use the theme and the macro in multiple projects without problems. All of the 7 buttons for example are generated with the macros:

But if you think we can improve it, please go ahead and sent a PR for the demo. The demo contains dozens of working examples and if they look the same or even better afterwards: 👍

[wucherpfennig]

I do see what you mean. My "fix" would actually make many things worse. What I do not like about tabler + fontawesome that the icons do not scale.

as for now I will apply the following scss to my project as it yields in a "better" scaling of the icons.

.page {
  .btn{
    .icon {
      font-size: 125%;
      height: 1.25em;
      margin: 0 .5em 0 -.25em;
      width: 1.25em;
      line-height: 1.25em;
    }
  }
  .btn-icon{
    .icon{
      margin: 0 -1em;
    }
  }
}

It's not perfect but it is was it is ;-)

BR wucherpfennig

[kevinpapst]

Yeah, you could raise a feature request in the tabler repo. I would vote for it as well, because ... well font awesome is just awesome. I don't want to use the tabler icon set, but I understand that the css classes are made for it.

I like that your icons are a tiny bit smaller. Looks better, at least for the ones with icon + text, even though the spacing is a bit off. If we can get a rule that works on the fa or fas or far or fab class, that would be great to incorporate.

What do you mean by "the icons do not scale"?

[wucherpfennig]

What do you mean by "the icons do not scale"?

Sorry I did not see that. If you pay close attention to my last screenshot you will see that the left-hand side icons do not scale with the button size. It is only visible in the first couple of buttons (as the colors do have no impact on the icons).