Planificación de interfaces web

1.3 LOS ICONOS

¿Qué son los iconos?

Los iconos son pequeñas imágenes encargadas de transmitir el contenido con solo mirarlos.

Ejemplo

Al ver este icono, rápidamente lo asociamos con borrar/eliminar algo.

Fuentes de iconos

Actualmente existen librerías con iconos listos para usar en nuestra web. A continuación te voy a mostrar las librerías más usadas y a cómo insertarlas en tu web.

Flaticon

Para añadir Iconos de FlatIcons a tu proyecto debemos de:

  1. Entrar en FlatIcon y nos creamos una cuenta.
  2. En la parte superior derecha nos aparecerá una sección que dice “Colecciones”, entramos dentro.
  3. Nos descargamos la colección y la colocamos en la carpeta css de nuestro proyecto.
  4. Cargamos con <link rel="stylesheet" type="text/css" href=“css/flaticon.css"> nuestra biblioteca de iconos.
  5. Con las clases (escribiendo el nombre del icono) conseguimos que se muestre <i class="flaticon-airplane49"></i> o <span class="flaticon-airplane49"></span>

GLYPHICONS

Para añadir Iconos de Glyphicons a tu proyecto debemos de:

  1. Entrar en Glyphicons.
  2. Nos descargamos la librería.
  3. Colocamos la librería en la carpeta del proyecto.
  4. Con la clase llamamos el objeto que queramos: <span class="glyphicon glyphicon-search" aria-hidden="true">/<span>

FONT AWESOME

Para añadir Iconos de Font Awesome a tu proyecto debemos de:

  1. Entrar en Font Awesome.
  2. Nos descargamos la librería.
  3. Colocamos la librería en la carpeta del proyecto.
  4. Con la clase llamamos el icono que queramos: <i class="fab fa-500px"></i>

IONICONS

Para añadir Iconos de Ionicons a tu proyecto debemos de:

  1. Entrar en Ionicons.
  2. Nos descargamos la librería.
  3. Colocamos la librería en la carpeta del proyecto.
  4. Con la clase llamamos el objeto que queramos: <ion-icon name="add"></ion-icon>

OCTICONS

Para añadir Iconos de Octicons a tu proyecto debemos de:

  1. Entrar en Octicons.
  2. En nuestro código HTML introducimos la siguiente línea para cargar la librería <script src="https://code.iconify.design/2/2.0.3/iconify.min.js"></script>
  3. Colocamos el siguiente código para insertar el icono <span class="iconify" data-icon="octicon:alert-16"></span>

MATERIAL ICONS

Para añadir Iconos de Material Icons a tu proyecto debemos de:

  1. Entrar en Material Icons.
  2. Añadimos la siguiente librería a nuestro proyecto. import { mdiAccountCheck } from '@mdi/js';
  3. Añadimos a nuestro proyecto el código SVG que nos ha generado.