Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #10965


    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?



    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.

    help:"Values: <empty>, info, alert, tick, download, note, help, error, apply",
    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. :)




    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?



    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.





    Thanks a stack, that really helps.

    Regards, Regan


    Glad that helped!

    Let us know if you need anything else :)

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Add more icons to icon buttons shortcode’ is closed to new replies.