Question

我正在尝试在列表中使用自定义图标。这是fiddle。我试图遵循这些instructions，但我无法使其发挥作用。此外，我尝试遵循此answer，但它适用于旧版本的jQuery mobile。

我正在尝试使用此CSS：

.ui-icon-myicon:after {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Dell_Logo.png/1027px-Dell_Logo.png");
}

检查列表的前两个元素。他们代表了我最好的两次尝试。我想更改右侧列表的图标，即指向右侧的箭头。

我真正想要的是在那里列出玩家，自定义图标将是CF，DMF，AMF，SB等。

Answer 1

并不合适，但到了那里http://jsfiddle.net/RachGal/z5suac2x/（我刚做了第一行）

＆＃13;

.ui-icon-myicon:after {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Dell_Logo.png/1027px-Dell_Logo.png");
}
.ui-icon-dell {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Dell_Logo.png/1027px-Dell_Logo.png");
  background-size: 22px 22px;
  background-color: #ededed;
  background-repeat: no-repeat;
  background-position: 99%;
}

＆＃13;

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <div class="ui-grid-solo" id="slots">
      <div class="ui-block-a">
        <ol data-role="listview" data-inset="true">
          <li data-role="list-divider">Europe</li>
          <li class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-myicon" data-icon="dell"><a href="#">myicon</a>
          </li>
          <li class="ui-icon-myicon" id="myicon"><a href="#">custom-icon</a>
          </li>
          <li><a href="#">Norway</a>
          </li>
          <li><a href="#">Germany</a>
          </li>
          <li><a href="#">India</a>
          </li>
          <li><a href="#">Thailand</a>
          </li>
          <li><a href="#">Zimbabwe</a>
          </li>
          <li><a href="#">Uganda</a>
          </li>
        </ol>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

您需要提供背景图片尺寸：

background-size:20px 20px;

http://jsfiddle.net/cLyz552c/2/

列表中的自定义图标

2 个答案: