列表中的自定义图标 [英] Custom icon in list

问题描述

我想在列表中使用自定义图标。这里是小提琴。我想按照这些说明，但我无法使其工作。此外，我试图遵循此回答，但它适用于旧版本的jQuery手机。

I am trying to use a custom icon in my list. Here is fiddle. I am trying to follow these instructions, but I can't make it work. Also, I tried to follow this answer, but it works with older versions of 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");
}

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

Check the first two elements of the lists. They represent my two best attempts. I want to change the icon of the list in the right, i.e. the arrow pointing to the right.

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

What I want actually, is to list players there and the custom icons will be CF, DMF, AMF, SB, etc..

推荐答案

; t很适合，但到那里 http://jsfiddle.net/RachGal/z5suac2x/ （我只是第一行）

doesn;t quite fit but getting there http://jsfiddle.net/RachGal/z5suac2x/ (I just did the first line)

.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%;
}

<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>

这篇关于列表中的自定义图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！