Forum | Appery.io

Hi,

I am attempting to set a custom Icon for a button similar to the Icon in the Appery designer settings button the button is located in the page header. I have the following:

CSS:

.ui-button .ui-icon.menu-class {
background-image: url("../image/menu.png");
width: 24;
height: 24;
}

.ui-button.ui-state-hover .ui-icon.menu-class {
background-image: url("../image/menu.png");
width: 24;
height: 24;
}

Jquery:
jQuery('[name="menu_btn"]').button({
text: false,
icons: {
primary: "menu-class" // Custom icon
}});

The Icon:

The change does not work, can you advise me on this please.

Hi Joe.

You are using a complex solution.

Please use the following instead:

1. In button settings fill "Icon" and "Position" properties according to your demand.

2. Set "Class name" property to "myButton".

3. Create CSS or use existing one with the next rule:

   pre
   .myButton.ui-btn:after{
   //Here you can specify yor own styles for the icon.
   background: #f00;
   width: 10px;
   height: 10px;
   }
   /pre

Perfect thanks.