how to center icon on notext button?

[Roger6240907]

I was able to increase the size of notext button with
code
.bigbutton{
height: 40px;
width:40px;
}
/code

but the icon is not centered as you can see from the attached pic. How can I center it? Thanks

[Illya Stepanov]

Hi Roger,

What component you are using?

[Illya Stepanov]

If your are using a button component -- it's a standard jQuery component, reference is here.

Try to use:
pre
data-iconpos="notext"
/pre

[Roger6240907]

Hi Illya,
I"m already using a notext button (see title), what I want to do is make the button bigger. If I increase the size with the CSS above, the icon is not centered. At the end I want a big centered-icon notext button.

This is the button without the added CSS (regular notext)

[Illya Stepanov]

Sorry didn't saw it first time Roger.

try to use: predata-iconpos="center"/pre

[Roger6240907]

How can I add that?
I try to add it as "add property" and also as CSS, but both don't work for me.

[Kateryna Grynko]

Hi Roger,

Add the following CSS code to shift the icon:
precode.bigbutton .ui-icon{
margin: 10px 0px 0px 11px !important;
}/code/pre

[Roger6240907]

Thanks for the help, it is getting better but it is still not as it should. This is what I get in 4 scenarios with associated code:
case 1:
code
.bigbutton{
height: 30px;
width: 30px;
}
/code

Case 2:
code
.bigbutton .ui-icon{
height: 30px;
width: 30px;
}
/code

Case 3:
code
.bigbutton .ui-icon{
height: 30px;
width: 30px;
margin: 10px 0px 0px 11px !important;
}
/code

Case 4:
code
.bigbutton .ui-icon{
height: 30px;
width: 30px;
margin: -4px 0px 0px 3px !important;
}
/code

[Maryna Brodina]

Hello! Please try this code:
pre.bigbutton{
height: 40px;
width:40px;
}
.bigbutton .ui-icon{
margin: 10px 0px 0px 11px !important;
}/pre

[Ghayas Khan]

Hello all
I am building an interface for Andriod and want to deploy icons with functions.
Can you please guide me further
Thanks