css - usar - iconos con font awesome

Estilo de lista de li personalizado con ícono de fuente impresionante

Question

Me pregunto si es posible utilizar font-awesome (o cualquier otra fuente icónica) para crear un <li> list-style-type personalizado.

Actualmente estoy usando jQuery para hacer esto, es decir:

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

Sin embargo, esto no se ajusta correctamente cuando el <li> texto se ajusta a la página, ya que considera que el icono forma parte del texto, no el indicador de viñeta real.

¿Algun consejo?

Answer 1

El Módulo de Listas y Contadores de CSS Nivel 3 introduce el pseudo-elemento ::marker . Por lo que he entendido, permitiría tal cosa. Desafortunadamente, ningún navegador parece apoyarlo .

Lo que puedes hacer es agregar algo de relleno al padre ul y colocar el ícono 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 letra / 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 letra icónica. FontAwesome, sin embargo, ofrece su propia forma de lidiar con este ''problema''. Consulte la respuesta de Darrrrren a continuación para obtener más detalles.

Answer 2

Me gustaría ofrecer una solución alternativa, más fácil, específica para FontAwesome. Si está usando 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í hay un ejemplo:

<ul class="icons-ul">
  <li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li>
  <li><i class="icon-li icon-ok"></i>Buttons</li>
  <li><i class="icon-li icon-ok"></i>Button groups</li>
  <li><i class="icon-li icon-ok"></i>Navigation</li>
  <li><i class="icon-li icon-ok"></i>Prepended form inputs</li>
  <li><i class="icon-li icon-ok"></i>&hellip;and many more with custom CSS</li>
</ul>

Answer 3

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 difícil encontrar la sangría correcta con los márgenes, etc. Pero esto podría afectarme solo a mí.

Para mí, el posicionamiento absoluto de: antes el pseudo-elemento funciona mejor. Ajusté relleno-izquierda en ul, posición negativa izquierda en el elemento: before, igual que el relleno de ul-left. Para obtener la distancia del contenido del elemento: before right, simplemente configuro el padding-left en 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 ... */
}

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

Answer 4

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