Fuentes de iconos

Las fuentes de iconos te permiten convertir iconos vectoriales en fuentes web. Esto significa que puedes mostrar iconos vectoriales en tu sitio y modificarlos con CSS. Comprueba esta página para aprender a usar las fuentes de iconos con Flaticon..

Características

  • 1. Alta resolución

    Los iconos son escalables y compatibles con las pantallas retina. Son perfectos para los diseños interactivos. Se ven geniales en pantallas de cualquier resolución.

  • 2. Rápido y fácil

    Crear fuentes de iconos con Flaticon es más fácil que nunca. Añade iconos a tu colección y descárgalos en un periquete.

  • 3. Control total CSS

    Las fuentes de iconos son básicamente texto, por lo que puedes modificarlas con CSS..

  • 4. Accesible

    Flaticon nombra los iconos con términos comunes para ayudar a las funciones de accesibilidad a entender su significado ;-).

  • 5. Se pueden animar

    Las transiciones y animaciones CSS son completamente compatibles con las fuentes de iconos.

  • 6. Ordenado

    No más montones de imágenes o sprites engorrosos. ¡Basta de perder el tiempo!

In we icons

<p>In <i class="flaticon-logo-symbol-new"></i> we <i class="flaticon-heart"></i> icons</p>

Just one file load. (~20kb)
.ttf, .woff, .eot, .svg

Cómo usar las fuentes de iconos con Flaticon

Manual de fuentes de iconos, parte 1

1. Prepara tu colección

Añade iconos monocolor desde tu colección para tu página web

2. Descargar fuente de iconos

Abre tu colección y pulsa el botón de Descargar colección. Luego, selecciona fuente de iconos

Manual de fuentes de iconos, parte 2
Manual de fuentes de iconos, parte 3

3. Prepara tu colección

Copia los archivos fuente y CSS a tu carpeta web.

4. Cargar la hoja de estilo

Añade la hoja de estilo en la etiqueta HEAD de tu web.

<link rel="stylesheet" type="text/css" href=“tu_dominio_web/css_root/flaticon.css">
Manual de fuentes de iconos, parte 4
Manual de fuentes de iconos, parte 5

5. Usar las categorías

Usa las categorías de cada icono y aparecerán en tu página web. Después, manipúlalos con CSS.

Ejemplo de uso: <i class="flaticon-airplane49"></i> o <span class="flaticon-airplane49"></span>
  • Te presentamos nuestras colecciones

    Las colecciones son el corazón de nuestra aplicación web. ¿Quieres saber cómo usarlas? Pulsa "siguiente" para ver la guía.

    1 de 9
  • Lista de colecciones

    Lista de colecciones

    Esta es una lista de tus colecciones. Puede cambiar sus nombres, y están ordenadas por uso. Haz clic en una de ellas para empezar a usarla.

    2 de 9
  • Crear una colección

    Crear una colección

    Haz clic en este botón para crear una colección.

    3 de 9
  • Cambiar nombre

    Cambiar nombre

    Haz clic aquí para cambiar el nombre de la colección

    4 de 9
  • Colección activa

    Colección activa

    Esta es tu colección activa. Una colección puede tener hasta 256 iconos si eres un usuario registrado o 50 si aún no estás registrado.

    5 de 9
  • Color

    Color

    Puedes cambiar el color a todos los iconos en tu colección.

    6 de 9
  • Modo de edición

    Modo de edición

    Entra en el modo de edición haciendo clic en el icono del lápiz para editar el nombre y el color de cada icono por separado.

    7 de 9
  • Eliminar

    Eliminar

    ¿Ya no quieres más esta colección? Puedes eliminarla y crear una nueva aquí.

    8 de 9
  • ¡Disfruta!

    Eso es todo. Si tienes alguna pregunta, puedes contactar con nuestro equipo de soporte aquí.


    Gracias por usar Flaticon. Esperamos que hayas disfrutado de nuestro servicio.

    9 de 9
-
¿Te gusta nuestro servicio?