--- title: "Cómo usar iconos de colores en el menú de tu app" description: "Hola GoodBarber, Hoy te voy a enseñar cómo hacer que tu Beautiful App sea más Beautiful de lo normal al añadir iconos de colores. A simple vista puede parecer u" canonical_url: "https://es.goodbarber.com/blog/como-usar-iconos-de-colores-en-el-menu-de-tu-app-a326/" lang: es date: 2015-08-04 last_updated: 2016-06-02 --- # Cómo usar iconos de colores en el menú de tu app [Atrás](/blog/make-it-r8/) # Cómo usar iconos de colores en el menú de tu app Escrito por Arianna Testi el Martes 4 Agosto 2015 ## Hola GoodBarber, Hoy te voy a enseñar cómo hacer que tu Beautiful App sea más Beautiful de lo normal al añadir iconos de colores. A simple vista puede parecer un trabajo bastante difícil, puesto que tendrás que usar el menú de Gestión de Archivos y el escritorio Json, pero no te preocupes, bajo estas líneas encontrarás toda la información necesaria detallada sobre cómo hacerlo. ¡Empecemos con el vídeo! ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/8061773-12607385.jpg?v=1438617346.6669466) **Antes de empezar el proceso, debes tener en cuenta que sólo podrás aplicarlo en el modo de navegación Grid.** El primer paso consiste en activar el Add-On de Acceso a los APIs. El segundo, ir al menú **Ajustes > Gestor de Archivos** y **actualizarlo** usando la opción de arrastrar y soltar para importar tus **beautiful y coloreados iconos** en tu GoodBarber *back office.* Ahora tienes que coger el **URL del icono**, el cual tendrás que usar más tarde en el escritorio Json. Para ello, tienes que hacer clic en el icono pequeño de la imagen en la página: **Gestor de Archivos**. Una nueva pestaña aparecerá en el navegador mostrándote el icono que acabas de subir. Haciendo clic en el botón derecho, encima del icono, podrás escoger la opción **Copiar URL de la imagen**. ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/8061773-12626000.jpg?v=1438618600.1150057) **¡La parte fácil ya está hecha! ¿Te atreves a ponerte la careta de ninja?** Para **acceder al escritorio Json**, tienes que volver al menú de la app, entrar en la sección en la cual quieres personalizar el icono y entrar en el menú Json que se encuentra en la barra azul situada en la parte superior- central de tu escritorio. ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/8061773-12630307.jpg?v=1438676411.3719354) Cuando estés dentro del escritorio Json, tienes que desplazarte hasta el final de lista y poner el cursor justo debajo del último item de la lista. Ahora, deberías ver 2 comandos: "***Add Property***" y "***Add Object***". El primer paso es hacer click en "***Add Object***" y escribir "***iconPerso***" dentro de la pestaña pop up que aparecerá. La página se refrescará y ahora deberías poder ver el objeto que acabas de añadir dentro del campo gris, perfectamente alineado, con el item que estaba previamente en la lista. ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/8061773-12630450.jpg?v=1438676678.791766) **!Primer paso hecho....Sólo queda uno!** Ahora tienes que hacer click en el icono **+** cerca de la casilla gris con el objeto ***iconPerso***, mueve el cursor debajo de la casilla, y esta vez haz clic en ***Add Property***. Atención : Los comando *Add Property* y *Add Object* están relacionados con el *iconPerso,* los cuales se encuentran un poco desplazados a la izquierda. ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/8061773-12630485.jpg?v=1438677109.3823829) Cuando hagas clic en ***Add property**,* otra ventana aparecerá. Esta vez, deberás escribir "***imageUrl**"* y hacer clic en Ok. La *property* que acabas de añadir aparecerá en una ventana azul con una linea de texto, en este espacio simplemente tendrás que **pegar el URL del icono** que previamente has copiado. Ahora, simplemente necesitas hacer clic en el botón azul de **Guardar** del final de la página y... ¡A disfrutar de los resultados! P.D: Para añadir iconos personalizados en todas las secciones de tu app tendrás que repetir el proceso dentro del escritorio Json de cada una de éstas. *Si quieres estar a la última con todos nuestros consejos de diseño en apps, no te pierdas:* [![GoodBarber Youtube](https://no-cache.hubspot.com/cta/default/666614/1259092f-ed4c-4805-87af-a37f0ef50f11.png)](http://cta-redirect.hubspot.com/cta/redirect/666614/1259092f-ed4c-4805-87af-a37f0ef50f11) - [#Diseño](https://es.goodbarber.com/blog/tags/dise%C3%B1o) - [#Iconos](https://es.goodbarber.com/blog/tags/iconos)