custom validation icon

MeAppBuilder

MeAppBuilder

Member
Hello,

trying to show a different "validation" icon with my form. The standard icon class="icon-eye-open small" will show, but no other icon when I edit:

element -> validations -> action: notempty -> icon (name not prefixed with "icon-")

Where can I find a list with names for icon? I am using fontawesome with my template helix3. What icon set is used by fabrik? Do I have to upload some additional files? Is it because I have an override with font-family in custom.css?

I have uploaded bootstrap3 overrides from github.


Thank you in advance...
 
Last edited:
Well - some templates support Joomla icomoon icons, some support font-awesome etc. So it depends on your template and can't be in the tooltip.
 
that's true...the tooltip says: "Bootstrap icon name"...rather: " Joomla standard icomoon icons..." :) Confused me, because I didn't know what icon names to use :) or a short tip how to include other icon sets
 
Well - actually the tooltip might be right - they could be Bootstrap 2 GlyphIcons - see http://getbootstrap.com/2.3.2/base-css.html#icons. Many of these are the same as Joomla's icons, but they are not identical.

But as I said, it depends on your template - and of course back- and front-end templates are different, so you might get different results in back- and front-end.

Some years back I had a site which had a template that used Font-Awesome and I did a lot of work to map the Joomla / BS2 icon names better.
 
I actually submitted a PR to font-awesome - not sure if it was ever merged.

But yes - I think you could map font-awesome icons which start "fa-" to equivalent "icon-*" names using custom css.

I think that Fabrik puts "icon-" on the beginning of the string which is a stupid idea really because it means that you can use font-awesome or other icon sets which start with something other than "icon-".

However a PR which checks whether the string starts with e.g. "fa-" and if so doesn't prepend "icon-" would be backwards compatible and would allow you to specify a font-awesome icon in the settings. That said, there are a lot of front-end places where "icon-something" is hard coded, so you probably need the css mappings anyway.

P.S. IMO it is the responsibility of Joomla template authors to ensure that all the standard Joomla / Bootstrap icon names are mapped properly - but you won't get them to do it.
 
Sophist said:
I think that Fabrik puts "icon-" on the beginning of the string which is a stupid idea really because it means that you can use font-awesome or other icon sets which start with something other than "icon-".
Click to expand...

Actually, we use a layout for icon names ...

https://github.com/Fabrik/fabrik/blob/master/components/com_fabrik/layouts/fabrik-icon.php

... which is overridden in the bs3 overrides for Font Awesome, handling both replacing "icon-foo" with "fa fa-foo", and replacing actual icon names which are different (like 'delete' to 'times', 'next' to 'andgle-right', etc):

https://github.com/Fabrik/Fabrik-Joomla-alt-layouts/blob/master/bootstrap3/fabrik-icon.php#L51

... and there's a generic example showing how to write your own for any other icon sets:

https://github.com/Fabrik/Fabrik-Joomla-alt-layouts/blob/master/generic_icons/fabrik-icon.php

-- hugh
 
Basically, anywhere we use icons, we render them, with ...

Code: 
FabrikHelperHTML::icon('icon-whatever')

... which calls this ...

https://github.com/Fabrik/fabrik/blob/master/libraries/fabrik/fabrik/Helpers/Html.php#L3085

... which runs the layout I referenced in my previous post. So it can be overridden on a site wide, site template or Fabrik template basis. Just installing the normal BS3 overrides in your site template will handle it if you have a BS3 template with FA.

When calling the icon() helper, you can optionally add a label, an associative array of properties, and a boolean if you just want the icon name, rather than the full icon markup.


-- hugh
 
Well - Fabrik adding "icon-" on the beginning (rather than requiring the user to prepend "icon-" themselves) may have seemed like a good idea at the time way back when there was no alternative icon sets with alternative naming conventions, and of course we need to maintain backward compatibility and so cannot change it now. But what I meant was that with hindsight, it doesn't seem like such a good idea.

And goodness knows how many "stupid ideas" based on a lack of foresight that I have come up with over the decades...
 
You're not thinking far enough back. Remember that Fabrik predates icons, from the days where "icons" were image files, shipped with Joomla and Fabrik. So everywhere we have the ability to specify an "icon" name, that referred to a file name, with one of a standard set of file types, in a standard set of locations. When icons got invented, initially they weren't bootstrap, and didn't have any "standard" prefix, they were whatever a template developer felt like shipping. Then Bootstrap arrived, with the icon- prefix specific to the Icomoon set shipped with J!. Then new versions of Bootstrap arrived, and different icon sets arrived. And we had to support them all, simultaneously.

Rather than require every Fabrik user to go and change every icon setting in Fabrik if they adopted a Bootstrap template, and anticipating the arrival of other Bootstrap versions and icons sets with different prefixes, we created the icon helper and layout override early on, so users didn't have to worry about which icon set their site template uses, or whether the old file based name mapped on to an icon name ... it's handled in the override. So 'clock' is a clock, whether you are using non-icon or non-Bootstrap (clock.png), or Icomoon (icon-clock) or FA ('fa fa-clock-o'), or whatever the heck uikit uses, etc.

Forcing the user to specify the exact icon set name for their site template would be a horrible way to go.

(The exact progression of naming and sequence of events is lost in the mists of history and my terrible memory, but the above gives a reasonable explanation of why it's like it is).

-- hugh
 
Last edited:
That makes a lot of sense - I was thinking back to J2.5 (which is when I started) which had icons but they weren't BS2 ones. "A 'clock' is a clock" is a great idea - but I know from experience that mapping icon names is not always simple.

Not sure whether a wiki entry on icons would help people, but if so I can add it to the to-do list.
 
The only place it's really still an issue is in some Javascript where we have icon-foo hard wired, but it's only a tiny handful of places, and I think most of the icon names in question have analogs in most icon sets, so it's one of those things I've punted on fixing till someone notices that certain DOM structures built on the fly may have icons that don't work in some site templates.

Anyone is of course welcome to add something to the wiki. It's a wiki. :)

-- hugh
 
You must log in or register to reply here.

Useful links

  • Create a Fabrik Account (Downloads)
  • Create a Forum Account
  • Fabrik Wiki
  • Fabrik 4 Changelog /Install /Upgrade
    • We are in need of some funding.
    More details.

    Thank you.

    Members online

    Total: 78 (members: 1, guests: 77)
    Back
    Top