jquery-mobileprimefacesprimefaces-mobile

How change icon dataList of PrimeFaces Mobile?

I have a question I have a problem to change the icon DataList Primeface Mobile. I researched according to style: <p class="ui-li-aside" /> brings the icon and position, I tried to create my own style and add the icon does not work me.

default.css (created style)

.ui-li-edit {
    margin: 0;
    position: absolute;
    right: 3.333em;
    text-align: right;
    top: 1em;

    background-image:
    url("/sgcc-web-app/javax.faces.resource/images/icons-18-white.png.jsf?ln=primefaces-mobile");
    background-position: -108px 70%;
    width: 18px;
    height: 18px;
}

enter image description here

Solution

  • To have a custom icon on the side you need to create a class and add into the a tag in the list items. You need to add the :after in the class to make it work. This method acts the same as ui-li-aside but with a custom icon.

    Demo

    http://jsfiddle.net/0596ezfo/

    CSS & HTML

    .ui-icon-myicon:after {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/7/7e/Cute-Ball-Favorites-icon.png");
    /* Make your icon fit */
    background-size: 28px 28px;
}


<li><a class="ui-icon-myicon">MY Custom Icon</a></li>