Stile di elenco personalizzato con icona font-awesome

Mi chiedo se è possibile utilizzare classi font-awesome (o qualsiasi altro font iconico) per creare un tipo di <li>elenco personalizzato ?

Attualmente sto usando jQuery per fare questo, cioè:

$("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>");

Tuttavia, questo non si adatta correttamente quando il <li>testo scorre attraverso la pagina poiché considera l'icona come parte del testo, non il vero indicatore di proiettile.

Qualche consiglio?

Il modulo CSS Lists and Counters Level 3 introduce lo ::markerpseudo-elemento. Da quello che ho capito, permetterebbe una cosa del genere. Sfortunatamente, nessun browser sembra supportarlo .

Quello che puoi fare è aggiungere un po 'di padding al genitore ule tirare l'icona in quel padding:

ul {
  list-style: none;
  padding: 0;
}
li {
  padding-left: 1.3em;
}
li:before {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

Regola il padding / font-size / etc a tuo piacimento, e il gioco è fatto. Ecco il solito violino: http://jsfiddle.net/joplomacedo/a8GxZ/

=====

Funziona con qualsiasi tipo di carattere iconico. FontAwesome, tuttavia, fornisce il proprio modo di affrontare questo "problema". Controlla la risposta di Darrrrrren qui sotto per maggiori dettagli.

Come da Font Awesome Documentation :

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check"></i>Barbabella</li>
  <li><i class="fa-li fa fa-check"></i>Barbaletta</li>
  <li><i class="fa-li fa fa-check"></i>Barbalala</li>
</ul>

Oppure, usando Jade:

ul.fa-ul
  li
    i.fa-li.fa.fa-check
    | Barbabella
  li
    i.fa-li.fa.fa-check
    | Barbaletta
  li
    i.fa-li.fa.fa-check
    | Barbalala

Vorrei fornire una soluzione alternativa, più semplice, specifica per FontAwesome. Se stai usando un font iconico diverso, la risposta di JOPLOmacedo è ancora perfettamente valida per l'uso.

FontAwesome ora gestisce gli stili di elenco internamente con le classi CSS .

Ecco l'esempio ufficiale:

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

Volevo aggiungere alla risposta di JOPLOmacedo. La sua soluzione è la mia preferita, ma ho sempre avuto problemi con il rientro quando la li aveva più di una riga. È stato complicato trovare il rientro corretto con margini ecc. Ma questo potrebbe riguardare solo me.

Per me il posizionamento assoluto dello :beforepseudo-elemento funziona meglio. Ho impostato padding-leftsu ul, la posizione negativa lasciata :beforesull'elemento, uguale a quella di ul padding-left. Per ottenere la distanza del contenuto :beforedall'elemento giusto ho appena impostato il padding-leftsu li. Naturalmente il li deve avere una posizione relativa. Per esempio

ul {
  margin: 0 0 1em 0;
  padding: 0 0 0 1em;
  /* make space for li's :before */
  list-style: none;
}

li {
  position: relative;
  padding-left: 0.4em;
  /* text distance to icon */
}

li:before {
  font-family: 'my-icon-font';
  content: 'character-code-here';
  position: absolute;
  left: -1em;
  /* same as ul padding-left */
  top: 0.65em;
  /* depends on character, maybe use padding-top instead */
  /*  .... more styling, maybe set width etc ... */
}

Spero che questo sia chiaro e abbia un valore per qualcun altro oltre a me.

L'ho fatto così:

li {
  list-style: none;
  background-image: url("./assets/img/control.svg");
  background-repeat: no-repeat;
  background-position: left center;
}

Oppure puoi provare questo se vuoi cambiare il colore:

li::before {
  content: "";
  display: inline-block;
  height: 10px;
  width: 10px;
  margin-right: 7px;

  background-color: orange;
  -webkit-mask-image: url("./assets/img/control.svg");
  -webkit-mask-size: cover;
}

Ho fatto due cose ispirate al commento di @OscarJovanny, con alcuni hack.

Passo 1:

• Scarica il file delle icone come svg da qui , poiché ho solo bisogno di questa icona dal carattere fantastico

Passo 2:

<style>
ul {
    list-style-type: none;
    margin-left: 10px;
}

ul li {
    margin-bottom: 12px;
    margin-left: -10px;
    display: flex;
    align-items: center;
}

ul li::before {
    color: transparent;
    font-size: 1px;
    content: " ";
    margin-left: -1.3em;
    margin-right: 15px;
    padding: 10px;
    background-color: orange;
    -webkit-mask-image: url("./assets/img/check-circle-solid.svg");
    -webkit-mask-size: cover;
}
</style>

risultati