Question

我在标题中遇到自定义图标问题。按照演示页面上的说明操作并在面板上工作;然而，仍然没有得到任何线索，为什么标题中的那些不会出现。

这是我的代码http://jsfiddle.net/kukubag/z257dngf/3/

<div data-role="page" id="fpost-page" data-url="fpost-page" data-theme="f">
<div data-role="header" data-position="fixed" data-theme="f">
    <a href="#left-panel" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-iconmenu"></a>
    <span class="ui-title"></span>
    <a href="#note-editor-page" class="ui-btn-icon-notext ui-iconnew"></a>
</div>

.ui-iconmenu:after {
background-image: url("https://dl.dropboxusercontent.com/u/67263773/travelogue/img/icmenu.png");
background-size: 22px 22px;

}

.ui-iconnew:after {
background-image: url("https://dl.dropboxusercontent.com/u/67263773/travelogue/img/icnew.png");
background-size: 22px 22px;

Answer 1

您的第一个网址错误：您写了url("https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_Chrome.png.png");次.png

替换为url("https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_Chrome.png");

你为什么在你的CSS中使用:after？

点击此处：http://jsfiddle.net/nrobert/z257dngf/4/ 我还在小提琴中以正确的方式添加了脚本（需要在左窗格中添加）

Answer 2

尝试在自定义图标名称中添加短划线：ui-icon-menu和ui-icon-new：

.ui-icon-menu:after {
    background-image: url("https://dl.dropboxusercontent.com/u/67263773/travelogue/img/icmenu.png");
    background-size: 22px 22px;
    border-radius:0;
}
.ui-icon-new:after {
    background-image: url("https://dl.dropboxusercontent.com/u/67263773/travelogue/img/icnew.png");
    background-size: 22px 22px;
    border-radius:0;
}

这是您更新的 FIDDLE

标头中的JQuery Mobile 1.4自定义图标未显示

2 个答案: