{"id":9885,"date":"2020-03-12T20:43:43","date_gmt":"2020-03-12T19:43:43","guid":{"rendered":"https:\/\/blog.hostinger.io\/mx-tutoriales\/?p=9885"},"modified":"2023-09-16T01:46:51","modified_gmt":"2023-09-15T23:46:51","slug":"iconos-wordpress","status":"publish","type":"post","link":"\/mx\/tutoriales\/iconos-wordpress","title":{"rendered":"C\u00f3mo incluir iconos en WordPress: una gu\u00eda para principiantes"},"content":{"rendered":"

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

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

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.<\/p>

¿Por qué usar íconos?<\/h2>

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.<\/p>

\n
\"Fuentes<\/figure><\/div>

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

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.<\/p>

Las fuentes de iconos son imágenes vectoriales. Por lo tanto, son infinitamente escalables.<\/p>

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<\/a>, sin pérdida de calidad visual.<\/p>

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.<\/p>

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 o blog<\/a>.<\/p>

Fuentes de iconos gratis<\/h2>

Hay varias fuentes de iconos gratuitas disponibles para tu sitio de WordPress<\/a>. Simplemente puedes buscar “fuente de icono” en Google<\/a>. IcoFont<\/a>, Font Awesome<\/a>, We Love Icon Fonts<\/a> e IcoMoon<\/a> son las plataformas más recomendadas.<\/p>

\n
\"La<\/figure><\/div>

IcoFont<\/a> 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.<\/p>

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

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.<\/p>

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<\/strong>. en el encabezado.<\/p>

\n
\"La<\/figure><\/div>

Otra fuente ampliamente utilizada es Font Awesome<\/a>. Brinda más de 1500 iconos 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.<\/p>

\n
\"La<\/figure><\/div>

We Love Icon Fonts<\/a> 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.<\/p>

\n
\"La<\/figure><\/div>

Último, pero no menos importante, IcoMoon<\/a> 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.<\/p>

Las formas más rápidas de usar iconos en WordPress<\/h2>

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

Usando un plugin<\/h3>

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.<\/p>

\n
\"Complemento<\/figure><\/div>

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

Hay cuatro atributos en el shortcode:<\/p>