Solución:
Si está utilizando el Versión JS + SVG Lea esto: Font Awesome 5 muestra un cuadrado vacío cuando se usa la versión JS + SVG
Primero, solo necesita incluir el archivo CSS de Font Awesome 5 en la etiqueta principal usando:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
O dentro del archivo CSS:
@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css")
Entonces necesitas corregir el Familia tipográfica y el contenido como abajo:
@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
.fp-prev:before {
color:#000;
content: 'f35a'; /* You should use and not /*/
font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/
font-style: normal;
font-weight: normal;
font-size:40px;
}<i class="fp-prev"></i>En algunos casos, también debe agregar
font-weight:900
Más detalles aquí: Font Awesome 5 en pseudo elementos muestra un cuadrado en lugar de un ícono
Como nota al margen: Font Awesome 5 proporciona 4 diferentes font-family para cada paquete de iconos:
Font Awesome 5 Free para los iconos gratuitos.
Font Awesome 5 Brands para los iconos de la marca como Facebook, Twitter, etc.
@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
.fp-prev:before {
color: #000;
content: "f099";
font-family: "Font Awesome 5 Brands";
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}<i class="fp-prev"></i>Font Awesome 5 Pro para Font Awesome Pro.
Font Awesome 5 Duotone también incluido en el paquete Pro.
Relacionado: Font Awesome 5 Elegir la familia de fuentes correcta en pseudo-elementos
Haz tu font-weight: 900;. Veo que lo extrañas