Unicode a través de CSS: antes

81

Estoy usando Font Awesome en mi página web y quiero mostrar un ícono dentro del :beforepseudo elemento.

De acuerdo con la documentación / hoja de referencia , tengo que escribir para obtener esta fuente, pero no funciona. Creo que es normal porque las entidades HTML no son compatibles con :before.
Así que busqué en Google un poco y descubrí que si desea mostrar entidades HTML :before, debe usar la referencia hexadecimal escapada.
Así que estaba buscando la referencia hexadecimal a pero no encontré nada. Creo que es porque estos son valores de "uso privado", sea lo que sea que eso signifique.

¿Hay alguna forma de hacerlo funcionar :before?

— Sven
fuente

Dado que el enlace es un 404, ¿puede estar hablando de elementos pseduo? ¿Intentaste agregar content: "";CSS para tu :beforeelemento?

— Jordania

bastante seguro de que es esto: fortawesome.github.com/Font-Awesome

— Stuart Burrows

¡Sí, lo siento chicos! ¡El enlace está arreglado ahora! @tsujp En realidad, el icono debería mostrarse dentro del pseudo elemento.

— Sven

Estrictamente hablando, no puede mostrar entidades HTML en formato :before. Puede mostrar caracteres Unicode representados por referencias de entidades en HTML, pero no lo hace utilizando la sintaxis de entidad HTML.

— BoltClock

118

La referencia hexadecimal escapada de es \f066.

content: "\f066";

— JJJ
fuente

24

Todos, por favor, vean la respuesta de super_ton, que necesitarán declarar font-family con FontAwesome. De lo contrario, solo obtendrá un símbolo especial y no el icono correcto.

— Mono lorem

2

Para cualquiera que esté usando CSS analizado en PHP, necesitará hacer doble escape a la referencia hexadecimal como esta: content: "\\ f066";

— ramijames

1

Tenga en cuenta que si usa Font Awesome 5, la familia de fuentes ha cambiado. Vea aquí: stackoverflow.com/a/48004111/83542

— Kildareflare

140

En CSS, FontAwesome unicode funciona solo cuando se declara la familia de fuentes correcta (versión 4 o menos):

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

Actualización: la versión 5 tiene diferentes nombres:

Gratis

font-family: "Font Awesome 5 Free"

Pro

font-family: "Font Awesome 5 Pro"

Marcas

font-family: "Font Awesome 5 Brands"

Vea esta respuesta relacionada: https://stackoverflow.com/a/48004111/2575724

— stefan
fuente

8

Me gusta cómo agregaste la parte de la familia de fuentes porque esa es la clave que hizo que la mía funcionara

— ajk4550

1

Tenga en cuenta que si usa Font Awesome 5, la familia de fuentes ha cambiado. Vea aquí: stackoverflow.com/a/48004111/83542

— Kildareflare

1

solo familia de fuentes: FontAwesome funcionó para mí. no familia de fuentes: "FontAwesome"

— Sameera R.

Sorprendentemente, nada funcionó para mí excepto lo que dijo @Sameera. Puedo confirmar que, a partir del 23/10/19, solo font-family: FontAwesome funcionó para mí también. Quería usar el icono de flecha de FA . Este era mi código:a:last-child:after { font-family: FontAwesome; content: '\f061'; }

— sansae

11

Fileformat.info es una referencia bastante buena para estas cosas. En su caso, ya está en hexadecimal, por lo que el valor hexadecimal es f066. Entonces harías:

content: "\f066";

— newtron
fuente

Gracias por esta respuesta. No me di cuenta de que los íconos estaban en hechizo por alguna razón. Así que seguí poniendo '#' en la cadena y no funcionaría. Ahora funciona.

— shell

3

Los puntos de código utilizados en los trucos de fuentes de iconos suelen ser puntos de código de uso privado, lo que significa que no tienen un significado definido de forma general y no deben utilizarse en el intercambio de información abierta, solo mediante un acuerdo privado entre las partes interesadas. Sin embargo, los puntos de código de uso privado se pueden representar como cualquier otro valor Unicode, por ejemplo, en CSS usando una notación como \f066, como otros han respondido. Incluso puede ingresar el punto de código como tal, si su documento está codificado en UTF-8 y sabe cómo escribir un valor Unicode arbitrario por su número en su entorno de creación (pero, por supuesto, normalmente se mostraría usando un símbolo para un desconocido personaje).

Sin embargo, esta no es la forma normal de utilizar fuentes de iconos. Normalmente, utiliza un archivo CSS proporcionado con la fuente y utiliza construcciones como <span class="icon-resize-small">foo</span>. El código CSS se encargará de insertar el símbolo al comienzo del elemento, y no es necesario que sepa el número de punto de código.

— Jukka K. Korpela
fuente

1

En primer lugar, vincule el archivo CSS fontwaesome en su archivo HTML y luego cree una pseudoclase posterior o anterior como "font-family:" FontAwesome "; content:" \ f101 ";" luego guarda. Espero que esto funcione bien.

— Ashraful Alam
fuente