Question

我正在尝试向jqm添加一个自定义图标，我正在执行以下操作：

<style>
.ui-icon-myicon {
    background-image: url('images/myicon.png') !important;
}
</style>

然后在页脚中......

<li>
<a href="#" data-icon="myicon" data-iconpos="top" class="ui-btn-active ui-state-persist btn_inner">News</a>
</li>

我的问题是没有任何东西出现。

我忘了这里的东西？

Answer 1

删除您的类标记并使用JQM中内置的标识符。

<a href="news.html" data-role="button" data-iconpos="top" data-icon="myicon">News</a>

如果您希望图标出现在高像素密度设备（即Apple Retina显示屏）上，则需要包含两倍大小的第二张图像。所以在你的CSS中：

.ui-icon-myicon {
    background-image: url("images/myicon.png");
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ui-icon-myicon {
            /*this image should be sized at 36 x 36 */
        background-image: url("images/myicon@2x.png");
        background-size: 18px 18px;
    }
    ...more HD icon rules go here...
}

Answer 2

警告：如果您正在使用jQuery 1.4+，那么您需要稍微区别一些（请注意下面的:after）

.ui-icon-myicon:after {
    background-image: url("images/myicon.png");
    background-size: 18px 18px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ui-icon-myicon:after {
        background-image: url("images/myicon@2x.png");
        background-size: 36px 36px;
    }
    ...more HD icon rules go here...
}

Answer 3

我遇到了同样的问题，我检查了inspect元素，发现我的后台自定义图标路径的URL错误。

我在图像文件夹中有自定义图标，因此在CSS中我已经给出了

.ui-icon-myicon:after{
    background-image:url("images/facebook.png");
    /* Make your icon fit */
    background-size:18px 18px;
}

之前指向的网址：Myproject / css / images / facebbok.png

然后我将我的CSS更改为：

.ui-icon-myicon:after{
        background-image:url("../images/facebook.png");
        /* Make your icon fit */
        background-size:18px 18px;
    }

这样做之后我就能看到图像

JQuery Mobile Custom Icon没有显示

3 个答案: