CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobile
h_a86
h_a86

Reputation: 772

jquery mobile navigation bar icon size

I am using this piece of code for my nav 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 perfectly and replaces default icon image but I cant use large icons here. I want to use 22 * 22 px icons. When I try to use 22 * 22 px icons jQuery Mobile encaps icons inside a circle and thus showing only some part of my custom icon I want to remove circle.

Upvotes: 4

Views: 16716

Answers (4)

untill
untill

Reputation: 1593

For icons twice as big as the regular 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 button: big-icon and ui-icon-custom.

Upvotes: 1

Gilly
Gilly

Reputation: 9692

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.

Upvotes: 1

user700284
user700284

Reputation: 13620

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*/
}

Upvotes: 4

Hessius
Hessius

Reputation: 1404

The class .ui-icon in the jquery mobile has a border radius of 9 px - This might be what is causing 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
}

Upvotes: 0

Related Questions