Icons in form's buttons, how to?

[joit]

Hi,

I added this
"glyphicon glyphicon-ok"
(without the quotes) to a button's save icon class, as described here:
http://getbootstrap.com/components/#glyphicons

But the icon doesn't show.
What could be wrong?

Thanks
Hannes

 

[cheesegrits]

Is this on the stratoserver site?

If so, that doesn't appear to have glyphicons, it's a bootstrap v2 site template, using a slightly modified version of J!'s bootstrap v2, which uses the icomoon icons shipped with J!.

-- hugh

 

[cheesegrits]

Remember that icons are kind of separate from bootstrap itself, and a given version of bootstrap can use a variety of icons sets, like Font Awesome, IcoMoon, Glyphicons, etc.

-- hugh

 

[joit]

Is this on the stratoserver site?

Yes

If so, that doesn't appear to have glyphicons, it's a bootstrap v2 site template, using a slightly modified version of J!'s bootstrap v2, which uses the icomoon icons shipped with J!.

Now I am confused. Does this mean that the icons I can use depend on the template? I didn't know that.
So I guess I have to look around for an new template.
Any recommendations for templates that play nice with fabrik?
Possibly with upgrade to bootstrap V4?

 

[cheesegrits]

Now I am confused. Does this mean that the icons I can use depend on the template? I didn't know that.

Yes. Available icons are always dependent on the template. They aren't a part of "Joomla" per-se. The standard backend admin template and the ProtoStar front end template, which are both Bootstrap v2.1, include the IcoMoon font, and a template.css that defines using those as icons ...

[class^="icon-"]:before,
[class*=" icon-"]:before {
    font-family: 'IcoMoon';
    font-style: normal;
    speak: none;
}

Other templates include different icons. Some are Bootstrap 2.1 but using Font Awesome or GlyphIcon icons instead of IcoMoon. Some are Bootstrap 3, using Font Awesome, or something else entirely. Some use (say) FA, but with a CSS compatibility layer that allow IcoMoon names to work. Etc etc.

This is one of the reasons it's so damn difficult keeping Fabrik up to date with different templates. For every different combination, we have to come up with the layout overrides for pretty much everything we show on a page. The toughest part is BS v2 vs v3, where pretty much every darn class (especially in the fluid grid handling, popover / popup handling, etc) is radically different.

Handling icons is slightly easier than the main class framework, as all we have to do is have one layout that renders all icons, and does any name substitution needed. So for instance, this is our icon layout for Bootstrap 3 with Font Awesome, which takes IcoMoon icon names used throughout Fabrik, and maps them to the FA equivalent:

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

... so when you use that override, most of your IcoMoon icon names will still work.

There are no BS4 templates for J! 3.x, and hopefully never will be, as that would require some massive work. BS4 will happen in J! 4.x.

As for which template to use ... we've had decent luck with most JoomlArt, Gantry 4 and Rocket Themes ones. There are others. Gantry 5 we're more or less working with, although there are still a couple of things to work out.

Basically, make sure they are either Bootstrap 2.1 or 3.x, using IcoMoon or Font Awesome icons, and you should be good. Although you'll have to apply the alternate template overrides:

https://github.com/Fabrik/Fabrik-Joomla-alt-layouts

... and depending which template it is, there may be some tweaks needed.

-- hugh

 

[joit]

Yeah templates, I hate them!
I was actually happy with the one I had (yootheme master) but since it's BS2, it's probably a little outdated. Do you think with a BS3 template, the pages load quicker or is it more a feature update?
I tried that gantry stuff before but it's too much blown up for me. I don't like the way it handles menus and everything is so complicated I don't want to get in so many details.
I haven't heard of JoomlArt's Purity template but it is lightweight and seems to have everything I need.
I just noticed by default there a no fabrik icons at all as in the screenshot. Do I need the alternate template override for that?

 

[cheesegrits]

It won't load any quicker.

Yes, you need the bs3 template overrides. And Purity III is the reference template I use for those overrides.

There may be a few oddities that still need resolving, but on the whole it should work OK. Just let me know if you find any problems, I'll sort them out.

Hugh

Sent from my HTC6545LVW using Tapatalk

 

[joit]

thanks, font awesome icons work great now!