1

以为我找到了通过此链接为导航栏创建自定义图标时遇到的问题的解决方案

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>

演示：http: //jsfiddle.net/vh4Ca/62/

但我仍然有问题。我无法将其设置border radius为none并且图标具有深色背景。

4

3 回答 3

1

这在 jQuery Navbars 中对我有用：

在 HTML 中，将class="ui-icon-nodisc"添加到您设置数据图标的位置

<a href="link.html" data-icon="custom" id="linkid" data-iconshadow="false" class="ui-icon-nodisc">Diplay Information</a>
于 2013-06-13T10:04:35.457 回答
1

要解决深色背景问题，您需要在 Photoshop 中打开该图标并将其删除。与 jQuery 无关。

如果您不想使用深色背景，您的图标需要具有透明背景。只需将您的图标格式设置为启用 Alpha 通道的 PNG 并删除背景。

于 2012-09-04T01:17:04.830 回答
1

好吧，设计师设计的Glyphish 图标是深色的

更新主题为您提供更多控制权

按钮选项我的帮助

应用了主题的 HTML

<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用于定位图标

.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; 
}

​
于 2012-06-21T13:19:33.667 回答