Unicode a través de CSS :antes de

Estoy usando Fuente Impresionante en mi página y quiero mostrar un icono dentro de la :before pseudo elemento.

De acuerdo a la documentación/cheatsheet, tengo que tipo de  para obtener esta fuente, pero no está funcionando. Yo creo que es normal, debido a entidades HTML no son compatibles en :before.

Así que busqué en google un poco y descubrí, que si desea mostrar entidades HTML en :before, usted tiene que utilizar el escape hexagonal de referencia.

Así que yo estaba buscando el hexagonal referencia a  pero no he encontrado nada. Yo creo que es porque se trata de «uso privado» valores», lo que eso significa.

Hay alguna forma de hacerlo funcionar en :before?

  • Ya que el vínculo es un 404, usted puede estar hablando de pseduo elementos? Intenta agregar content: ""; en el CSS para su :before elemento?
  • bastante seguro que es este: fortawesome.github.com/Font-Awesome
  • Sí, lo siento chicos! Enlace fijo ahora! @tsujp en Realidad, el icono debe mostrarse dentro de la pseudo elemento.
  • Estrictamente hablando, no se puede mostrar entidades HTML en :before. Usted puede mostrar caracteres Unicode representados por las entidades referencias en HTML, pero no lo hacen utilizando el código HTML de la entidad de la sintaxis.
InformationsquelleAutor Sven | 2013-01-12

5 Kommentare

  1. 105

    El escape hexagonal de referencia de  es \f066.

    content: "\f066";
    • Todo el mundo vea la respuesta de super_ton, que tendrá que declarar font-family con FontAwesome. De lo contrario, sólo se obtendrá un símbolo especial y no el icono correcto!
    • Para cualquier persona que está utilizando CSS analiza en PHP, usted necesitará el doble de escape de la hexagonal de referencia como este: contenido: «\\f066»;
    • Tenga en cuenta que si el uso de Font Awesome 5, la familia de la fuente ha cambiado. Ver aquí: stackoverflow.com/a/48004111/83542
  2. 118

    En CSS, FontAwesome unicode sólo funciona cuando la fuente correcta de la familia es declarado (versión 4 o menos):

    font-family: "FontAwesome";
    content: "\f066";

    Actualización de la Versión 5 tiene diferentes nombres:

    Libre

    font-family: "Font Awesome 5 Free"

    Pro

    font-family: "Font Awesome 5 Pro"

    Marcas

    font-family: "Font Awesome 5 Brands"

    Ver esto relacionadas con la respuesta:
    https://stackoverflow.com/a/48004111/2575724

    • Me gusta cómo agregó la fuente-familia parte debido a que es la clave que hizo trabajo de minas
    • Tenga en cuenta que si el uso de Font Awesome 5, la familia de la fuente ha cambiado. Ver aquí: stackoverflow.com/a/48004111/83542
    • Esto también funciona en estilo componente! Gracias!
    • sólo font-family: FontAwesome trabajó para mí. no font-family: «FontAwesome»
  3. 11

    Fileformat.info es una muy buena referencia para estas cosas. En tu caso, es ya en hexadecimal, por lo que el valor hexadecimal es f066. Así que te gustaría hacer:

    content: "\f066";
    • Gracias por esta respuesta. No me di cuenta de que los iconos eran en hexadecimal, por alguna razón. Así que seguí poniendo ‘#’ en la cadena y que no iba a funcionar. Ahora funciona.
  4. 2

    El código de puntos utilizados en el icono de fuente trucos son generalmente de Uso Privado puntos de código, lo que significa que no tienen generalmente significado definido y no debe ser utilizado en el abierto de intercambio de información, sólo por acuerdo privado entre las partes interesadas. Sin embargo, el Uso Privado puntos de código que puede ser representado como cualquier otro valor Unicode, por ejemplo, en CSS utilizando una notación como \f066, como otros lo han contestado. Usted puede incluso entrar en el punto de código como tal, si el documento está codificado en UTF-8, y usted sabe cómo escribir una arbitraria valor Unicode por su número en su entorno de creación (pero, por supuesto, que normalmente se muestra el uso de un símbolo para un carácter desconocido).

    Sin embargo, esta no es la manera normal de utilizando el icono fuentes. Normalmente se utiliza un archivo CSS proporcionados con la fuente y el uso de construcciones como <span class="icon-resize-small">foo</span>. El código CSS se encargará de insertar el símbolo en el inicio del elemento, y usted no necesita saber el código de número de punto.

  5. 1

    En el primer enlace fontwaesome archivo CSS en el archivo HTML, a continuación, crear una antes o después de la pseudo clase como «font-family: «FontAwesome»;
    contenido: «\f101″;», a continuación, guardar. Espero que este buen trabajo.

Kommentieren Sie den Artikel

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

Pruebas en línea