【问题标题】:Issue with Navbar icon in jquery mobilejquery mobile中的导航栏图标问题
【发布时间】:2014-08-26 00:40:26
【问题描述】:

我需要为我的导航栏添加图标,所以我从以下链接下载了图标,http://www.glyphish.com/,我已经下载了免费图标。然后我试图在代码中添加图标,我的缺点没有显示?代码有什么问题?

<div data-role="navbar">
                <ul>
                    <li><a id="other-color" data-icon="img/193-location-arrow.png" data-iconpos="left" href="#">Set Filter</a></li>
                    <li><a id="other-color" data-icon="img/193-location-arrow.png" data-iconpos="right" href="#">Add page</a></li>
                </ul> 

截图:

【问题讨论】:

    标签: jquery html css jquery-ui jquery-mobile


    【解决方案1】:

    创建自定义类并使用:after 伪选择器修改它们的background-image

    .ui-arrow:after {
      background-image: url(../193-location-arrow.png);
      background-size: 15px 15px;
    }
    
    .ui-location:after {
      background-image: url(../07-map-marker.png);
      background-size: 20px 20px;
    }
    

    Demo

    【讨论】:

    • 如果我想使用文件夹中的图片,url(img/193-location-arrow.png);这行得通吗? img 是我的文件夹名称
    猜你喜欢
    • 2012-03-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-07-08
    • 1970-01-01
    • 1970-01-01
    • 2018-03-11
    • 1970-01-01
    相关资源
    最近更新 更多