Add more icons to icon buttons shortcode « Support Forum | Kriesi.at

Support Forum » Propulsion

Add more icons to icon buttons shortcode

6 posts from 4 voices

Started 1 year ago by reganfrank
Latest reply from Devin
This topic is not resolved

Tags:

reganfrank
Member

Hi,

I am trying to use different icons to what is being generated for the icon button shortcodes.

Theme docs say to :add more icons to the /images/icons folder. but I have done this and they do not show up in the editor.

btw, if I add an icon into the /images/icons/iconbox folder, it works but only for icon boxes.

Any ideas?

Posted 1 year ago #
Ismael
Moderator
Hi,

We are going to create an "APPLY" button for exercise. You can use any png image with an icon size. Put the image on images > icons and name it "apply".

On framework > php > avia_shortcodes > sc, look for button.js.

On the fourth row add this line.
```
label:"Style",
id:"style",
help:"Values: <empty>, info, alert, tick, download, note, help, error, apply",
controlType:"select-control",
selectValues:['', 'info', 'alert', 'tick', 'download', 'note', 'help', 'error', 'apply'],
defaultValue: '',
defaultText: 'none (Default)'
```
Notice that we add apply on "help" and "selectValues"

Then go to css > shortcodes.css and look for /*Inline Links with icon*/ comment. Add this two lines.

.avia-button .avia-apply{ background: transparent url("../images/icons/apply.png") no-repeat center left; padding: 2px 0 2px 22px; left:-2px;}
.avia-ilink .help{ background: transparent url("../images/icons/apply.png") no-repeat center left; }

Make sure that the file extension for the images is correct. In our case we use png image.

Try to reload dashboard and enjoy. To add different buttons just do the instructions again. Hope this helps. :)

Regards,
Ismael
Posted 1 year ago #
reganfrank
Member

Thanks for that Ismael,

Just wondering if there is a way to do this in a child theme?

At the moment, I use a child theme so that when there is a theme update I don't lose my css customisations. I know that I can add the css to my child theme css, but not so sure about the Framework > php > avia_shortcodes > sc, look for button.js files.

Could I put this is a functions.php file in my child theme folder?

Thank

Posted 1 year ago #
Mya

Hi reganfrank,

You should be able to save buttons.js in your child theme like you would your custom stylesheet. Just be sure to use the same hierarchy so you would create the folders framework > php > avia_shortcodes > sc then paste your button.js folder inside the sc folder.

Regards,
Mya

Posted 1 year ago #
reganfrank
Member

@Mya

Thanks a stack, that really helps.

Regards, Regan

Posted 1 year ago #
Devin
Moderator

Glad that helped!

Let us know if you need anything else :)

Posted 1 year ago #