Seguimos con nuestro curso de Ionic, y esta vez vamos a ver como funcionan lo iconos en Ionic y de donde podemos obtenerlos.

El framework nos suministra más de 700 iconos, así como paquetes para emular las vistas de Android y de IOs, de hecho hay iconos para casi cualquier cosa que necesitemos. (Si con 700 iconos no tienes suficientes, puede que lo que tengas es un problema…)

¿Cómo utilizar los iconos en Ionic?

La base es tremendamente sencilla, de hecho si sigues este tutorial ya te habrás percatado de que hemos usado algunos para los ejemplos…

Tan solo tenemos que elegir el icono que necesitamos de la página de ionic y hacer click sobre el icono para que nos aparezca la clase específica de ese icono.

Una vez que hemos escogido nuestro icono es tan sencillo como introducir la clase icon en una etiqueta <i> para indicar a Ionic que se trata de un icono, y luego la clase específica del icono, de ese modo ya lo tendremos.

A continuación vemos un pequeño código donde se muestran algunos iconos:

<i class = "icon ion-happy-outline"></i>
<i class = "icon ion-star"></i>
<i class = "icon ion-compass"></i>
<i class = "icon ion-planet"></i>
<i class = "icon ion-ios-analytics"></i>
<i class = "icon ion-ios-eye"></i>

Y el resultado es el siguiente:

Cómo puedes ver es algo realmente sencillo de usar, pero aún queda más ya que los iconos se tratan como una fuente, es decir, podemos darles color, tamaño, efectos… como a cualquier parte del texto u otro elemento de CSS.

Por ejemplo, supongamos que queremos hacer los iconos más grandes y de color naranja. Solo tenemos que introducir un estilo CSS para conseguirlo:

.icon {
font-size: 50px;
color: orange;
}

Y de ese modo tendríamos el siguiente resultado:

Con esto ya sabemos como tratar los iconos en ionic y como poder usarlos en nuestras aplicaciones y las diferentes secciones de nuestra aplicación. Espero que os haya gustado y próximamente seguiremos aprendiendo a controlar este framework.