0

我正在尝试向 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>

我的问题是什么都没有出现。

我在这里忘记了什么？

4

3 回答 3

4

警告：如果您使用的是 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...
}
于 2014-05-22T08:22:44.560 回答
3

删除您的类标记并使用 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...
}
于 2012-08-30T12:43:14.810 回答
0

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

我在图像文件夹中有我的自定义图标，所以在 CSS 中我给出了

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

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

然后我将我的 CSS 更改为：

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

这样做之后，我可以看到图像

于 2017-07-11T22:52:24.657 回答