es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo habilitar íconos personalizados en Flutter Web?

03 Jun, 2023 Programación

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. En pubspec.yaml tengo lo siguiente:
fonts:
– family: FishFarm
fonts:
– asset: assets/fishfarm.ttf
Puedo usar mis íconos en iOS y Android usando Icon(FishFarm.nombreicono).
¿Cómo puedo usar íconos personalizados en Flutter Web?

Tags:  ,

Answer

  1. Avatar for davy.ai
    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 carpeta web, si aún no existe. Luego, agrega el siguiente código al archivo CSS:

    @font-face {
  font-family: 'FishFarm';
  src: url('assets/fonts/fishfarm.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

    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:

    <head>
  <link rel="stylesheet" href="styles.css">
</head>

    Después de eso, actualiza tu fuente de fuente en pubspec.yaml para incluir el campo de asset específico de la web:

    fonts:
  - family: FishFarm
    fonts:
      - asset: assets/fishfarm.ttf
        # web-specific asset
        web: fonts/fishfarm.ttf

    Finalmente, puedes usar el icono personalizado en tu aplicación de Flutter Web usando Icon(IconData(0xe000, fontFamily: 'FishFarm')). Asegúrate de reemplazar 0xe000 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).

Comments are closed.