El uso de FontAwesome o Glyphicons con css :antes de

¿Hay alguna forma de incrustar código HTML del css content: elemento cuando se utiliza un :before pseudo-elemento?

Quiero utilizar una Fuente Impresionante (o Glyphicon) en un caso como este:

    h1:before {
        content: "X";
        padding-right: 10px;
        padding-left: 10px;
        color: @orangeLight;
    }

Donde X es algo así como <i class="icon-cut"></i>.

Puedo, por supuesto, hacer esto de forma manual en HTML, pero lo que realmente quiero usar :before en este caso.

Del mismo modo, hay alguna forma de usar <i> como una lista de bala? Esto funciona, pero no se comporta correctamente para multi-línea de elementos de viñeta:

<ul class="icons">
  <li><i class="icon-ok"></i> Lists</li>
  <li><i class="icon-ok"></i> Buttons</li>
  <li><i class="icon-ok"></i> Button groups</li>
  <li><i class="icon-ok"></i> Navigation</li>
  <li><i class="icon-ok"></i> Prepended form inputs</li>
</ul>
  • Desde :before es un pseudo elemento, no se puede tener html contenido, sólo text.
  • Hola tig, comprobando si mi respuesta fue suficiente. Espero que ayudó. Gracias!
  • Usted realmente debe aceptar wylander la respuesta. Es totalmente hace lo que necesito, que parece ser lo que quería, demasiado!
InformationsquelleAutor tig | 2012-08-09

8 Kommentare

  1. 155

    Lo que está describiendo es en realidad lo que FontAwesome ya está haciendo. Se aplican los FontAwesome font-family a la ::before pseudo elemento de cualquier elemento que tiene una clase que comienza con «iconos».

    [class^="icon-"]:before,
    [class*=" icon-"]:before {
      font-family: FontAwesome;
      font-weight: normal;
      font-style: normal;
      display: inline-block;
      text-decoration: inherit;
    }

    A continuación, utilizan el pseudo elemento ::before para colocar el icono en el elemento con la clase. Yo sólo fui a http://fortawesome.github.com/Font-Awesome/ e inspeccionado el código para encontrar esto:

    .icon-cut:before {
      content: "\f0c4";
    }

    Así que si usted está mirando para agregar el icono de nuevo, puede utilizar la ::after elemento para lograr esto. O para la segunda parte de su pregunta, usted podría utilizar el ::after pseudo elemento para insertar el carácter de viñeta a verse como un elemento de la lista. A continuación, utilice el posicionamiento absoluto para colocarlo a la izquierda, o algo similar.

    i:after{ content: '\2022';}
    • Aquí usted puede encontrar todo el contenido icono de códigos de "\xxxx"; : astronautweb.co/fragmento/font-awesome
    • Esa es una buena lista de todos en un solo lugar! Gracias por compartir! También, si usted va a la fuente sitio web impresionante que muestra los iconos (fortawesome.github.io/Font-Awesome/iconos) y haga clic en uno de los iconos, la página tiene el Unicode hacia la parte superior, que es el mismo número que se utiliza en el contenido de la propiedad.
    • Es posible el uso de unicode valores de los iconos? \2022 —> ¿cuál es el formato esta?
    • El \2022 formato creo que es la representación hexadecimal de unicode. Ver a esta pregunta y la respuesta para más info: stackoverflow.com/questions/10393462/…
    • si usted está utilizando el SVG-con-JS enfoque: leer mi respuesta sobre cómo funciona .. o @ fontawesome.com/how-to-use/on-the-web/advanced/…
  2. 3

    @keithwyland respuesta es genial. He aquí un SECS mixin:

    @mixin font-awesome($content){
        font-family: FontAwesome;
        font-weight: normal;
        font-style: normal;
        display: inline-block;
        text-decoration: inherit;
        content: $content;
    }

    Uso:

    @include font-awesome("\f054");
  3. 0

    En el caso de los elementos de lista, hay un poco de CSS que se pueden utilizar para conseguir el efecto deseado.

    ul.icons li {
      position: relative;
      padding-left: -20px; //for example
    }
    ul.icons li i {
      position: absolute;
      left: 0;
    }

    He probado esto en Safari en OS X.

  4. 0

    Este enfoque debe ser evitado. El valor predeterminado para vertical-align es baseline. Cambiar la fuente-familia de sólo el pseudo elemento resultará en elementos con diferentes fuentes. Diferentes fuentes pueden tener diferentes métricas de fuente y diferentes líneas de base. En fin para los diferentes puntos de referencia para alinear la altura total del elemento tendría que aumentar. Ver este efecto en la acción.

    Siempre es mejor tener un elemento por fuente icono.

  5. 0

    La aceptado respuesta (a partir de 2019 29 de JULIO) sólo es válido aún si no han empezado a usar la más reciente SVG-con-JS enfoque de FontAwesome. En cuyo caso deberá seguir las instrucciones de sus CSS Pseudo-Elementos HowTo.
    Básicamente, hay tres cosas a tener en cuenta:

    • colocar los datos de atributo en el GUIÓN de la Etiqueta
      «datos-búsqueda-pseudo-elementos de la» carga de la fontawesome.min.js
    • hacer el pseudo-elemento en sí display:none
    • adecuada font-family & font-weight combinación para el
      icono que usted necesita: «Font Awesome 5 Libre» y 300 (fal/luz), 400 (mucho/regular) o 900 (fas/sólido)
  6. -1

    Esta es la manera más fácil de hacer de lo que usted está tratando de hacer:

    http://jsfiddle.net/ZEDHT/

    <style>
     ul {
       list-style-type: none;
     }
    </style>
    
    <ul class="icons">
     <li><i class="fa fa-bomb"></i> Lists</li>
     <li><i class="fa fa-bomb"></i> Buttons</li>
     <li><i class="fa fa-bomb"></i> Button groups</li>
     <li><i class="fa fa-bomb"></i> Navigation</li>
     <li><i class="fa fa-bomb"></i> Prepended form inputs</li>
    </ul>
  7. -1

    Re: utilizando el icono en :before
    reciente de Fuente Impresionante incluyen la .fa-icon() mixin para SASS y LESS. Esto incluirá automáticamente la font-family así como algunos de representación de ajustes (por ejemplo,-webkit-font-smoothing). Así que usted puede hacer, por ejemplo:

    //Add "?" icon to header.
    h1:before {
        .fa-icon();
        content: "\f059";
    }
    • Sólo un breve recordatorio de que la fuente impresionante también proporciona variables a utilizar como contenido de modo que también se puede utilizar: .la pseudo-clase:antes de { @incluyen fa-icono(); contenido: $fa-var-teléfono-cuadrado; }
  8. -14
    <ul class="icons-ul">
    <li><i class="icon-play-sign"></i> <a>option</a></li>
    <li><i class="icon-play-sign"></i> <a>option</a></li>
    <li><i class="icon-play-sign"></i> <a>option</a></li>
    <li><i class="icon-play-sign"></i> <a>option</a></li>
    <li><i class="icon-play-sign"></i> <a>option</a></li>
    </ul>

    Todos la fuente impresionante iconos por defecto viene con Bootstrap.

    • desde cuando? bootstrap viene con glyphicons, no con fontawesome.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea