Streaming live at 10am (PST)

Add Icon to Tab or Button

How can we do the following?

  1. Add an Icon to a TAB component?

  2. Add an Icon to a BUTTON Component?

We have a complex project whereby visual images for the various navigation TABS and on BUTTONS would be a valuable addition.

Anyone have any guidelines as to how to pull this off?

The solution is to add an image, size it down, then create negative margins to position the image where desired with respect to the Tab Text.
Same process does not work for the BUTTONS, so still NEED HELP(!) with that question.

Or you could just upload and use an icon font (for example Font Awesome). If you use Font Awesome, head over to the fonts cheatsheet, copy the icon, then paste it where you want. See attached screenshot for how I do it.

Well, that FontAwesome seems to be a decent solution for the BUTTONS.

Probably use it for the TABS also, but those will likely be fancier, so likely not.

However, thank you so much for the suggestion, which we will seriously pursue.


I’ve been trying to integrate FA…
So far, best I can get is, to upload the FA Webfonts into the fonts section, add a span to the text area, and change the font selection to font awesome.

Problem with this method is, in order to call up the icon, I have to copy the glyph, instead of using the fA classes such as fa-alarm-clock, fa-users, etc etc. The classes are easier to remember than the glyphs.

How are you getting it done?


This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.