En este tutorial aprenderás a crear tus propios GLYPHICONS, y mejorar las interfaces y usabilidad de tus sitios web, dejando de usar imágenes para los íconos.
Si has llevado el curso de Boostrap 3 , de seguro recordarás la clase del uso de los íconos fuente o glyphicons, sino inscríbete ya a este increíble curso, recuerda que se encuentra de forma gratuita en nuestra plataforma.
Los íconos fuente son la forma más eficiente de colocar iconos en las páginas web, principalmente por dos razones:
Los íconos fuente al ser tratados como cualquier otro carácter o letra puede cambiar el color y el tamaño sin perder resolución, como sí lo haría un icono en formato imagen.
Nos ahorra de estar cargando imágenes en el servidor, pudiendo así disminuir el tiempo de carga de la página web.
Si bien en cierto este tipo de elementos nos limita a que los iconos sean monocromáticos y la limitación de solo usar los iconos que ofrecen webs como icomoon.
Pero, hoy la limitante de diseños no será más un problema ya que te enseñare como crear tus propios iconos fuente, y puedas así hacer tus páginas muy personalizadas.
Primero vamos a diseñarlo, abrimos Illustrator e importamos el icono que deseemos crear.
Creamos la silueta del icono.
Para trabajar las herramientas de este genial programa como es illustrator, inscribete a nuestro Curso de Illustrator y domina esta fabulosa herramienta.
Ahora crearemos un nuevo documento de tamaño 64px x 64px
Pegamos aquí la silueta creada y damos un color de fondo.
Ahora vamos a guardar el archivo en formato svg.
En el siguiente panel asegurate que las configuraciones sean las siguientes.
Guardamos el archivo y a continuación vamos a la web icomoon.io, aqui encontraras la opcion de importar iconos.
Seleccionamos el archivo creado en Illustrator y lo importamos.
Buscamos en la parte inferior la sección Font, para generar la descarga de nuestro icono fuente.
Configura el icono colocando un nombre distintivo y descargalo.
El modo de uso es muy simple, solo sigue los pasos que Irving nos enseña en la clases iconos fuente o glyphicons, en la descarga también tenemos un demo donde podemos probar la funcionalidad de la fuente, como cambiar el color.
Y aumentar el tamaño sin perder nada de resolución.
Recuerda que si deseas aprender esta y muchas otras funcionalidades de Bootstrap en DevCode puedes inscribirte de manera gratuita al Curso de Boostrap 3 Además tenemos muchos otros cursos que complementarán tu aprendizaje. No olvides compartir el tutorial con tus amigos y dejarnos tus dudas u opiniones en la caja de comentarios.