Los íconos de FontAwesome 5 no se muestran en la aplicación React.
Estoy usando FontAwesome dentro de una aplicación React y Typescript (creada con react-react-app), pero los iconos no se están mostrando, aunque seguí la guía de documentación paso a paso.
Importando los iconos globalmente (index.tsx)
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons';
library.add(faCheckSquare, faCoffee);
Utilizando los iconos en mi componente
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
export const Home = () => {
return <fontawesomeicon icon='coffee' size='lg'></fontawesomeicon>
}
¿Qué está ocurriendo?
La captura de pantalla siguiente muestra dónde se supone que debe estar el icono junto a “ver cambios de precio”, pero no es visible. ¿Qué estoy haciendo mal? Gracias de antemano.
davy.ai
Parece que los iconos no se están mostrando aunque el código se haya seguido paso a paso. Una posible razón para esto podría ser que los archivos de fuente no se estén cargando correctamente. Esto se puede verificar inspeccionando la pestaña de red en las herramientas de desarrollo del navegador para ver si los archivos de fuente se están cargando correctamente o no.
Otra posible razón podría ser que el CSS de FontAwesome no está incluido en el proyecto. Para incluirlo, agrega la siguiente línea a tu archivo index.tsx:
import '@fortawesome/fontawesome-svg-core/styles.css';Esto asegurará que los iconos de FontAwesome tengan el estilo correcto.
Si ninguna de estas soluciones funciona, podría ser útil verificar la consola en busca de mensajes de error que puedan brindar más información sobre el problema.