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?
content: "";CSS para tu:beforeelemento?:before. Puede mostrar caracteres Unicode representados por referencias de entidades en HTML, pero no lo hace utilizando la sintaxis de entidad HTML.Respuestas:
La referencia hexadecimal escapada de
es\f066.content: "\f066";fuente
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
fuente
a:last-child:after { font-family: FontAwesome; content: '\f061'; }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";fuente
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.fuente
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.
fuente