CODEWITHSUNDEEP
jquery-mobile
manraj82
manraj82

Reputation: 6325

Issues while creating custom icon for navbar in jquery mobile

Thought I found a solution to the problem I had with creating custom icons for nav bar through this link

HTML

<div data-role="page">  
    <div data-role="content">
        <div data-role="footer" class="nav-glyphish-example">
            <div data-role="navbar" class="nav-glyphish-example" data-grid="d">
            <ul>
                <li><a href="#" id="favorite" data-icon="custom">Favorite</a></li>
                <li><a href="#" id="recent" data-icon="custom">Recent</a></li>
                <li><a href="#" id="contacts" data-icon="custom">Contacts</a></li>
                <li><a href="#" id="keypad" data-icon="custom">Keypad</a></li>
                <li><a href="#" id="voicemail" data-icon="custom">Voicemail</a></li>
            </ul>
            </div>
        </div>
     </div>
 </div>

DEMO: http://jsfiddle.net/vh4Ca/62/

But Im still having problems with it. Im not able to set the border radius to none and the icons have a dark background.

Upvotes: 1

Views: 3289

Answers (3)

yimi404
yimi404

Reputation: 143

This works for me in jQuery Navbars:

in HTML, add class="ui-icon-nodisc" to where you set the data-icon

<a href="link.html" data-icon="custom" id="linkid" data-iconshadow="false" class="ui-icon-nodisc">Diplay Information</a>

Upvotes: 1

Behnam Rasooli
Behnam Rasooli

Reputation: 722

To fix your dark background problem, you need to open the icon in Photoshop and get rid of it. There is nothing to do with jQuery.

Your icon needs to have a transparent background, if you don't want to have a dark background. Just set your icon format to PNG with Alpha channel enabled and delete the background.

Upvotes: 1

Phill Pafford
Phill Pafford

Reputation: 85378

Well the Glyphish Icons are dark in color from the designer

Updating the themes gives you a little more control

Button options my help

HTML with themes applied 

<div data-role="page">  
    <div data-role="content"> 
        <!-- Adding theme b -->
        <div data-role="footer" class="nav-glyphish-example" data-theme="b"> 
            <div data-role="navbar" class="nav-glyphish-example" data-grid="d"> 
            <ul> 
                <li>
                    <!-- Adding theme a -->
                    <a href="#" id="favorite" data-icon="custom" data-theme="a">Favorite</a></li> 
                <li><a href="#" id="recent" data-icon="custom">Recent</a></li> 
                <li><a href="#" id="contacts" data-icon="custom">Contacts</a></li> 
                <li><a href="#" id="keypad" data-icon="custom">Keypad</a></li> 
                <li><a href="#" id="voicemail" data-icon="custom">Voicemail</a></li> 
            </ul> 
            </div> 
        </div> 
     </div>
 </div> ​

CSS is used to position the icons

.nav-glyphish-example .ui-btn .ui-btn-inner {
    padding-top: 40px !important; 
}

.nav-glyphish-example .ui-btn .ui-icon { 
    width: 45px!important; 
    height: 35px!important; 
    margin-left: -24px !important; 
    box-shadow: none!important; 
    -moz-box-shadow: none!important; 
    -webkit-box-shadow: none!important;
    -webkit-border-radius: none !important;
    border-radius: none !important; 
}

#favorite .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png);
    background-position: -345px -112px;
    background-repeat: no-repeat;
}

#recent .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png);
    background-position: -9px -61px;
    background-repeat: no-repeat; 
}

#contacts .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png);
    background-position: -9px -540px;
    background-repeat: no-repeat; 
}

#keypad .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png);
    background-position: -9px -783px;
    background-repeat: no-repeat; 
}

#voicemail .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png);
    background-position: -394px -733px;
    background-repeat: no-repeat; 
}

​

Upvotes: 1

Related Questions