Unicode vía CSS: antes


Estoy usando Font Awesome en mi página web y quiero mostrar un icono dentro del pseudo elemento :before.

De acuerdo con la documentación /cheatsheet, tengo que escribir  para obtener esta fuente, pero no está funcionando. Creo que es normal porque las entidades HTML no son compatibles con :before.
Así que busqué un poco en Google y descubrí que si quieres mostrar entidades HTML en :before, tienes que usar la referencia hexadecimal escapada.
Así que estaba buscando el maleficio referencia 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 que funcione en :before?

Author: lorem monkey, 2013-01-12

5 answers

La referencia hexadecimal escapada de  es \f066.

content: "\f066";
 92
Author: JJJ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-12 15:52:57

En CSS, FontAwesome unicode solo funciona 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:

Libre

font-family: "Font Awesome 5 Free"

Pro

font-family: "Font Awesome 5 Pro"

Marcas

font-family: "Font Awesome 5 Brands"

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

 101
Author: stefan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-17 11:43:08

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

content: "\f066";
 10
Author: newtron,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-12 15:53:23

Los puntos de código utilizados en trucos de fuentes de iconos suelen ser puntos de código de uso privado, lo que significa que no tienen un significado generalmente definido y no deben usarse en el intercambio abierto de información, solo por 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 carácter desconocido).

Sin embargo, esta no es la forma normal de usar fuentes icon. Normalmente se usa un archivo CSS provisto con la fuente y se usan 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 necesita saber el número de punto de código.

 2
Author: Jukka K. Korpela,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-12 18:40:01

Primero enlaza el archivo CSS fontwaesome en tu archivo HTML y luego crea una pseudo clase after o before como "font-family:" FontAwesome"; contenido: "\f101"; " luego guardar. Espero que esto funcione bien.

 1
Author: Ashraful Alam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-11 04:07:28