I have had this same problem ever since I started OutSystems and yet there is no progress towards solving this. I have also seen many times this question come up and no resolution.
I need to add an icon to a button. A button in OutSystems is an <input> of type="submit" with its value the text that will appear on the Button.
Please note I cannot use a link in this case. I already in the past have used a link with an icon enclosed which I style as Button. In this case I cannot use a link because I have several forms on one page; for example one for addresses one for contact numbers etc, on each form there is a save button. If I use a link then ALL the forms on the page are validated and then I get "required!" message on forms for which I did not click the "save". If I use a Button widget this works correctly, only the form on which the Save Button was clicked is validated. I tried adding type="submitted" attribute to the links but it does not help. So I am stuck with absolutely having to use the Button widget, and I absolutely have to add an icon.
Unfortunately I cannot analyze OutSystems code behind the scenes to see how I can get the same behaviour on a link as on a Button, but there obviously is a difference.
All posts I read regarding this issue did not one offer a solution, but they are old and I am wondering if perhaps in OS11 OutSystems has provided a solution for this.
Hi Elize,
First, are you trying to use an "OutSystems" Icon (Fontawesome) or an ICO/PNG/etc?
Notice that the INPUT of type submit does not accept images (this is not an OutSystems problem).If you want to add a Fontawesome icon (that is in fact text, not image), you can try to use this kind of approach:
1. Give some space in the Label of the button
2. Add a div with a specific class (e.g.: myclass) around the button
3. Apply some CSS (e.g):
div.myclass:after { font-family: FontAwesome; content: "\f004"; font-size: 13px; position: absolute; right: 11px; top: 0px; color: white; pointer-events: none; }
It is not simple "adding an icon", but it works.
Hope this helps.
Guys,
In reactive web you just place an icon widget left or right from the text inside a button. Then you set the size of the icon.
Regards,
Daniel
Thanks Daniel. This is the best way to put the icon inside a button.
Nice, Daniel.
Didn't try this on React. Only traditional Web (where you have to do it yourself).
Good to know.
Cheers
Hi Eduardo,
Thank you for the ideas, I managed to get it working using this method. I just needed to style the CSS according to my situation, the icon ended up in the top right corner of the screen (see screenshot below), but I changed CSS slightly and now it works perfectly.
The CSS for my situation
div.ButtonAdd::after { font-family: FontAwesome; content: "\f067"; font-size: 13px; position: relative; left: -25px; top: 0px; color: var(--color-primary); pointer-events: none; }
and the perfect result:
You might also consider not using a button in this context, but a link instead, which you can add an icon to.
Yes, that I already know, then it looks like a link and not a button, it has to look like a button, then I still have to manually add styling to make it look like abutton, what is the use of that?