JQuery mobile navigation icon size

Question

I use this piece of code for my navigation bar

<a href="#home" data-icon="home" data-iconpos="top" class="ui-btn-active ui-state-persist">Home</a> 

with the following CSS

 .ui-icon-home { background: url("home.png") no-repeat 50% 50% !important; } 

This code works fine and replaces the default icon image, but I can't use the big icons here. I want to use 22 * ​​22 px icons. When I try to use the 22 * ​​22 px icons, jQuery Mobile bypasses the icons inside the circle and thus showing only part of my custom icon, I want to delete the circle.

Answer 1

You can use the following css. This will override the default values ​​for icon classes.

 .ui-icon-home { background: url("home.png") no-repeat 50% 50% !important; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; width:22px; height:22px; margin-top:-12px;/*Adjust this value to position the icon*/ } 

Answer 2

I had the same problem. I fixed it with the following code:

 .ui-icon { background-color: transparent; width: 22px; height: 22px; } 

It removes the black shadow circle behind the icons and makes it 22px height / width.

Good luck.

Answer 3

For icons twice as large as normal size, use:

  .ui-icon-custom::after { background-image: url( "custom.svg"); } .big-icon { padding-top: 4em; height: 6em; } .big-icon::after { margin-left: -1.3em; width: 2.6em; height: 2.6em; background-size: 2.6em 2.6em; border-radius: 0; } 

where custom.svg is your custom icon. Remember to add two classes to your team: big-icon and ui-icon-custom .

Answer 4

The .ui class icon in jQuery mobile has a border radius of 9 px. This may be the cause of your problems. Try changing your css to:

 .ui-icon-home { background: url("home.png") no-repeat 50% 50% !important; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px }