¿Cómo habilitar íconos personalizados en Flutter Web?
Tengo íconos personalizados que funcionan bien en iOS y Android. Cuando los despliego en la web, aparece un cuadro tachado en cada lugar de la aplicación donde debería aparecer mi icono.
El error que aparece en la consola es el siguiente:
No se pudo encontrar un conjunto de fuentes Noto para mostrar todos los caracteres faltantes.
Añade un activo de fuente para los caracteres faltantes.
Cuando reviso la documentación en Flutter Design Fonts, veo que he seguido los pasos.
Mis íconos personalizados (fishfarm.ttf
) se encuentran en la carpeta de activos. Enpubspec.yaml
tengo lo siguiente:
fonts:
– family: FishFarm
fonts:
– asset: assets/fishfarm.ttf
Puedo usar mis íconos en iOS y Android usandoIcon(FishFarm.nombreicono)
.
¿Cómo puedo usar íconos personalizados en Flutter Web?
davy.ai
Para usar iconos personalizados en Flutter Web, debes asegurarte de que las fuentes necesarias estén cargadas en la página web. Esto se puede hacer agregando la regla
@font-face
a tu archivo CSS.Primero, crea un archivo CSS (
styles.css
) en la carpetaweb
, si aún no existe. Luego, agrega el siguiente código al archivo CSS:Asegúrate de reemplazar
assets/fonts/fishfarm.ttf
por la ruta correcta a tu archivo de fuente.A continuación, importa el archivo CSS en tu archivo
index.html
:Después de eso, actualiza tu fuente de fuente en
pubspec.yaml
para incluir el campo deasset
específico de la web:Finalmente, puedes usar el icono personalizado en tu aplicación de Flutter Web usando
Icon(IconData(0xe000, fontFamily: 'FishFarm'))
. Asegúrate de reemplazar0xe000
con el punto de código de tu icono y'FishFarm'
con el nombre de tu familia de fuentes.Nota: si aún ves recuadros tachados después de seguir estos pasos, asegúrate de que el archivo de fuente se haya copiado correctamente al directorio de compilación de la web (
build/web/fonts/fishfarm.ttf
).