Añadiendo fuentes de íconos a WordPress con una mejor fuente impresionante

La gente se siente naturalmente atraída por los aspectos visuales de un sitio web de WordPress, tanto como por el contenido escrito que comparten. De hecho, de acuerdo con el comercializador de internet Jeff Bullas, los artículos con imágenes obtienen 94% más vistas que los artículos sin imágenes.

Eso es un gran aumento en las visitas a las páginas, si me preguntas.

¿Y por hacer qué exactamente?

Simplemente añadiendo unas pocas imágenes de alta calidad y apropiadas para el artículo en todo su contenido.

¿Pero qué hay de las imágenes de su sitio web que van un paso más allá de las capturas de pantalla y la fotografía de archivo? ¿Qué hay de las imágenes que no sólo atraen la atención sino que también cumplen una función útil?

Sí, estoy hablando de los iconos. Ya sabes, esas pequeñas imágenes que se encuentran dispersas por los sitios web con el fin de compartir socialmente, contactar con los propietarios de negocios y descargar información, por nombrar algunos.

A medida que se captaba la idea de que los visitantes del sitio no sólo se sentían atraídos por los iconos de las imágenes de los sitios web, sino que también se inclinaban a interactuar con ellos, la gente de todo el mundo empezó a añadirlos a sus sitios web.

Sin embargo, a medida que la tecnología ha avanzado, como siempre lo hace, los iconos de imagen tradicionales han empezado a flaquear como solución de imagen para los sitios web. Esto se debe a que añaden demasiado peso a los archivos, requieren demasiadas solicitudes de http, no se escalan bien y, lo peor de todo, no son aptos para los móviles.

Pero hay una solución: fuentes de iconos.

Hoy voy a discutir qué son las fuentes de iconos y las ventajas de usarlas en su sitio web de WordPress. Además, les mostraré cómo agregar fuentes de íconos a su sitio web de WordPress usando el popular plugin Better Font Awesome. Por último, como un bono adicional, voy a ofrecerte algunas alternativas a Better Font Awesome para que tengas muchas opciones para añadir iconos de alta resolución, escalables y aptos para móviles a tu sitio web.

Así que, empecemos.

¿Qué son las fuentes de los iconos y por qué se usan?

Las fuentes de iconos son exactamente como suenan, fuentes que se componen enteramente de iconos. De hecho, las fuentes de iconos pueden describirse como una fuente que sólo muestra caracteres o símbolos, dejando de lado las letras y los números con los que vienen las fuentes de texto tradicionales.

Las fuentes de iconos son imágenes que a menudo fomentan la acción – sólo que no son realmente imágenes.

Las fuentes de los iconos se utilizan para mostrar símbolos de uso común en su sitio web. Por ejemplo, los botones de medios sociales, su carrito de compras, los botones de descarga y los botones de navegación son todos ejemplos de iconos que se muestran como pequeñas imágenes interactivas en su sitio web.

Leer
Lo que no se debe esperar en BuddyPress 1.9

Las fuentes de iconos pueden ser usadas para representar muchas ideas diferentes.

¿Por qué usar fuentes de iconos?

Los iconos de imágenes han funcionado bien en el pasado para muchos propietarios de sitios web. Sin embargo, a medida que las reglas de navegación, usabilidad y diseño han evolucionado en el mundo de Internet, las fuentes de los iconos se han convertido en la mejor solución para mostrar imágenes interactivas en un sitio web.

A continuación se presentan algunas razones convincentes de por qué las fuentes de iconos son la mejor opción:

  • Escala fácilmente y no pierde calidad
  • Personalizable en términos de color y sombra
  • 100% de respuesta
  • Funciona como los sprites de imágenes CSS pero puede estilizar como un texto
  • Fácil de usar
  • Soporte transparente para el golpe
  • Amigable con el navegador
  • Personalizar la opacidad, la rotación y más
  • Tamaños de archivo más pequeños
  • No sacrifique la velocidad o el rendimiento de su sitio web

Como puedes ver, hay varias razones por las que podrías querer usar una fuente de icono en tu sitio web en lugar de un icono de imagen.

Instalar iconos de fuentes en su sitio usando Better Font Awesome

Better Font Awesome es un plugin gratuito para WordPress que te permite integrar automáticamente la última versión de Font Awesome en tu proyecto de WordPress. Además, viene con el CSS que lo acompaña, con códigos cortos y un generador de códigos cortos de iconos TinyMCE.

Este plugin cuenta con una variedad de características útiles para los propietarios de sitios web:

  • Actualizaciones de rutina de la última versión
  • Capacidad de cambiar entre las versiones de Font Awesome sin modificar los atajos
  • Soporte para otros plugins de fuentes populares incluyendo sus atajos
  • Tira de la super-rápida jsDelivr CDN

Paso 1: Instalación y activación de Better Font Awesome

Para empezar, instala y activa el plugin Better Font Awesome a través de tu panel de control de WordPress como lo harías con cualquier otro plugin.

Primero, navega a Plugins ; Agrega Nuevo y busca “Better Font Awesome”.

Busca una fuente mejor para instalar en tu sitio web.

A continuación, seleccione Instalar ahora y luego haga clic en Activar .

Una vez activado, el plugin añade un enlace “Better Font Awesome” bajo el menú Settings en tu panel de control de WordPress.

Noten el nuevo elemento del menú llamado Mejor Fuente Impresionante.

Paso 2: Configurar los ajustes del plugin

Para configurar el plugin Better Font Awesome, comienza haciendo clic en el menú Better Font Awesome en Settings . Una vez que lo hagas, verás una pantalla similar a esta:

Configura los ajustes del plugin.

Aquí puedes hacer lo siguiente:

  • Versión: Selecciona qué versión de Better Font Awesome quieres usar.
  • Usar CSS minificado: Marca esta casilla si quieres usar la versión minificada del CSS.
  • Eliminar la fuente existente de Font Awesome: Selecciona esta casilla para intentar eliminar el CSS Font Awesome y los shortcodes añadidos por otros plugins y temas.
  • Ocultar las notificaciones administrativas: Ocultar cualquier aviso administrativo predeterminado que muestre cuando se producen errores en la API y en la CDN.

Además de la cantidad mínima de opciones de configuración de Better Font Awesome, hay una pequeña sección de Uso que describe cómo puede agregar iconos a su sitio web.

Aprende a añadir fuentes de iconos directamente a tu página web.

Paso 3: Añadir iconos a su página web

Hay tres maneras fáciles de añadir iconos a su sitio web usando Better Font Awesome – a través de un código corto, HTML, o TinyMCE.

#1. Añadir iconos usando códigos cortos

Para añadir iconos a su sitio web mediante un atajo, primero vaya al sitio web Font Awesome para ver una lista completa de los iconos disponibles que se pueden utilizar.

Leer
Tutorial de WordPress para principiantes: Creación y administración de perfiles de usuario

Aquí puedes buscar cualquier icono que desees. Por ejemplo, si quieres un icono de “correo electrónico”, simplemente busca con esa palabra clave y selecciona el icono que deseas usar haciendo clic en él.

Busca el icono que desees en la web de Font Awesome.

Después de hacer clic en el icono que quieres añadir, verás una pantalla que muestra la imagen del icono, sus diversos tamaños y un pequeño bloque de código:

Observa el nombre del icono, varios tamaños y el código corto.

Simplemente copie el bloque de código y péguelo en cualquier lugar de su sitio web utilizando la pestaña Editor de texto . Así es como se verá esto en la parte trasera de tu sitio web:

Inserte su atajo en el Editor de Texto.

Al final, esto es lo que los visitantes del sitio verán cuando hagan clic en su sitio:

El front-end de su página web mostrará el icono.

#2. Añadir iconos usando HTML

Como se ha visto en la sección Uso , tienes la opción de usar HTML para insertar iconos en tu página web. Sin embargo, los desarrolladores del plugin advierten que el uso de HTML requiere prefijos específicos que son específicos de la versión.

Por eso te recomiendan que utilices los atajos en su lugar. Sin embargo, si quieres usar HTML, Font Awesome tiene información útil aquí.

#3. Añadir iconos usando TinyMCE

Esta es probablemente la forma más fácil de añadir iconos a su sitio web. En el modo de Editor Visual, simplemente haga clic en Insertar Icono . A partir de ahí, desplácese por las opciones de iconos disponibles o reduzca los resultados utilizando la función de filtro.

Utilice el generador de códigos cortos TinyMCE para insertar iconos directamente en su mensaje o página.

Una vez que encuentres el icono que quieres, simplemente haz clic en él. El generador de códigos cortos introduce automáticamente la información requerida en tu mensaje o página.

Si desea aprender a personalizar los iconos de su sitio, consulte los ejemplos de Font Awesome.

Opciones de iconos de fuentes adicionales

El uso de Better Font Awesome no es la única forma de añadir fuentes de iconos a su sitio web. Y, como prometí, voy a compartir con ustedes algunas de las mejores alternativas que existen.

Para empezar, veamos algunos de los mejores lugares para encontrar conjuntos de fuentes de iconos gratuitos y de primera calidad. Con estos recursos, puedes generar iconos de fuentes personalizadas, aprovechar imágenes de iconos exclusivos y únicos, e incluso acceder a herramientas que te ayudarán a importar iconos directamente a tu sitio web.

  • Fontello . Convierte imágenes vectoriales personalizadas gratuitas en fuentes web para usar en tu sitio web que son claras, escalables y compatibles con todos los navegadores. Además, personalízalas usando CSS para cambiar los colores, tamaños, sombras y más.
  • Pictogramas modernos . Utiliza cualquier número de sus más de 260 dibujos de objetos e iconos para múltiples interfaces como tu sitio web de WordPress. Este servicio premium permite compras individuales de SVG.
  • Icomoon . Este servicio online te permite crear fuentes de iconos nítidos y perfectos para los píxeles. Además, puedes usar el exclusivo creador de fuentes de iconos para cambiar los iconos de las imágenes en fuentes de iconos. Con 5000 iconos gratuitos y de código abierto, y más de 4000 iconos de primera calidad colocados en paquetes de iconos especiales, no hay escasez de imágenes para elegir.

A continuación, veamos algunos plugins de fuentes adicionales que se pueden usar en tu sitio web de WordPress.

  • WP SVG Iconos

    WP SVG Icons es un plugin de iconos de WordPress que viene con más de 490 iconos incluidos. Además, puedes crear y subir hasta 10 de tus propios iconos personalizados con el exclusivo Icomoon Icon Pack Font Importer.

    Con este plugin, puedes insertar fácilmente iconos en tus mensajes, páginas y barras laterales sin escribir una sola línea de código utilizando la más reciente función de código abreviado.

    ¿Interesado en los iconos del WP SVG?

    Detalles

  • Genericon’d

    Genericon’d incluye 3 conjuntos de iconos – Genericons Neue, Social Logos, y Genericons – que pueden ser colocados en los temas o funciones de su sitio web usando HTML básico o sus posts y widgets usando códigos cortos.

    Además, puedes ajustar el tamaño de cada icono a través de CSS, de los atajos o del atributo de tamaño. Perfecto para añadir iconos de aspecto genérico a tu blog o sitio web, logotipos sociales para animar a que te gusten o a que los sigas, o iconos que se muestren como fuentes, Genericon’d es una gran solución de iconos.

    ¿Interesado en Genericon’d?

    Detalles

  • Lista de iconos

    Icon List es un plugin poderoso, pero simple, que proporciona a los propietarios de sitios web un widget para ser utilizado en las listas estándar de su sitio web. Muestra la información de contacto de su empresa y las plataformas de medios sociales, con los iconos apropiados, para que los visitantes del sitio puedan estar informados sobre su negocio.

    ¿Interesado en la Lista de Iconos?

    Detalles

  • Iconos inteligentes para WordPress

    Smart Icons for WordPress te trae 519 iconos Font Awesome para ser usados en posts, páginas y tipos de posts personalizados con un simple clic de un botón. Viene con una interfaz fácil de usar, códigos cortos personalizados o predeterminados, e incluso la opción de cargar fuentes desde CDN.

    Además, Smart Icons es fácil de mostrar en 4K, funciona con cualquier editor API, e incluso soporta efectos CSS como cambios de radio y sombras para una mayor personalización.

    ¿Interesado en los iconos inteligentes para WordPress?

    Detalles

Pensamientos finales

El uso de fuentes de iconos en tu sitio web de WordPress no sólo añade bellas imágenes sin sacrificar la velocidad o el rendimiento, sino que añade un nivel de funcionalidad a tu sitio que fomenta una mayor interacción con el usuario.

Las fuentes de iconos son fáciles de escalar, personalizar y, lo mejor de todo, proporcionan a los visitantes de su sitio, independientemente de desde dónde accedan a su sitio web, la mejor experiencia de visualización.

El uso de una solución de plugin, como Better Font Awesome, es una de las formas más fáciles de añadir fuentes de iconos a su sitio web. Esto se debe a que con un plugin de fuentes se requiere poca o ninguna configuración, y por lo general hace la mayor parte del trabajo por ti, por lo que no tienes que lidiar con un extenso código HTML.

Si busca aumentar las visitas a su sitio web, impulsar la interacción de contenido y proporcionar a los visitantes un sitio web atractivo que comunique claramente lo que usted quiere que hagan, considere la posibilidad de añadir fuentes de iconos en su sitio web utilizando Better Font Awesome o cualquiera de las otras opciones que he compartido con usted.

1,6 millones de superhéroes de WordPress leen y confían en nuestro blog. Únete a ellos y recibe entradas diarias en tu bandeja de entrada – ¡gratis!

Etiquetas:

  • fuentes

Deja una respuesta