{"id":6463,"date":"2020-01-10T19:36:18","date_gmt":"2020-01-10T22:36:18","guid":{"rendered":"https:\/\/www.neolo.com\/blog\/?p=6463"},"modified":"2020-02-17T14:58:50","modified_gmt":"2020-02-17T17:58:50","slug":"iconos-para-wordpress","status":"publish","type":"post","link":"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php","title":{"rendered":"Iconos para WordPress: qu\u00e9 son y c\u00f3mo usarlos"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tiempo de lectura:<\/span> <span class=\"rt-time\"> 10<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>\n<p><em> \u00daltima actualizaci\u00f3n: 17 de Febrero de 2020 <\/em><\/p>\n\n\n\n<p>Desde siempre los iconos han estado disponibles en WordPress, pero implementarlos de manera eficiente era un poco dif\u00edcil. Hoy en d\u00eda es mucho m\u00e1s f\u00e1cil. Esta nota te ayudar\u00e1 a descubrir c\u00f3mo agregar<strong> iconos para WordPress<\/strong>.<\/p>\n\n\n\n<p>Los iconos son b\u00e1sicamente <strong>fuentes web o vectores<\/strong>, por lo que puedes escalarlos tanto como quieras y lo mejor es que pueden caber muchos iconos dentro de un solo archivo, lo que reduce considerablemente el n\u00famero de solicitudes. Esto te permite usar casi cualquier \u00edcono que puedas imaginar. Sin embargo, con esto, tambi\u00e9n vienen algunas consideraciones de rendimiento.<\/p>\n\n\n\n<p>Este tipo de fuentes te permiten agregar <strong>iconos vectoriales (redimensionables)<\/strong> sin ralentizar tu <a rel=\"noreferrer noopener\" aria-label=\"sitio web de WordPress (abre en una nueva pesta\u00f1a)\" href=\"https:\/\/www.neolo.com\/es\/hosting-wordpress\/\" target=\"_blank\">sitio web de WordPress<\/a>. Se cargan como fuentes web y se pueden dise\u00f1ar con CSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfQu\u00e9 son las fuentes de iconos y\npor qu\u00e9 deber\u00eda usarlas?<\/h3>\n\n\n\n<p>Las <strong>fuentes de iconos<\/strong> contienen s\u00edmbolos o pictogramas en lugar de letras y n\u00fameros. Estos pictogramas se pueden agregar f\u00e1cilmente al contenido del sitio web y cambiar su tama\u00f1o mediante <strong>CSS<\/strong>. En comparaci\u00f3n con los \u00edconos basados \u200b\u200ben im\u00e1genes, los iconos de fuente son mucho m\u00e1s r\u00e1pidos, lo que ayuda con la velocidad general de tu sitio web <strong>WordPress<\/strong>. Estos iconos no se deben confundir con los <a rel=\"noreferrer noopener\" aria-label=\"favicons (abre en una nueva pesta\u00f1a)\" href=\"https:\/\/www.neolo.com\/blog\/como-crear-un-favicon-para-un-sitio-web.php\" target=\"_blank\">favicons<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"315\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/01\/iconos-en-wordpress.png\" alt=\"\" class=\"wp-image-6466\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/01\/iconos-en-wordpress.png 550w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/01\/iconos-en-wordpress-300x172.png 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/figure>\n\n\n\n<p>Estas fuentes se pueden usar para mostrar <strong>iconos <\/strong>de uso com\u00fan. Por ejemplo, puedes usarlos con tu carrito de compras, botones de CTA (llamada a la acci\u00f3n), cuadros de caracter\u00edsticas, concurso de regalos e incluso en los men\u00fas de navegaci\u00f3n de WordPress.<\/p>\n\n\n\n<p>Hay varias fuentes gratuitas y de c\u00f3digo abierto disponibles que tienen cientos de \u00edconos hermosos Y, de hecho, cada instalaci\u00f3n de WordPress viene con el conjunto de fuentes de <strong>iconos dashicons gratis<\/strong>. Estos se usan en el men\u00fa de administraci\u00f3n de WordPress. Saber c\u00f3mo agregar estos iconos es muy importante, debido a que <a rel=\"noreferrer noopener\" aria-label=\"WordPress es una de las mejores herramientas para crear un sitio web (abre en una nueva pesta\u00f1a)\" href=\"https:\/\/www.neolo.com\/blog\/por-que-elegir-wordpress-para-crear-un-sitio-web.php\" target=\"_blank\">WordPress es una de las mejores herramientas para crear un sitio web<\/a>.<\/p>\n\n\n\n<p>Muchas de estas fuentes son muy f\u00e1ciles de encontrar. Simplemente escribe \u00ab<strong>iconos para WordPress<\/strong>\u00bb en Google y navega entre los resultados. Uno de los m\u00e1s populares y ampliamente utilizados es <strong>Font Awesome<\/strong> que tiene m\u00e1s de 1,400 iconos gratis, as\u00ed como m\u00e1s de 4,500 iconos en su versi\u00f3n pro. Incluye iconos para casi todo, desde la interfaz, hasta redes sociales, flechas y muchos otros tipos de iconos.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Como Agregar Iconos a Nuestra Pagina Web con Font Awesome 5\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/pu7PSwO0_YI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption>C\u00f3mo utilizar Font Awesome para agregar iconos para WordPress<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Algunas otras fuentes de <strong>iconos populares<\/strong> son:<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Font Awesome<\/strong><\/li><li><strong>Genericons<\/strong><\/li><li><strong>IcoMoon<\/strong><\/li><li><strong>Linearicons<\/strong><\/li><li><strong>Material Icons de Google<\/strong><\/li><li><strong>El Proyecto Noun<\/strong><\/li><\/ul>\n\n\n\n<p>Entre todas estas, <strong>Font Awesome<\/strong> es la fuente de icono de c\u00f3digo abierto y gratuito m\u00e1s popular de las que est\u00e1n disponibles. Aqu\u00ed te mostraremos tres formas de <strong>agregar fuentes de iconos en WordPress<\/strong>. Puedes elegir la soluci\u00f3n que mejor funcione para ti.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/iconos-en-wordpress-1024x576.png\" alt=\"\" class=\"wp-image-6924\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/iconos-en-wordpress-1024x576.png 1024w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/iconos-en-wordpress-300x169.png 300w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/iconos-en-wordpress-768x432.png 768w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/iconos-en-wordpress.png 1417w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Ejemplo de Font Awesome en WordPress<\/figcaption><\/figure>\n\n\n\n<p><strong>IcoMoon <\/strong>es otro servicio popular con m\u00e1s de 5,500 iconos de vectores gratuitos y m\u00e1s de 4,000 iconos premium. Fontello es otro gran servicio que te ayuda a descubrir y crear fuentes de iconos. Si est\u00e1s buscando un conjunto de iconos s\u00faper ligero, aseg\u00farate de consultar <strong>Bytesize<\/strong>. Los 84 iconos pesan alrededor de unos 9 KB al minimizarlos (2 KB en SVGZ o Gzipped).<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"283\" height=\"178\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/icomoon.png\" alt=\"\" class=\"wp-image-6925\"\/><figcaption>Iconos disponibles en IcoMoon<\/figcaption><\/figure><\/div>\n\n\n\n<p>Si deseas utilizar simplemente los iconos SVG de forma manual, no encontrar\u00e1 una mejor biblioteca gratuita que <strong>Iconmonstr <\/strong>o una mejor biblioteca premium que Iconfinder.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Agregar fuentes de iconos en\nWordPress usando complementos<\/h3>\n\n\n\n<p>Si est\u00e1s en el nivel principiante donde solo intentas agregar algunos iconos a tus <strong>entradas o p\u00e1ginas<\/strong>, entonces este m\u00e9todo es adecuado para ti. No tendr\u00edas que modificar los archivos del tema, y \u200b\u200bpodr\u00edas usar iconos en cualquier parte de tu <strong>sitio web<\/strong>.<\/p>\n\n\n\n<p>La forma m\u00e1s r\u00e1pida de comenzar a usar los <strong>iconos para WordPress<\/strong> es simplemente usar un complemento de terceros. El complemento gratuito de integraci\u00f3n de Font Awesome contiene la \u00faltima biblioteca de iconos de Font Awesome 5. Despu\u00e9s de instalarlo y activarlo, todo lo que necesitas es un simple c\u00f3digo de c\u00f3digo corto para insertar un icono. \u00a1Incluso tienen un icono de WordPress ahora! <\/p>\n\n\n\n<p>Puede\nconsultar el cuadro de uso b\u00e1sico de Font Awesome 5 para obtener formas\nadicionales de usarlo y personalizarlo, as\u00ed como su biblioteca de iconos.<\/p>\n\n\n\n<p>Lo primero que debes hacer es instalar y activar el plugin <strong>Font Awesome<\/strong>. Puedes hacerlo t\u00fa mismo o solicitar <a href=\"https:\/\/www.neolo.com\/es\/hosting-wordpress-administrado\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"asistencia para tu WordPress (abre en una nueva pesta\u00f1a)\">asistencia para tu WordPress<\/a>.<\/p>\n\n\n\n<p>Tras la activaci\u00f3n, el complemento habilita la compatibilidad con Font Awesome para tu tema. Luego podr\u00e1s editar cualquier publicaci\u00f3n o p\u00e1gina de WordPress y usar un c\u00f3digo abreviado de icono.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Ejemplo de c\u00f3digo abreviado<\/h4>\n\n\n\n<p><strong><span class=\"glyphicon\"><\/span><\/strong><\/p>\n\n\n\n<p>Puedes usar este shortcode junto con otro texto o solo en un bloque de <strong>shortcode <\/strong>dedicado. Una vez agregado, puedes obtener una vista previa de tu entrada o p\u00e1gina para ver c\u00f3mo se ver\u00e1 el icono en un sitio online. <\/p>\n\n\n\n<p>Tambi\u00e9n puedes agregar el c\u00f3digo\nabreviado del icono de fuente dentro de un bloque de p\u00e1rrafo por s\u00ed solo, donde\npuedes usar la configuraci\u00f3n del bloque para aumentar el tama\u00f1o del icono.<\/p>\n\n\n\n<p>A medida que aumenta el tama\u00f1o del texto, esto puede verse un poco extra\u00f1o dentro del <strong>editor de texto<\/strong>. Esto se debe a que el shortcode no cambia autom\u00e1ticamente a una fuente de icono dentro del editor de bloques.<\/p>\n\n\n\n<p>Si deseas muchos c\u00f3digos <strong>cortos f\u00e1ciles de usar<\/strong>, es posible que tambi\u00e9n quieras consultar el complemento <strong>Shortcodes Ultimate<\/strong>. Tienen un complemento de iconos premium que puedes usar.<\/p>\n\n\n\n<p>Lo anterior es una gran soluci\u00f3n si deseas permitir que tus clientes agreguen <strong>iconos para WordPress<\/strong> a publicaciones o p\u00e1ginas, pero si quieres utilizar estos elementos dentro de su tema o complemento, es mejor que los agregues t\u00fa mismo.<\/p>\n\n\n\n<p>Deber\u00e1s hacer clic en el <strong>bot\u00f3n de vista previa <\/strong>en tu publicaci\u00f3n o p\u00e1gina para ver c\u00f3mo se mostrar\u00eda el tama\u00f1o real del icono.<\/p>\n\n\n\n<p>Tambi\u00e9n puedes usar el c\u00f3digo\nabreviado del icono dentro de las columnas y crear cuadros de caracter\u00edsticas\ncomo este:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"280\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/01\/iconos-wordpress.jpg\" alt=\"\" class=\"wp-image-6464\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/01\/iconos-wordpress.jpg 550w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/01\/iconos-wordpress-300x153.jpg 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/figure>\n\n\n\n<p>En el front-end aparecer\u00e1 as\u00ed:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/wordpress-iconos.jpg\" alt=\"\" class=\"wp-image-6926\" width=\"458\" height=\"193\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/wordpress-iconos.jpg 550w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/wordpress-iconos-300x127.jpg 300w\" sizes=\"auto, (max-width: 458px) 100vw, 458px\" \/><\/figure><\/div>\n\n\n\n<p>Tambi\u00e9n  puedes usar esta funci\u00f3n en columnas y crear opciones como la siguiente:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"281\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/wordpress-icono.jpg\" alt=\"\" class=\"wp-image-6927\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/wordpress-icono.jpg 550w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/wordpress-icono-300x153.jpg 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">2. Uso de fuentes de iconos con\nun generador de p\u00e1ginas de WordPress<\/h3>\n\n\n\n<p>Los complementos m\u00e1s populares del creador de p\u00e1ginas de WordPress vienen con soporte incorporado para <strong>fuentes de iconos<\/strong>. Esto te permite usar f\u00e1cilmente fuentes de iconos en tus p\u00e1ginas de destino, as\u00ed como en otras \u00e1reas de tu sitio web.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Beaver Builder<\/strong><\/h4>\n\n\n\n<p><a rel=\"noreferrer noopener\" aria-label=\"Beaver Builder  (abre en una nueva pesta\u00f1a)\" href=\"http:\/\/www.wpbeaverbuilder.com\/\" target=\"_blank\">Beaver Builder<\/a> es el mejor <strong>complemento de generador de p\u00e1ginas de WordPress <\/strong>en el mercado. Te permite crear f\u00e1cilmente dise\u00f1os de p\u00e1gina personalizados en WordPress sin escribir ning\u00fan c\u00f3digo. Este plugin viene con iconos muy bonitos y m\u00f3dulos listos para usar que puedes arrastrar y soltar en tus entradas y p\u00e1ginas.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"320\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/beaver-builder-.jpg\" alt=\"\" class=\"wp-image-6928\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/beaver-builder-.jpg 550w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/beaver-builder--300x175.jpg 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/figure>\n\n\n\n<p>Puedes crear grupos de iconos, agregar un solo icono y moverlos a filas y columnas bien posicionadas. Tambi\u00e9n puedes seleccionar tus propios colores, fondo, espaciado y margen sin usar <strong>CSS<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"329\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/iconos-beaver.jpg\" alt=\"\" class=\"wp-image-6929\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/iconos-beaver.jpg 550w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/iconos-beaver-300x179.jpg 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/figure>\n\n\n\n<p>Incluso puedes crear temas de WordPress completamente personalizados sin escribir ning\u00fan c\u00f3digo con el producto<strong> Themer de Beaver Builder<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Elementor Pro<\/strong><\/h4>\n\n\n\n<p><a rel=\"noreferrer noopener\" aria-label=\"Elementor  (abre en una nueva pesta\u00f1a)\" href=\"https:\/\/elementor.com\" target=\"_blank\">Elementor<\/a> es otro popular <strong>plugin generador de p\u00e1ginas de WordPress<\/strong>. Tambi\u00e9n viene con varios elementos que le permiten usar fuentes de iconos, incluido un elemento <strong>Icon<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"306\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/elementor-iconos-wordpress.jpg\" alt=\"\" class=\"wp-image-6930\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/elementor-iconos-wordpress.jpg 550w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/elementor-iconos-wordpress-300x167.jpg 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/figure>\n\n\n\n<p>Simplemente puedes arrastrar y\nsoltar un icono en cualquier lugar y usarlo con filas, columnas y tablas para\ncrear hermosas p\u00e1ginas.<\/p>\n\n\n\n<p>Otros creadores de p\u00e1ginas populares como <strong>Divi <\/strong>y <strong>Visual Composer<\/strong> tambi\u00e9n tienen soporte completo para fuentes de iconos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Usar los Dashicons integrados<\/h3>\n\n\n\n<p>Estos son b\u00e1sicamente un conjunto de<strong> iconos para WordPress<\/strong> incluidos por defecto, ya que se usa en el backend. Deber\u00e1s ponerlo en cola en el front-end, pero todo lo que necesitas es el nombre del script, el archivo ya est\u00e1 disponible para WordPress.<\/p>\n\n\n\n<p>Puedes agregar lo siguiente a tu archivo functions.php, o te recomendamos usar un complemento gratuito como <strong>Fragmentos de c\u00f3digo<\/strong>. Esto minimiza el riesgo de romper tu tema y los cambios tambi\u00e9n se mantendr\u00e1n durante las actualizaciones del tema.<\/p>\n\n\n\n<p>function my_theme_styles () {<\/p>\n\n\n\n<p>wp_enqueue_style (&#8216;dashicons&#8217;);<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>Luego puedes ir al sitio web de Dashicons, seleccionar un icono y hacer clic en el enlace \u00ab<strong>copiar HTML<\/strong>\u00bb que te indicar\u00e1 el c\u00f3digo que necesitas para mostrar los iconos para WordPress. No tienen una gran selecci\u00f3n, pero funcionan muy bien y son muy livianos.<\/p>\n\n\n\n<p>&lt;span class = \u00abdashicons dashicons-admin-post\u00bb&gt;\n&lt;\/span&gt;<\/p>\n\n\n\n<p>Por ejemplo, a continuaci\u00f3n insertamos el \u00edcono del tablero en un bloque HTML:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"517\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/iconos-para-wordpress-1-1024x517.png\" alt=\"\" class=\"wp-image-6922\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/iconos-para-wordpress-1-1024x517.png 1024w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/iconos-para-wordpress-1-300x151.png 300w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/iconos-para-wordpress-1-768x388.png 768w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/iconos-para-wordpress-1.png 1520w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>As\u00ed es como se ve en el front-end:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"439\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/dashicons-wordpress-1024x439.png\" alt=\"\" class=\"wp-image-6923\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/dashicons-wordpress-1024x439.png 1024w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/dashicons-wordpress-300x129.png 300w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/dashicons-wordpress-768x330.png 768w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/dashicons-wordpress.png 1475w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption> Ejemplo de Dashicons en WordPress 5.0 <\/figcaption><\/figure>\n\n\n\n<p>Dashicons no tiene c\u00f3digos cortos geniales listos para usar, pero puedes\npersonalizar el tama\u00f1o de tus iconos para WordPress con CSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Agregar fuentes de iconos en WordPress manualmente con c\u00f3digo<\/h3>\n\n\n\n<p>Las fuentes de \u00edconos se pueden agregar a su sitio como si agregara cualquier fuente personalizada. Algunas de ellas, como Font Awesome, est\u00e1n disponibles en los servidores de CDN en toda la web y se pueden vincular directamente desde tu tema de <strong>WordPress<\/strong>.<\/p>\n\n\n\n<p>Tambi\u00e9n puedes cargar todo el directorio de fuentes en una carpeta en tu tema de <strong>WordPress <\/strong>y luego usar esas fuentes en tu hoja de estilo.<\/p>\n\n\n\n<p>Te mostramos c\u00f3mo puedes\nagregarlas usando ambos m\u00e9todos.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">M\u00e9todo 1:<\/h4>\n\n\n\n<p>Este m\u00e9todo manual es bastante\nf\u00e1cil.<\/p>\n\n\n\n<p>Primero, debes visitar el sitio web <strong>Font Awesome<\/strong> e ingresar tu direcci\u00f3n de correo electr\u00f3nico para obtener el c\u00f3digo de inserci\u00f3n.<\/p>\n\n\n\n<p>Luego revisa tu <strong>bandeja de entrada<\/strong>, debes tener un correo electr\u00f3nico de Font Awesome con tu c\u00f3digo de inserci\u00f3n. Copia y pega este c\u00f3digo de inserci\u00f3n en el archivo <strong>header.php<\/strong> de tu tema de WordPress justo antes de la etiqueta <strong>&lt;\/head&gt;<\/strong>.<\/p>\n\n\n\n<p>Tu c\u00f3digo de inserci\u00f3n ser\u00e1 una sola l\u00ednea que buscar\u00e1 la biblioteca <strong>Font Awesome<\/strong> directamente desde sus servidores CDN. Se ver\u00e1 algo como esto:<\/p>\n\n\n\n<p><strong>1 &lt;script src = \u00abhttps:\/\/use.fontawesome.com\/123456abc.js\u00bb&gt; &lt;\/script&gt;<\/strong><\/p>\n\n\n\n<p>Este m\u00e9todo es m\u00e1s simple, pero puede causar conflictos con otros complementos. Un mejor enfoque ser\u00eda cargar <strong>JavaScript<\/strong> correctamente en <strong>WordPress<\/strong> utilizando el mecanismo de puesta en cola incorporado.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">M\u00e9todo 2:<\/h4>\n\n\n\n<p>El segundo m\u00e9todo no es el m\u00e1s f\u00e1cil,\npero te permitir\u00eda alojar las fuentes del \u00edcono Font Awesome en tu propio sitio\nweb.<\/p>\n\n\n\n<p>Primero, debes visitar el sitio web <strong>Font Awesome <\/strong>para descargar el <strong>paquete de fuentes<\/strong> en tu computadora. Descarga las fuentes del icono y descomprime el paquete. Luego, deber\u00e1s conectarte a tu <strong>hosting<\/strong> <strong>WordPress <\/strong>utilizando un cliente FTP e ir al directorio de tu tema de WordPress.<\/p>\n\n\n\n<p>Debes crear una nueva carpeta all\u00ed y nombrarla como fuentes. A continuaci\u00f3n, debes cargar el contenido de la carpeta en el directorio de fuentes en tu servidor de alojamiento web. Ahora ya podr\u00e1s cargar fuentes de iconos en tu <a href=\"https:\/\/wordpress.org\/themes\/neolo\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"tema de WordPress (se abre en una nueva pesta\u00f1a)\">tema de <strong>WordPress<\/strong><\/a>. Simplemente agrega este c\u00f3digo al archivo<strong> functions.php<\/strong> de tu tema o en un complemento espec\u00edfico del sitio<\/p>\n\n\n\n<p>Luego, viene la parte en la que agregar\u00e1s iconos reales a tu tema, entradas o p\u00e1ginas de WordPress.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Visualizaci\u00f3n manual de fuentes\nde iconos en WordPress<\/h3>\n\n\n\n<p>Debes ir al sitio web de <strong>Font Awesome<\/strong> para ver la lista completa de iconos disponibles. Haz clic en cualquier icono que desees usar y podr\u00e1s ver el nombre del mismo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"369\" src=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/iconos-manual.jpg\" alt=\"\" class=\"wp-image-6931\" srcset=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/iconos-manual.jpg 550w, https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/02\/iconos-manual-300x201.jpg 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/figure>\n\n\n\n<p>Copia el nombre y \u00fasalo de esta manera en <strong>WordPress<\/strong>.<\/p>\n\n\n\n<p><strong>1 &lt;i class = \u00abfa-arrow-alt-circle-up\u00bb&gt; &lt;\/i&gt;<\/strong><\/p>\n\n\n\n<p>Tambi\u00e9n puedes combinar diferentes iconos y dise\u00f1arlos a la vez. Por ejemplo, supongamos que deseas mostrar una lista de enlaces con iconos junto a ellos. Puedes envolverlos bajo un elemento<strong> &lt;div&gt; <\/strong>con una clase espec\u00edfica.<\/p>\n\n\n\n<p> &lt;div class = \u00abicons-group\u00bb&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&lt;a class=\u00bbicons-group-item\u00bb href=\u00bb#\u00bb&gt; &lt;i class = \u00abfa fa-home fa-fw\u00bb&gt; &lt;\/i&gt; Home&lt;\/a&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;a class=\u00bbicons-group-item\u00bb href=\u00bb#\u00bb&gt; &lt;i class = \u00abfa fa-book fa-fw\u00bb&gt; &lt;\/i&gt; Library&lt;\/a&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&lt;a class=\u00bbicons-group-item\u00bb href=\u00bb#\u00bb&gt; &lt;i class = \u00abfa fa-pencil fa-fw\u00bb&gt; &lt;\/i&gt;  Applications&lt;\/a&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&lt;a class=\u00bbicons-group-item\u00bb href=\u00bb#\u00bb&gt; &lt;i class = \u00abfa fa-cog fa-fw\u00bb&gt; &lt;\/i&gt; Settings&lt;\/a&gt; &lt;\/div&gt;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Temas a considerar al usar iconos para WordPress<\/h3>\n\n\n\n<p>Si bien no hay nada de malo en usar cualquiera de las formas anteriores para agregar <strong>fuentes de iconos<\/strong> a tu sitio, t\u00e9cnicamente no son la mejor forma. Porque esto puede traer problemas de rendimiento.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Probablemente no necesites todos esos \u00edconos<\/h4>\n\n\n\n<p>En primer lugar, cuando utilizas un complemento para fuentes de \u00edconos o un enlace a una biblioteca de fuentes de \u00edconos externa, cargar\u00e1s todos los <strong>iconos para WordPress <\/strong>en toda tu biblioteca. Si solo usas 20 o m\u00e1s \u00edconos en todo el sitio, esto se podr\u00eda manejar mucho mejor. \u00bfRealmente necesitas todos esos iconos? Probablemente no. As\u00ed que no los cargues todos en tu sitio.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">&nbsp;Cargar desde un CDN suele ser m\u00e1s r\u00e1pido<\/h4>\n\n\n\n<p>No hay nada de malo en cargar scripts de diferentes <strong>CDN<\/strong>. Sin embargo, si tienes la opci\u00f3n de <strong>cargarlo desde un CDN<\/strong>, esto suele ser m\u00e1s r\u00e1pido. \u00bfPor qu\u00e9? Porque puedes aprovechar una \u00fanica conexi\u00f3n HTTP \/ 2 y reducir las b\u00fasquedas adicionales de DNS. \u00a1Solo aseg\u00farate de que tu CDN principal sea buena!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Almacena los iconos para WordPress localmente (solo los que\nnecesitas)<\/h4>\n\n\n\n<p>Debido a las razones de rendimiento mencionadas anteriormente, lo m\u00e1s apropiado es alojar tus iconos para WordPress localmente, y usar solo los que necesita. Por local, nos referimos a cargarlos desde el <strong>servidor de tu hosting de WordPress<\/strong> o tu propia CDN.<\/p>\n\n\n\n<p>Al elegir solo las fuentes de iconos que necesitas, esto puede reducir el tama\u00f1o del archivo de 100 KB a un par de kilobytes, lo cual es bastante \u00fatil. A\u00fan mejor: incluso puedes <strong>mezclar y combinar iconos<\/strong> de varios conjuntos de fuentes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Fundamentos del uso de iconos para WordPress<\/h4>\n\n\n\n<p>El uso de iconos para WordPress implica alojar el archivo de fuente (WOFF, WOFF 2, etc.) en tu servidor web, luego <strong>usar CSS para cargar la fuente<\/strong>, y despu\u00e9s crear un marcado para agregar los iconos en el lugar correcto.<\/p>\n\n\n\n<p>Si bien tu sitio cargar\u00e1 un solo archivo, en realidad terminar\u00e1s teniendo varios formatos de archivo para cada fuente, ya que algunos navegadores utilizan diferentes formatos. <strong>Font Awesome<\/strong> por ejemplo, tiene 6 formatos de archivo diferentes incluidos: EOT, SVG, TTF, WOFF, WOFF 2 y OTF. Sin embargo, seg\u00fan el soporte del navegador, solo necesita WOFF o WOFF 2.<\/p>\n\n\n\n<p><strong>Nota<\/strong>: WOFF es compatible con m\u00e1s del 93% de todos los navegadores. Sin embargo, WOFF 2 est\u00e1 m\u00e1s limitado, pero solo es compatible con m\u00e1s del 83% de todos los navegadores actuales. Recomendamos elegir uno u otro o ambos. El navegador determinar\u00e1 en funci\u00f3n de su c\u00f3digo cu\u00e1l entregar al cliente.<\/p>\n\n\n\n<p>Tu primera tarea es utilizar una herramienta para <strong>elegir solo los iconos que desees<\/strong>. Luego puedes agregar estos archivos al directorio de tu proyecto, generalmente en un directorio de fuentes.<\/p>\n\n\n\n<p>Esperamos que esta nota te haya ayudado a aprender <strong>c\u00f3mo agregar f\u00e1cilmente fuentes de iconos en tu tema de WordPress<\/strong>. <\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong><em>\u00bfNecesitas un hosting para WordPress?<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-button aligncenter\"><a class=\"wp-block-button__link has-background has-vivid-green-cyan-background-color\" href=\"https:\/\/www.neolo.com\/es\/hosting-wordpress\/\"><strong>CONOCER M\u00c1S<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u00daltima actualizaci\u00f3n: 17 de Febrero de 2020 Desde siempre los iconos han estado disponibles en WordPress, pero implementarlos de manera eficiente era un poco dif\u00edcil. Hoy en d\u00eda es mucho m\u00e1s f\u00e1cil. Esta nota te ayudar\u00e1 a descubrir c\u00f3mo agregar iconos para WordPress. Los iconos son b\u00e1sicamente fuentes web o vectores, por lo que puedes [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":6465,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[309],"tags":[],"class_list":["post-6463","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-recursos"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Iconos para WordPress: qu\u00e9 son y c\u00f3mo usarlos - Neolo Blog<\/title>\n<meta name=\"description\" content=\"Descubre la mejor forma de agregar iconos para WordPress, Conoce las herramientas para potenciar tu sitio web WordPress con iconos\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Iconos para WordPress: qu\u00e9 son y c\u00f3mo usarlos - Neolo Blog\" \/>\n<meta property=\"og:description\" content=\"Descubre la mejor forma de agregar iconos para WordPress, Conoce las herramientas para potenciar tu sitio web WordPress con iconos\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php\" \/>\n<meta property=\"og:site_name\" content=\"Neolo Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/neolohosting\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-10T22:36:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-02-17T17:58:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/01\/iconos-para-wordpress.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1872\" \/>\n\t<meta property=\"og:image:height\" content=\"912\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Manuel Malav\u00e9\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@neolo\" \/>\n<meta name=\"twitter:site\" content=\"@neolo\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manuel Malav\u00e9\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php\"},\"author\":{\"name\":\"Manuel Malav\u00e9\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/3f22b09243c6d649d98973bb12bf360c\"},\"headline\":\"Iconos para WordPress: qu\u00e9 son y c\u00f3mo usarlos\",\"datePublished\":\"2020-01-10T22:36:18+00:00\",\"dateModified\":\"2020-02-17T17:58:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php\"},\"wordCount\":2633,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/01\/iconos-para-wordpress.png\",\"articleSection\":[\"Recursos\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php\",\"url\":\"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php\",\"name\":\"Iconos para WordPress: qu\u00e9 son y c\u00f3mo usarlos - Neolo Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/01\/iconos-para-wordpress.png\",\"datePublished\":\"2020-01-10T22:36:18+00:00\",\"dateModified\":\"2020-02-17T17:58:50+00:00\",\"description\":\"Descubre la mejor forma de agregar iconos para WordPress, Conoce las herramientas para potenciar tu sitio web WordPress con iconos\",\"breadcrumb\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php#primaryimage\",\"url\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/01\/iconos-para-wordpress.png\",\"contentUrl\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/01\/iconos-para-wordpress.png\",\"width\":1872,\"height\":912},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\/\/www.neolo.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Recursos\",\"item\":\"https:\/\/www.neolo.com\/blog\/temas\/recursos\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Iconos para WordPress: qu\u00e9 son y c\u00f3mo usarlos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#website\",\"url\":\"https:\/\/www.neolo.com\/blog\/\",\"name\":\"Neolo Blog\",\"description\":\"Blog de Neolo: Dominios, Web Hosting y Marketing Digital\",\"publisher\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.neolo.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#organization\",\"name\":\"Neolo\",\"url\":\"https:\/\/www.neolo.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2017\/07\/neolo-verde-chico.png\",\"contentUrl\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2017\/07\/neolo-verde-chico.png\",\"width\":392,\"height\":83,\"caption\":\"Neolo\"},\"image\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/neolohosting\",\"https:\/\/x.com\/neolo\",\"https:\/\/www.instagram.com\/neolodotcom\/\",\"https:\/\/www.linkedin.com\/company\/neolo.com\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/3f22b09243c6d649d98973bb12bf360c\",\"name\":\"Manuel Malav\u00e9\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/85ba885beb13287b705273ac6868dc56?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/85ba885beb13287b705273ac6868dc56?s=96&r=g\",\"caption\":\"Manuel Malav\u00e9\"},\"description\":\"Redactor de contenidos\",\"sameAs\":[\"manuel\"],\"url\":\"https:\/\/www.neolo.com\/blog\/author\/manuel\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Iconos para WordPress: qu\u00e9 son y c\u00f3mo usarlos - Neolo Blog","description":"Descubre la mejor forma de agregar iconos para WordPress, Conoce las herramientas para potenciar tu sitio web WordPress con iconos","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php","og_type":"article","og_title":"Iconos para WordPress: qu\u00e9 son y c\u00f3mo usarlos - Neolo Blog","og_description":"Descubre la mejor forma de agregar iconos para WordPress, Conoce las herramientas para potenciar tu sitio web WordPress con iconos","og_url":"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php","og_site_name":"Neolo Blog","article_publisher":"https:\/\/www.facebook.com\/neolohosting","article_published_time":"2020-01-10T22:36:18+00:00","article_modified_time":"2020-02-17T17:58:50+00:00","og_image":[{"width":1872,"height":912,"url":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/01\/iconos-para-wordpress.png","type":"image\/png"}],"author":"Manuel Malav\u00e9","twitter_card":"summary_large_image","twitter_creator":"@neolo","twitter_site":"@neolo","twitter_misc":{"Escrito por":"Manuel Malav\u00e9","Tiempo de lectura":"13 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php#article","isPartOf":{"@id":"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php"},"author":{"name":"Manuel Malav\u00e9","@id":"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/3f22b09243c6d649d98973bb12bf360c"},"headline":"Iconos para WordPress: qu\u00e9 son y c\u00f3mo usarlos","datePublished":"2020-01-10T22:36:18+00:00","dateModified":"2020-02-17T17:58:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php"},"wordCount":2633,"commentCount":0,"publisher":{"@id":"https:\/\/www.neolo.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php#primaryimage"},"thumbnailUrl":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/01\/iconos-para-wordpress.png","articleSection":["Recursos"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php","url":"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php","name":"Iconos para WordPress: qu\u00e9 son y c\u00f3mo usarlos - Neolo Blog","isPartOf":{"@id":"https:\/\/www.neolo.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php#primaryimage"},"image":{"@id":"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php#primaryimage"},"thumbnailUrl":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/01\/iconos-para-wordpress.png","datePublished":"2020-01-10T22:36:18+00:00","dateModified":"2020-02-17T17:58:50+00:00","description":"Descubre la mejor forma de agregar iconos para WordPress, Conoce las herramientas para potenciar tu sitio web WordPress con iconos","breadcrumb":{"@id":"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php#primaryimage","url":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/01\/iconos-para-wordpress.png","contentUrl":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2020\/01\/iconos-para-wordpress.png","width":1872,"height":912},{"@type":"BreadcrumbList","@id":"https:\/\/www.neolo.com\/blog\/iconos-para-wordpress.php#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/www.neolo.com\/blog"},{"@type":"ListItem","position":2,"name":"Recursos","item":"https:\/\/www.neolo.com\/blog\/temas\/recursos"},{"@type":"ListItem","position":3,"name":"Iconos para WordPress: qu\u00e9 son y c\u00f3mo usarlos"}]},{"@type":"WebSite","@id":"https:\/\/www.neolo.com\/blog\/#website","url":"https:\/\/www.neolo.com\/blog\/","name":"Neolo Blog","description":"Blog de Neolo: Dominios, Web Hosting y Marketing Digital","publisher":{"@id":"https:\/\/www.neolo.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.neolo.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.neolo.com\/blog\/#organization","name":"Neolo","url":"https:\/\/www.neolo.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.neolo.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2017\/07\/neolo-verde-chico.png","contentUrl":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2017\/07\/neolo-verde-chico.png","width":392,"height":83,"caption":"Neolo"},"image":{"@id":"https:\/\/www.neolo.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/neolohosting","https:\/\/x.com\/neolo","https:\/\/www.instagram.com\/neolodotcom\/","https:\/\/www.linkedin.com\/company\/neolo.com\/"]},{"@type":"Person","@id":"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/3f22b09243c6d649d98973bb12bf360c","name":"Manuel Malav\u00e9","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/85ba885beb13287b705273ac6868dc56?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/85ba885beb13287b705273ac6868dc56?s=96&r=g","caption":"Manuel Malav\u00e9"},"description":"Redactor de contenidos","sameAs":["manuel"],"url":"https:\/\/www.neolo.com\/blog\/author\/manuel"}]}},"_links":{"self":[{"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/posts\/6463","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/comments?post=6463"}],"version-history":[{"count":19,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/posts\/6463\/revisions"}],"predecessor-version":[{"id":6940,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/posts\/6463\/revisions\/6940"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/media\/6465"}],"wp:attachment":[{"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/media?parent=6463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/categories?post=6463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/tags?post=6463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}