Quiero usar un icono de Font Awesome como contenido CSS, es decir,
a:before {
content: "<i class='fa...'>...</i>";
}
Sé que no puedo usar el código HTML content
, así que ¿solo quedan imágenes?
Quiero usar un icono de Font Awesome como contenido CSS, es decir,
a:before {
content: "<i class='fa...'>...</i>";
}
Sé que no puedo usar el código HTML content
, así que ¿solo quedan imágenes?
Respuestas:
Actualización para FontAwesome 5 Gracias a Aurelien
Debe cambiar font-family
a Font Awesome 5 Brands
OR Font Awesome 5 Free
, según el tipo de icono que está tratando de representar. Además, no olvides declararfont-weight: 900;
a:before {
font-family: "Font Awesome 5 Free";
content: "\f095";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 900;
}
Puede leer el resto de la respuesta a continuación para comprender cómo funciona y conocer algunas soluciones para el espacio entre el icono y el texto.
FontAwesome 4 y menos
Esa es la forma incorrecta de usarlo. Abra la hoja de estilo de fuente impresionante, vaya a la class
fuente que desea usar fa-phone
, por ejemplo , copie la propiedad de contenido en esa clase con la entidad y úsela como:
a:before {
font-family: FontAwesome;
content: "\f095";
}
Solo asegúrate de que si estás buscando apuntar a una a
etiqueta específica , entonces considera usar un class
lugar para hacerlo más específico como:
a.class_name:before {
font-family: FontAwesome;
content: "\f095";
}
Usando el camino anterior pegará el ícono con el texto restante, así que si desea tener un poco de espacio entre los dos, hágalo display: inline-block;
y use algunos padding-right
:
a:before {
font-family: FontAwesome;
content: "\f095";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
}
Ampliando esta respuesta aún más, ya que muchos podrían tener el requisito de cambiar un ícono al pasar el mouse, por lo que para eso, podemos escribir un selector y reglas de :hover
acción por separado :
a:hover:before {
content: "\f099"; /* Code of the icon you want to change on hover */
}
Ahora, en el ejemplo anterior, los íconos se empujan debido al tamaño diferente y seguramente no lo desea, por lo que puede establecer una width
declaración fija en la base como
a:before {
/* Other properties here, look in the above code snippets */
width: 12px; /* add some desired width here to prevent nudge */
}
font-family: FontAwesome;
esto cambia la fuente de las etiquetas de anclaje también. ¿Cómo podemos manejar eso?
font-family
se supone que debe ser llamado en :before
pseudo y no en la etiqueta de anclaje
content
códigos correctos para la copia directa (es decir, una obviedad). PD: ¿Todavía me pregunto por qué los chicos de FontAwesome no ponen los códigos de contenido en cada página de iconos?
Puede encontrar otra solución sin tener que jugar manualmente con los caracteres Unicode en Making Font Awesome awesome: usar iconos sin etiquetas i ( descargo de responsabilidad: escribí este artículo ).
En pocas palabras, puede crear una nueva clase como esta:
.icon::before {
display: inline-block;
margin-right: .5em;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
Y luego úselo con cualquier ícono, por ejemplo:
<a class="icon fa-car" href="#">This is a link</a>
a:before {
content: "\f055";
font-family: FontAwesome;
left:0;
position:absolute;
top:0;
}
Enlace de ejemplo: https://codepen.io/bungeedesign/pen/XqeLQg
Obtenga el código de icono de: https://fontawesome.com/cheatsheet?from=io
Debería tener el peso de fuente establecido en 900 para que Font Awesome 5 Free font-family funcione.
Este es el que funciona:
.css-selector::before {
font-family: 'Font Awesome 5 Free';
content: "\f101";
font-weight: 900;
}
Como dice en el sitio web FontAwesome FontAwesome =>
HTML:
<span class="icon login"></span> Login</li>
CSS:
.icon::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.login::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}
En .login::before
-> editar content:'';
para adaptarse a su Unicode.
Actualización para Font Awesome 5 usando SCSS
.icon {
@extend %fa-icon;
@extend .fas;
&:before {
content: fa-content($fa-var-user);
}
}
Aquí está mi solución webpack 4 + font awesome 5:
plugin de paquete web:
new CopyWebpackPlugin([
{ from: 'node_modules/font-awesome/fonts', to: 'font-awesome' }
]),
estilo css global:
@font-face {
font-family: 'FontAwesome';
src: url('/font-awesome/fontawesome-webfont.eot');
src: url('/font-awesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('/font-awesome/fontawesome-webfont.woff2') format('woff2'),
url('/font-awesome/fontawesome-webfont.woff') format('woff'),
url('/font-awesome/fontawesome-webfont.ttf') format('truetype'),
url('/font-awesome/fontawesome-webfont.svgfontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
i {
font-family: "FontAwesome";
}