Estilo de lista de li personalizado con icono de fuente impresionante

Me pregunto si es posible utilizar las clases font-awesome (o cualquier otra fuente icónica) para crear un <li>tipo de estilo de lista personalizado .

Actualmente estoy usando jQuery para hacer esto, es decir:

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

Sin embargo, esto no tiene un estilo adecuado cuando el <li>texto se ajusta a través de la página, ya que considera que el icono es parte del texto, no el indicador de viñeta real.

¿Algun consejo?

El Módulo 3 de Listas y contadores CSS presenta el ::markerpseudo-elemento. Por lo que he entendido, permitiría tal cosa. Desafortunadamente, ningún navegador parece admitirlo .

Lo que puede hacer es agregar algo de relleno al elemento primario uly colocar el icono en ese relleno:

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>

Ajuste el relleno / tamaño de fuente / etc. a su gusto, y eso es todo. Aquí está el violín habitual: http://jsfiddle.net/joplomacedo/a8GxZ/

=====

Esto funciona con cualquier tipo de fuente icónica. FontAwesome, sin embargo, proporciona su propia forma de lidiar con este 'problema'. Consulte la respuesta de Darrrrrren a continuación para obtener más detalles.

Según la documentación de Font Awesome :

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

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

Me gustaría proporcionar una solución alternativa y más fácil que sea específica para FontAwesome. Si está utilizando una fuente icónica diferente, la respuesta de JOPLOmacedo todavía está perfectamente bien para su uso.

FontAwesome ahora maneja estilos de lista internamente con clases CSS .

Aquí está el ejemplo oficial:

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

Quería agregar a la respuesta de JOPLOmacedo. Su solución es mi favorita, pero siempre tuve problemas con la sangría cuando el li tenía más de una línea. Fue complicado encontrar la sangría correcta con márgenes, etc. Pero esto podría preocuparme solo a mí.

Para mí, el posicionamiento absoluto del :beforepseudo-elemento funciona mejor. Me puse padding-leften ul, la posición negativa que queda en el :beforeelemento, igual que la de ul padding-left. Para obtener la distancia del contenido desde el :beforeelemento correcto, solo configuro el padding-leften el li. Por supuesto, el li tiene que tener una posición relativa. Por ejemplo

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 ... */
}

Esperemos que esto sea claro y tenga algún valor para alguien más que yo.

Lo hice así:

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

O puede probar esto si desea cambiar el color:

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

Hice dos cosas inspiradas en el comentario de @OscarJovanny, con algunos trucos.

Paso 1:

• Descargue el archivo de iconos como svg desde Aquí , ya que solo necesito este icono de font awesome

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

Resultados