access_time
hourglass_empty
person_outline

Cómo incluir iconos en WordPress: una guía para principiantes

Las fuentes de iconos de WordPress son una parte crucial de cada sitio web construido en este CMS. Se usan en gran medida para mantener un diseño de sitio web receptivo.

¿Notaste todos los íconos que hay en nuestro sitio web? Uno de ellos es el icono del carrito en la barra de navegación.

Bueno, si deseas agregar íconos como este a tu propio sitio web, siéntate y relájate, porque con este post aprenderás a hacerlo de forma sencilla.

¿Por qué usar íconos?

Las fuentes de iconos son un tipo de letras que contienen símbolos y pictogramas, en lugar de letras y símbolos regulares. Se pueden usar para mostrar iconos muy usados: imágenes pequeñas. Veamos esto con un poco más de detalle.

Algunos ejemplos de fuentes de iconos que puedes encontrar en casi todos los sitios web o blogs son los botones de redes sociales. Cuando estés a punto de compartir algo de un sitio web en tu cuenta de Facebook, haces clic en la fuente del icono de Facebook.

Fuentes de iconos de redes sociales en la publicación del blog de Hostiger

Antes de que existieran las fuentes de iconos, todos los iconos web y sprites eran imágenes. Debido a que las imágenes no son escalables y no se adaptan automáticamente a los dispositivos, pueden retrasar el tiempo de carga de la página y hacerla inaccesible para una parte del público. Entonces, las fuentes de íconos fueron la alternativa que funciona en cualquier pantalla y pesa mucho menos.

Las fuentes de iconos son imágenes vectoriales. Por lo tanto, son infinitamente escalables.

Son una gran característica para un diseño receptivo porque puedes manipular fácilmente las fuentes de iconos según tus necesidades. Hay toneladas de opciones de personalización: cambiar el tamaño y el color de los iconos, rotarlos, agregar efectos y mucho más. Todo eso y más se puede hacer simplemente a través de CSS, sin pérdida de calidad visual.

Son simples y relativamente fáciles de implementar. Además, las fuentes de iconos también te permiten almacenar muchos símbolos dentro de un solo archivo. Esto puede reducir la cantidad de solicitudes HTTP.

Aunque hay otras opciones para agregar íconos, las fuentes de íconos todavía se usan ampliamente porque puedes encontrar fácilmente fuentes de íconos gratis o incluso diseñar las tuyas para usar en tu sitio web.

Fuentes de iconos gratis

Hay varias fuentes de iconos gratuitas disponibles para tu sitio de WordPress. Simplemente puedes buscar «fuente de icono» en Google. IcoFont, Font Awesome, We Love Icon Fonts e IcoMoon son las plataformas más recomendadas.

La página de inicio de IcoFont

IcoFont es una de las mayores fuentes de fuentes de iconos gratis. Proporciona más de 2100 iconos en una sola fuente que se clasifican en 30 categorías. También te permite generar tu propio paquete de iconos personalizado.

Simplemente puedes descargar íconos del sitio de IcoFont, ya sea copiando el código HTML o haciendo clic en el botón de descarga desde la navegación del sitio.

Solo explora los iconos que seleccionaste, agrégalos a tu colección y descárgalos. Después de la descarga, obtendrás un archivo zip que tendrás archivos CSS, ejemplos y fuentes. Los fragmentos HTML de los íconos descargados se combinan junto con su Unicode en la carpeta de ejemplo.

Si deseas usarlos directamente en la web, puedes copiar todo el directorio IcoFont en tu carpeta de proyecto. Asegúrate de hacer referencia a la ubicación de tu icofont.min.css. en el encabezado.

La página de inicio del sitio Font Awesome

Otra fuente ampliamente utilizada es Font Awesome. Brinda más de 1500 íconos gratuitos y más de 5000 íconos de versión profesional que cubren más de 70 tipos de íconos con cuatro estilos principales: sólido, regular, ligero, marcas.

La página de inicio del sitio de la página de inicio de We Love Icon Fonts

We Love Icon Fonts es otra fuente que te permite crear tus propios iconos con la ayuda de su creador de fuentes. Simplemente haz clic en «Agregar» y obtendrás un código incrustable que se puede utilizar para personalizar tu colección a través de CSS.

La página de inicio de IcoMoon

Último, pero no menos importante, IcoMoon proporciona más de 5,500 iconos vectoriales gratuitos y más de 4,000 iconos premium. También puedes crear tu propia fuente IcoMoon y cargar tu propio archivo SVG utilizando la función de importación.

Las formas más rápidas de usar iconos en WordPress

Puedes usar las fuentes de iconos en tu sitio de WordPress manualmente copiando el código incrustado o usando opciones alternativas. Independientemente de los problemas de rendimiento, la utilización de plugins y los Dashicons integrados son las formas más rápidas y fáciles de usar los iconos de fuente de WordPress.

Usando un plugin

El uso de un complemento es la forma más fácil de agregar una fuente de ícono a tu sitio de WordPress sin necesidad de modificar el código.

Complemento de Awont Integration

Primero, debes instalar y activar el plugin gratuito Font Awesome Integration. Después de terminar de instalarlo y activarlo, puedes comenzar a agregar íconos de fuente con un shortcode – [fawesome]. Veamos los detalles.

Hay cuatro atributos en el shortcode:

  • target: objetivo de la etiqueta «a»
  • href: enlace para usar en la etiqueta «a»
  • iclass – clases para usar en la etiqueta /i/
  • aclass: clases para usar en la etiqueta «a»

Ahora pasemos a ver cómo crear un icono que apunte al sitio web de WordPress.

Aquí tendrás que colocar el código del icono (fa-wordpresa) en la etiqueta iclass y el enlace http://wordpress.com/ en la etiqueta ahref:

[fawesome iclass = "fab fa-wordpress" ahref ="https://wordpress.com"]

Ten en cuenta que en este ejemplo, agregamos el prefijo fab al iclass. Cubriremos los prefijos de estilo más adelante, proporcionándote una hoja de trucos.

Así es como se verá en el bloque de shortcode de WordPress:

fragmento HTML del icono de WordPress de Font Awesome que se regenera en el sitio principal de WordPress

Una vez que lo visualizas en vista previa o se publica, se verá así:

La vista previa del icono de WordPress que está vinculado a WordPress .com

Cuando hagas clic en el icono de WordPress, serás redirigido al sitio vinculado.

También puedes ir directamente al directorio de íconos de Font Awesome y verificar el código del ícono que deseas usar. Para hacerlo, haz clic en el icono y copia y pega el código en la parte prevista del contenido de tu sitio web.

Ahora, supongamos que quieres usar un ícono gratuito de WordPress disponible en Font Awesome y quieres colocarlo en una publicación de WordPress.

Primero, solo copia el código de icono de WordPress elegido de Font Awesome:

<i class="fab fa-wordpress"> </i>

Luego, colócalo en el editor de publicaciones de WordPress en el bloque HTML, se verá así:

La vista previa del icono de WordPress de Font Awesome en la publicación de WP

Así es como se ve cuando se previsualiza:

el fragmento HTML del icono de WordPress de Font Awesome en el editor de publicaciones de WordPress

Para continuar con el ejemplo, aún puedes personalizarlo de acuerdo con las necesidades de tu proyecto definiendo elementos manualmente: color, tamaño, etc.

Aquí hay un ejemplo de código para modificar el color y el tamaño de un icono:

Ejemplo de fragmentos de HTML para personalizar los iconos de color y tamaño de Font Awesome

La vista previa:

fuentes de icono de WordPress personalizadas de Font Awesome

Ten en cuenta que para hacer referencia a un icono, debes usar <i> y usar <span> para iniciar el comando. Además, cada nombre de icono tiene un prefijo de estilo.

Así es como se plantea el comando:

<i class=”prefijo_de_estilo fa-nombre_del_icono> </i>

o,

<i class=”prefijo_de_estilo fa-nombre_del_icono> </span>

Te dejamos una hoja de trucos para usar el comando anterior:

Estilo Disponibilidad Prefijo de estilo Ejemplo
SolidoGratisfas
<i class="fas fa-icon_name"></i>
<span class="fas fa-icon_name"></span>
RegularProfar
<i class="far fa-icon_name"></i>
<span class="far fa-icon_name"></span>
LightProfal
<i class="fal fa-icon_name"></i>
<span class="far fa-icon_name"></span>
MarcasGratisfab
<i class="fab fa-icon_name"></i>
<span class="far fa-icon_name"></span>

Usando Dashicons

Independientemente de las fuentes de iconos de código abierto disponibles en Internet, WordPress en realidad cuenta con Dashicons, un paquete de fuentes de iconos predeterminado incorporado para cada sitio de WordPress. Fue introducido con WordPress 3.8.

Dashicons proporciona iconos de fuentes, que van desde el menú de administración, pantalla de bienvenida, formatos de publicación, medios, edición de imágenes, TinyMCE, pantalla de publicación, clasificación, redes sociales, productos, taxonomías, widgets, notificaciones y mucho más.

Estos íconos se pueden usar para personalizar tus propios plugins, temas, íconos de tipo de publicación y otros elementos en tu sitio. Como está de forma predeterminada en WordPress, ¡es totalmente fácil de usar!

Puedes hacerlo agregando el código a tu archivo functions.php, aunque esto puede tomar mucho tiempo cuando se hace manualmente.

Complemento de fragmentos de código

En su lugar, puedes optar por usar un plugin gratuito como Code Snippets para configurar Dashicons sin necesidad de configurar el archivo functions.php archivo.

Con esta alternativa, puedes ir al sitio web de Dashicons y elegir el que deseas usar. Para integrarlo en tu sitio web, puedes hacer clic en el enlace «Copiar HTML» y obtener el código, simplemente cópialo y pégalo en tu elemento de WordPress.

Por ejemplo, toma el ícono dashicons-tickets del directorio Dashicons y agrégalo a una publicación de WordPress. Copia el HTML y colócalo en el bloque HTML. Se verá así:

Fragmento HTML de Dashicons del ícono de ticket de WordPress en el editor de publicaciones

Una vez que hagas clic en «Vista previa», verás el ícono:

La vista previa del icono de ticket de WordPress de Dashicons en la publicación

Para personalizar aún más los Dashicons, puedes usar CSS.

Conclusión

Como puedes ver, las fuentes de iconos pueden ser una excelente alternativa para reemplazar imágenes utilizadas como iconos, pictogramas o símbolos para tu sitio web. Las fuentes de iconos son un gran elemento para un sitio web receptivo, ya que pueden reducir el tiempo de carga debido a su tamaño más pequeño.

También puedes obtener fácilmente fuentes de iconos en Internet, ya que muchas de ellas están disponibles de forma gratuita.

Algunos de los sitios recomendados para obtener fuentes de iconos son:

  1. IcoFont
  2. Font Awesome
  3. We Love Icon Fonts
  4. IcoMoon

En lugar de agregar fuentes de iconos manualmente, puedes usar la forma más rápida y fácil de agregarlas:

  1. Uso del plugin de integración de Font Awesome.
  2. Uso de los Dashicons de WordPress integrados con el plugin Code Snippets.

Todo lo que necesitas hacer es copiar y pegar el código HTML de los iconos que deseas usar en el área objetivo de tu sitio WordPress.

El Autor

Author

Deyimar A. / @deyimar

Deyi es una entusiasta del marketing digital, con experiencia en diseño de páginas web, creación de contenido, copywrite y SEO. Forma parte del equipo de SEO & Localization de Hostinger. En su tiempo libre, le gusta desarrollar proyectos, leer un libro o ver una buena película.

Tutoriales relacionados

Agregá un comentario

Comentario*

Nombre*

Email*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

¡Formá parte de Hostinger ahora!