Comment styliser une liste non ordonnée avec jQuery UI afin que les éléments commencent par une icône d'interface utilisateur au lieu du symbole de liste par défaut?

Question

Je voudrais utiliser une icône du jQuery UI icon set pour styler une liste non ordonnée.

<div> 
    <ul> 
     <li>John Doe</li> 
     <li>Jack Snow</li> 
     <li>Mary Moe</li> 
    </ul> 
</div> 

Par défaut, cette liste apparaît avec des points en face de chaque élément:

• John Doe
• Jack neige
• Mary Moe

Au lieu de cela je tiens à remplacer le point avec une icône tels que ui-icon-person

Comment y arriver?

Answer 1

ul li { 
    list-style-type: none; 
    background: url('your/path/image.png') no-repeat left center; 
} 

Vous devrez peut-être ajouter un peu de remplissage à gauche.

Answer 2

Si vous recherchez la source de la page, définissez simplement le fichier de classe de l'élément de liste pour effacer l'élément standard, puis définissez une balise d'étendue pour ajouter la nouvelle icône.

<li class="ui-state-default ui-corner-all"> 
    <span class="ui-icon ui-icon-person"></span> 
</li> 

Answer 3

Je sais que cette question est un peu obsolète - mais voici un exemple entièrement:

HTML:

<div> 
    <ul class="icon person"> 
    <li>John Doe</li> 
    <li>Jack Snow</li> 
    <li>Mary Moe</li> 
    </ul> 
</div> 

CSS:

ul.icon { 
    list-style: none; /* This removes the default bullets */ 
    padding-left: 20px; /* This provides proper indentation for your icons */ 
} 
ul.icon li { 
    position: relative; /* Allows you to absolutely place the :before element 
          relative to the <li>'s bounding box. */ 
} 
ul.icon.person li:before { 
    background: url(/images/ui-icons_888888_256x240.png) -144px -96px; 
    /* ex: download.jqueryui.com/themeroller/images/ui-icons_888888_256x240.png */ 
    /* The -144px, -96px coordinate is the location of the 16x16 Person icon */ 

    /* The next 2 lines are necessary in order to make the :before pseudo-element 
     appear, and thereby show it's background, your icon. */ 
    content: ''; 
    display: inline-block; 

    /* Absolute is always in relation to the nearest positioned parent. In this 
     case, that's the <li> with _relative_ positioning, above. */ 
    position: absolute; 

    left: -16px; /* Places the icon 16px left of the <li>'s edge */ 
    top: 2px; /* Adjust this based on your font-size and line-height */ 

    height: 16px; width: 16px; /* jQuery UI icons (with spacing) are 16x16 */ 
} 

Voici un jsFiddle showing it working. Le résultat ressemblera à quelque chose comme ceci:

La raison pour laquelle je le pseudo-élément :before est que vous êtes désireux d'utiliser des icônes jQuery UI - qui se présentent sous la forme d'une carte de sprite. En d'autres termes - toutes les icônes se trouvent dans un modèle de grille dans une seule image, comme dans cet exemple:

Source: http://download.jqueryui.com/themeroller/images/ui-icons_888888_256x240.png

Si vous avez essayé de faire juste l'arrière-plan de la <li> cette image, il serait plus compliqué de faire apparaître l'icône unique que vous souhaitez afficher sans afficher également tous ses voisins. Cependant, en utilisant l'élément :before, vous pouvez créer une boîte plus petite, 16px par 16px pour l'icône, et ainsi facilement couper pour afficher une seule icône.

Si vous souhaitez en savoir plus sur les pseudo-éléments :before et :after, consultez this fantastic article comme point de départ.