Font Awesome Review – ¿Qué es? ¿Es buena? ¿Y cómo usarlo con WordPress?

Si buscas una reseña de Font Awesome en una sola frase, aquí está: “Es bonito… y funcional… y algo brillante en su pura simplicidad. Esto básicamente resume mi primera experiencia con este asombroso juego de herramientas.

Esa experiencia fue hace un tiempo, sin embargo. Durante un tiempo, estuve enganchado. Lo usé para un montón de cosas e hizo que mi contenido estallara, pero, como suele suceder, la emoción inicial comenzó a desaparecer.

Pero dejemos eso por ahora, y en su lugar comencemos esta reseña de Font Awesome – en la que cubriremos qué es Font Awesome, si es buena o no, y, quizás lo más importante, cómo usarla con WordPress – desde el principio.

¿Qué es una fuente increíble?

En resumen, Font Awesome es una fuente de iconos.

Piensa en un tipo de letra normal, pero en lugar de letras, tienes iconos.

Esta es la parte verdaderamente brillante y cambiante de todo el asunto.

Los iconos fueron una vez un gran dolor al construir un sitio web. Rara vez podías encontrar los correctos, especialmente si necesitabas más de un par de ellos para tener el mismo estilo. (¿Diez iconos con diseños consistentes? ¡Olvídalo!) Y aunque los encontraras de alguna manera, la calidad no estaba a la par si querías usar los iconos en diferentes tamaños. En resumen, para conseguir los iconos correctos, necesitabas diseñarlos tú mismo.

Con el tiempo, las cosas mejoraron un poco, con varios paquetes de iconos que brotaron aquí y allá (mercados, sitios pequeños). Pero eso todavía no era exactamente perfecto. Incluso con esos sitios, todavía tenías que salir a buscar iconos por tu cuenta, en lugar de tener algún tipo de biblioteca de fácil acceso.

Aquí es donde entra en juego Font Awesome.

Una vez que conectes tu sitio a Font Awesome, puedes acceder a cada icono a través de una simple etiqueta HTML. Por ejemplo, para obtener este genial icono:

…todo lo que necesito hacer es usar un pedazo de código como este:

Font Awesome lo tomará y lo convertirá en un icono en vivo. Y también puedes personalizar estos iconos. Puedes cambiar el tamaño, los colores y las sombras – básicamente, puedes hacer cualquier cosa que se pueda lograr a través de CSS. Hasta donde sabes, estos iconos se comportan como cualquier otra fuente.

Font Awesome también te ofrece algunas cosas únicas, como la posibilidad de animar tus iconos. Así que, en lugar de una versión estática como esta:

…puedes conseguir algo como esto:

Y esto se puede hacer con cualquier icono de Font Awesome.

Por lo tanto, la pregunta es:

¿Es bueno?

En mi opinión, las principales fortalezas de Font Awesome son:

  • la biblioteca es muy grande, actualmente cuenta con más de 630 iconos
  • cada icono es de fácil acceso una vez que se integra su sitio con la biblioteca principal
  • son todos vectores, así que puedes hacer lo que quieras con la forma en que se muestran los iconos
  • es muy fácil añadir un icono en cualquier lugar.

Francamente, Font Awesome hace lo que hace muy bien, excepcionalmente bien.

Para colmo, no hay mucha curva de aprendizaje. Una vez que tengas Font Awesome instalada en tu sitio, todo lo que tienes que hacer es:

  • navegar por los iconos disponibles para obtener una buena visión general de lo que hay
  • Mira los ejemplos (trátalos como una guía rápida de cómo hacerlo).

La calidad visual de los propios iconos es muy alta también. Un problema común con muchos paquetes de iconos disponibles en la web es que tienden a verse bien sólo en tamaños específicos, debido a cosas como demasiado o demasiado poco detalle, formas poco claras, etc. Pero los iconos de Font Awesome no son así en absoluto. Parece que han sido diseñados para funcionar en cualquier lugar y para verse bien sin importar el tamaño que quieras usar. Además, recordemos que todos son vectores, así que el escalado tampoco es un problema técnico.

Leer
25 Ejemplos principales de sitios de celebridades increíblemente famosos impulsados por WordPress (2020)

Lo más importante es que los iconos de Font Awesome logran tres objetivos principales en cuanto al diseño:

  • Los diseños son consistentes de un icono a otro, así que todo encaja.
  • Los diseños son muy mínimos, lo que ayuda a que los iconos se adapten a varios propósitos (se ven especialmente bien para los elementos de navegación).
  • La cantidad se convierte en una cualidad, no importa cuántos iconos necesites, Font Awesome será capaz de proporcionar.

Bien, pasemos a la parte del “cómo” de la revisión:

¿Cómo usar Font Awesome con WordPress?

Dejando de lado los elogios, veamos cómo podemos usar Font Awesome con WordPress.

Y… hay un problema.

O, más bien, hay un problema si nunca has estado en la sección ‘ apariencia/editor ‘ de la wp-admin .

Esto es lo que quiero decir:

Para instalar Font Awesome en tu sitio de WordPress, tienes dos opciones:

  • Instalación manual
  • A través de plugins

Y aquí está el pateador: Font Awesome es uno de los pocos casos en los que hacer las cosas de forma manual es mejor que usar plugins.

Vamos a desviarnos un poco de nuestra revisión principal y te mostraremos:

Si estás buscando un plugin de Font Awesome, entonces probablemente te tropezarás con estos dos:

  • Better Font Awesome – muestra los iconos de Font Awesome en cualquier parte del contenido de tu blog.
  • Font Awesome 4 Menús – mostrar los iconos de Font Awesome en los menús.

Aunque ambos técnicamente hacen su trabajo, hay algunos problemas.

Empezando con Better Font Awesome, como te imaginas, conseguir la funcionalidad es sencillo: sólo tienes que instalar y activar el plugin (no necesitas ir a Font Awesome en sí ni nada). Todo lo que necesitas es el plugin.

Después de la instalación, se obtiene esta caja en la pantalla de edición de postproducción:

Al hacer clic en él, podrás elegir un icono de Font Awesome y tenerlo incluido como un atajo. Genial.

Esto funciona la mayoría de las veces, a juzgar por las críticas. Pero no siempre. Por ejemplo, para mí, estropeó mi CSS totalmente – como en, todo mi estilo de tema dejó de funcionar (y es el tema predeterminado Veinticinco del que estamos hablando aquí, así que nada elegante).

Ahora bien, no digo que el plugin te cause estos problemas también, pero es probable que te encuentres con varios problemas como este con el tiempo, especialmente cuando salgan nuevas versiones de Font Awesome o WordPress. Puede que esto no merezca la pena. Imagina que un día actualizas tu sitio y tu CSS desaparece. ¿Cuánto tiempo te llevará retroceder el problema a un plugin específico? ¿Cuántos visitantes verán el sitio desmontado mientras tanto?

Ahora sobre el otro plugin, Font Awesome 4 Menus. Esto funciona y parece funcionar razonablemente bien. Todo lo que haces es instalarlo, y luego puedes añadir clases personalizadas a tus elementos de menú, así:

Las clases son las mismas que aparecen en la documentación oficial de Font Awesome. El plugin se encarga de que el color del icono coincida con el del menú, el espaciado, todo.

Es muy bueno si sólo necesitas Font Awesome para tus menús, pero, desafortunadamente, no funciona si quieres mostrar iconos en el contenido. Exhibición (a):

En mi honesta opinión, será mejor que integres Font Awesome con tu sitio de WordPress a mano, sin ningún tipo de plugins. Hay menos problemas a largo plazo, y la integración parece ser mucho más estable.

Cómo integrar la fuente Awesome con WordPress

Esencialmente, como se detalla aquí, puedes hacer esto de dos maneras diferentes:

  • Consigue el código de incrustación directa de Font Awesome.
  • Descargue el paquete y luego súbalo a su servidor por FTP.
Leer
Más de 25 ejemplos en vivo de Total - El tema más vendido de WordPress de WPExplorer - en acción

Inicialmente, estuve tentado de descargarlo y alojarlo yo mismo, pero luego me di cuenta de que eso sólo significaría un trabajo adicional. Por supuesto, conseguir el paquete en sí y subirlo por FTP no es mucho trabajo (#lazy), pero también hay que ocuparse de mantenerlo actualizado.

En cambio, cuando se trata de una incrustación, todo se hace por ti. Y dejando a un lado todo el trabajo de mantenimiento, también te sirve el paquete de un CDN, que es mejor para el rendimiento, también.

La parte de cómo hacerlo es muy sencilla, sólo tienes que introducir tu correo electrónico y recibir el código de incrustación:

Font Awesome te enviará un email de bienvenida con tu código de incrustación, además de una opción para registrar ese código, lo que te da algunos beneficios adicionales. (Nota: Esto no es obligatorio, no necesitas registrarte para obtener la funcionalidad principal de Font Awesome).

Por lo tanto, una vez que tengas tu código, sólo tienes que ir a la sección ‘ apariencia/editor ‘ de tu wp-admin ( siempre haz una copia de seguridad de todo tu sitio y de cualquier archivo individual antes de hacer cualquier cambio ), y añade ese código en la sección de tu tema. Esto suele estar en el archivo header.php , así:

Nota: Ten en cuenta que si alguna vez actualizas tu tema, esta integración de Font Awesome desaparecerá, y tendrás que rehacerla. Sin embargo, cuando se utiliza un tema infantil (como se mencionó en un artículo anterior), no hay tal problema.

Justo después de que hayas incluido el código de incrustación, has habilitado Font Awesome en tu sitio. Trabajo hecho – ¡ahora puedes empezar a usar todos los iconos como quieras!

Opcional: Registrar su cuenta de Font Awesome

Como mencioné, al obtener el código de incrustación, también se le ofrece la oportunidad de registrar su cuenta con Font Awesome. Esto no es obligatorio, pero en realidad te recomiendo que lo hagas. La cuenta es gratuita y obtienes un par de cosas a cambio:

  • La capacidad de configurar su incrustación.

  • Algunas estadísticas agradables sobre los iconos que estás usando.

¿Vale la pena ir a Premium?

Algo que no sabía al principio era que Font Awesome también ofrecía una versión premium de su producto llamado Fort Awesome.

Las cosas clave que hay que saber sobre ello:

  • Tiene miles de iconos más. Con Fort Awesome, obtienes un montón de iconos adicionales divididos en conjuntos individuales (temáticos, diferentes estilos de diseño, etc.). Esto te permite satisfacer todas las necesidades de iconos de tu sitio a través de una herramienta, especialmente si necesitas un conjunto muy específico de cosas para representar a través de los iconos.
  • Puedes subir y usar tus propios iconos. Esto es genial porque te permite subir cosas como tu logotipo, iconos de productos o cualquier otra cosa que tenga sentido, y añadirlos a tu biblioteca de Font Awesome. El punto fuerte es que luego podrás usar esos iconos como cualquier otro icono de Font Awesome: todos tus iconos funcionan de manera consistente sin importar la fuente.
  • Tienes configuraciones personalizadas. Puedes establecer los dominios en los que se pueden utilizar tus kits de iconos, etc.
  • Puede incluir tipos de letra en sus kits. Puedes elegir entre algunas de las mejores fuentes gratuitas o subir las tuyas propias. Esto mantiene tus recursos tipográficos para el sitio en un solo lugar.
  • Puedes cargar todo eso a través de un CDN optimizado proporcionado por MaxCDN.

Al final, el núcleo de la oferta premium de Font Awesome es su facilidad de uso, las mejoras de rendimiento y la fácil gestión general de todos sus iconos y tipos de letra.

Los planes empiezan en 49 dólares al año (hay una prueba gratuita). Esto es lo que hay dentro:

Dicho esto, esta oferta premium es probablemente algo de lo que sólo se beneficiarán los sitios web más grandes, tiendas de comercio electrónico o sitios web temáticos. Al final del día, probablemente sólo necesitarás un puñado de iconos en tu sitio, y no los actualizarás muy frecuentemente, al menos si hablamos de blogs estándar de WordPress.

Leer
El marco de diseño de inicio de Designmodo vs. WordPress!

Por otro lado, las tiendas de comercio electrónico podrían crear iconos personalizados para productos individuales, o utilizar varios kits de iconos para hacer sus páginas más atractivas para el comprador. Pero sigue siendo todo sobre el volumen. Los catálogos de productos pequeños pueden hacerlo muy bien con iconos creados para cada producto manualmente, sin Font Awesome, por lo que todavía no se beneficiarán mucho de los paquetes premium.

Además, vale la pena señalar que la prima de Font Awesome no es un paquete “todo incluido”. Hay kits de iconos adicionales pagados (hasta 50 dólares cada uno), así que puede que te encuentres todavía buscando tu cartera incluso después de recibir la oferta premium.

Todo se reduce a que Fort Awesome (Font Awesome premium) no es necesariamente la mejor opción para la mayoría de los blogs de WordPress. Honestamente creo que ir con la oferta gratuita probablemente satisfaga tus necesidades el 99% del tiempo.

Cuando se trata de la prima, es probable que sea una buena inversión sólo si se dirige un sitio más grande que se basa en representaciones visuales de varios artículos, productos o menús, y añade nuevos elementos a la biblioteca con mucha frecuencia. En esos casos, también se beneficiará de la entrega de CDN de Font Awesome, lo que hará que su sitio sea más rápido en el proceso.

Conclusión

Realmente creo que Font Awesome es un gran producto. Nunca antes había sido tan fácil incorporar iconos geniales y bien diseñados en su sitio web. Estás literalmente a una sola etiqueta de (¿casi?) el icono perfecto para cualquier cosa que quieras visualizar.

Font Awesome en pocas palabras:

  • Font Awesome gratis: Sí, sí, sí.
  • Font Awesome premium (Fort Awesome): Meh.
  • Varios plugins de Font Awesome WordPress: Vale, pero no es impresionante.

Y por último, también hay que destacar que Font Awesome es un proyecto de código abierto que se puede utilizar para casi cualquier propósito, incluso comercial – no hay que pagar tasas adicionales ni pedir permiso a nadie.

¿Usaste/usaste Font Awesome en alguno de tus propios proyectos? ¿Pensamientos?

22 de enero de 2017 a las 3:05 pm

No creo que esa fuente impresionante sea correcta o buena para usar… Creo que aumenta el tamaño de la página en 25 pixeles…

Respuesta

  • Brin Wilsonsays:22 de enero de 2017 a las 5:24 pm

    Hola, ¿qué quieres decir con “aumentar el tamaño de la página en 25 píxeles”?

    Respuesta

    • Ashoksinh Gohilsays:22 de enero de 2017 a las 11:04 pm

      Lo siento ….errores al escribirlo 25kb….el tamaño del archivo es decir que tuvimos que añadir un enlace de estilos CSS en la cabecera a través de un enlace externo href…que tiene un tamaño de alrededor de 25kb …por lo que aumenta el tamaño de la página

      Respuesta

      • Brin Wilsonsays:23 de enero de 2017 a las 5:27 am

        – aumentará el tamaño de la página en una cantidad muy pequeña, sí.

    • Manik Bhardwajsays:12 de junio de 2019 a las 12:24 pm

      ¿Cuál es la diferencia entre “font awesome” y “dashicons” de WordPress?

      Respuesta

Deje una respuesta Cancelar respuesta

Su dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Comentario

Nombre*

Correo electrónico*

Sitio web

Notifícame los comentarios de seguimiento por correo electrónico.

Todos los comentarios se mantienen con moderación. Sólo publicaremos los comentarios que estén en el tema y que se adhieran a nuestra política de comentarios.

Nuestro formulario de comentarios también apoya el uso de Markdown.

Deja una respuesta