Truco Para Tus Iconos Awesome En Formato SVG + Tutorial

Comenzando una nueva semana espero que se encuentren muy bien, y para la entrega de esta semana será para un truco muy sencillo y práctico para sus iconos Font Awesome en formato svg, junto a un tutorial también muy sencillo y práctico para guardar estos archivos en formato png con fondo totalmente transparente.

Antes de comenzar con la entrega y para quienes no conozcan estos iconos Font Awesome los ofrece la misma página Font Awesome y el enlace lo encontraran aquí.

Con estos iconos awesome encontraran dos versiones, la versión actual 5.3 y la cual el enlace lo encontraran aquí arriba y la versión 4.7.0 el enlace lo encontraran aquí. En estas dos versiones esta plataforma ofrece como alternativa, descargar estos iconos con su opción para escritorio, las cuales las encontraran en la imagen de aquí arriba, marcadas en las dos versiones con los recuadros rojos.

En la versión 5.3 encontraran la versión para web la cual también está marcada en la imagen de aquí arriba con esta versión y es la primera opción de izquierda a derecha, la siguiente es la versión para escritorio y la tercera opción es la misma opción para escritorio. Una previa de estas opciones la encontraran en la siguiente captura de pantalla:

Solo es descargar y descomprimir estos archivos con la versión la cual ustedes prefieran y para esta entrega la versión la cual exploraremos el truco, junto al tutorial sencillo y práctico es la actual versión 5.3. Para quienes desean explorar un poco más la versión de escritorio con la versión 4.7.0 con la alternativa de instalar los iconos awesome pero en fuente,aquí agregó un enlace a la entrega del blog Demorros con el 2.0, donde explican con detalle de como utilizar esta versión 4.7.0 en photoshop junto a un vídeo muy práctico y sencillo para esta versión.

Con la versión 5.3 se repiten los mismos pasos, los cuales están en el enlace de aquí arriba con la versión 4.7.0 y la carpeta de las fuentes en la opción de escritorio la encontraran en la carpeta con el nombre "OTFS" con las tres opciones en fuentes, las cuales solo tienen que instalar en su computadora, con un doble clic en cada una de ellas, aparecerá esta opción de instalar las fuentes en su computadora en otra ventana.

El proceso es el mismo, solo lo que cambia es la versión de los iconos awesome y la página Cheatsheet para encontrar de acuerdo a la versión que hayan descargado para copiar y pegar sus iconos awesome. Así como se muestra en el gif de aquí abajo con la versión 5.3:

Continuando con la versión de escritorio es donde encontraremos estos iconos awesome en formato SVG de hecho, en la versión para web también vienen, pero con la versión para escritorio está muy bien.

Cuando hayan descargado esta versión 5.3 ustedes descomprimen su archivo el resultado será su carpeta de iconos awesome, con un doble clic sobre la misma carpeta se abrirá el contenido de su archivo. Donde encontraran las tres carpetas, entre las cuales están la carpeta SVGS, es donde encontraran todos los iconos awesome en formato SVG. Como se muestra en el gif de aquí abajo con el truco de explorar sus iconos awesome con un doble clic sobre el archivo y se abrirá una ventana en donde se muestra el contenido del mismo archivo, así de esta forma podrán explorar y conocer sus iconos con este sencillo truco o proceso.

Para quienes prefieran seguir los pasos del gif de aquí arriba, en mi caso no fue necesario descomprimir el archivo porque tengo instalado el programa Bandizip. Para quienes no conozcan este programa en esteenlace encontraran como descargarlo junto a otra herramienta en línea para descomprimir sus archivos, sin necesidad de instalar ningún programa y siguen los pasos que se describieron aquí arriba, después de descomprimir estos archivos.

Después del doble clic sobre el archivo, ustedes podrán explorar el contenido de la carpeta y abrir las carpetas en mi caso en la carpeta "SVGS" para explorar cada uno de los iconos awesome, con el truco del doble clic sobre el archivo y explorar un poco el contenido del mismo archivo.

Después de explorar un poco sus iconos, el siguiente paso es guardar el icono en formato PNG y para esto aplican sobre el icono el clic derecho del ratón, aparecerán varias opciones entre las que se encuentra "Guardar imagen como". Con esta opción es donde seleccionaran el formato PNG, con fondo transparente para guardar este archivo en su computadora, así como se muestra en el siguiente gif de aquí abajo:

El resultado de explorar un poco sus iconos en formato SVG y guardar en formato PNG, será como la captura de aquí abajo, con el fondo totalmente transparente y listo para utilizarlo en cualquier diseño y con cualquier programa.

Si este proceso de explorar los iconos awesome con el navegador Internet explorer es diferente al mio, apliquen el proceso del clic derecho del ratón para explorar las alternativas que ofrece el navegador con el cual abrieron el archivo, para guardar sus archivos y si es el formato JPG solo tienen que exploraresta entrega donde encontraran dos excelentes alternativas con herramientas en línea para quitar el fondo blanco de una imagen o podrán explorar la opción en fuentes con los iconos awesome las cuales las encontraran aquí arriba.

Con estas excelentes alternativas ustedes podrán explorar y conocer recursos en línea como los iconos awesome con sus diferentes versiones, para sus diseños y vienen con su licencia de uso, recordando que en la versión 5.3 encontraran iconos pro o la versión de pago, ustedes eligen su mejor versión.

Como siempre espero que el resultado de conocer y explorar un poco estas opciones sea positivo y si el resultado es positivo no se olviden en recomendar en sus redes sociales favoritas, lo cual siempre agradezco de corazón. No me enrollo más, disfruten del comienzo de semana y de mes y nos vemos de este lado del blog con la segunda entrega de este mes de octubre. ¡Hasta la próxima!