CODEWITHSUNDEEP
cssjquery-mobile
gsamaras
gsamaras

Reputation: 73366

Custom icon in list

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.

I am trying to do it with this 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.

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

Upvotes: 1

Views: 123

Answers (2)

Rachel Gallen
Rachel Gallen

Reputation: 28553

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>

Upvotes: 2

Lowkase
Lowkase

Reputation: 5699

You need to give the background image dimensions:

background-size:20px 20px;

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

Upvotes: 0

Related Questions