Añadir iconos a WordPress: ex­pli­ca­ción sencilla

Hay varios métodos para mejorar el aspecto de un texto en WordPress con icon fonts: utiliza un plugin de WordPress para icon fonts como, por ejemplo, el de Font Awesome. También se pueden utilizar sho­r­t­co­des para insertar los iconos a través del plugin. Otra manera es insertar las icon fonts ma­nua­l­me­n­te a través del código de inserción, ya sean fuentes in­di­vi­dua­les o conjuntos enteros (por ejemplo, también de Fonts Awesome). Si solo necesitas unos pocos iconos estándar, también puedes utilizar los de un page builder o Dashicons.

Las icon fonts son pi­c­to­gra­mas y símbolos in­di­vi­dua­les que puedes añadir a tu sitio web para mejorar su aspecto o la na­ve­ga­ción. La gran di­fe­re­n­cia con respecto a otros iconos en WordPress es que las icon fonts están co­n­fi­gu­ra­das como una fuente ti­po­grá­fi­ca co­n­ve­n­cio­nal. En lugar de letras, números o ca­ra­c­te­res es­pe­cia­les, contiene pequeños símbolos.

Las ventajas de este método son enormes. Por un lado, facilita el uso si los pi­c­to­gra­mas están co­n­fi­gu­ra­dos como fuente. Por otro lado, estos iconos, al igual que una fuente de texto co­n­ve­n­cio­nal, permiten modificar su tamaño li­bre­me­n­te y pueden co­lo­rear­se como quieras en WordPress. Además, las icon fonts cargan más rápido que los gráficos in­di­vi­dua­les.

Hay numerosos pro­vee­do­res que ofrecen iconos para WordPress. Muchos de ellos son gratuitos. Se­gu­ra­me­n­te la página más popular para descargar icon fonts gratuitos sea Font Awesome. Allí, puedes encontrar más de 7500 iconos. La gama de iconos va desde simples flechas o símbolos comunes, como carritos de la compra y lupas, hasta temas es­pe­cí­fi­cos.

Una vez que hayas en­co­n­tra­do los iconos adecuados para tu web de WordPress, hay varias maneras de in­se­r­tar­los. Un método sencillo es la in­te­gra­ción a través de un plugin. Para Font Awesome, por ejemplo, existe un plugin de in­te­gra­ción propio que se llama Better Font Awesome.

Este plugin te permite añadir iconos en WordPress mediante el uso de un shortcode. El plugin pro­po­r­cio­na siempre los últimos conjuntos de iconos y, por lo tanto, no requiere ninguna ac­tua­li­za­ción manual. Su uso es muy sencillo: una vez instalado, el plugin permite se­le­c­cio­nar e integrar cualquier icono a través del shortcode icon name="ejemplo". Sin embargo, los di­fe­re­n­tes pi­c­to­gra­mas también están di­s­po­ni­bles para su selección en el editor de texto.

También puedes se­le­c­cio­nar, insertar o cambiar iconos en WordPress de forma manual. Font Awesome te pro­po­r­cio­na la fuente co­rre­s­po­n­die­n­te como código de inserción para este propósito. Se hace de la siguiente manera:

1. Registra tu dirección de correo ele­c­tró­ni­co en Font Awesome. A esta dirección se enviará el código de inserción.
2. A co­n­ti­nua­ción, crea una copia de seguridad de tu web. Dado que vas a modificar el código, es im­po­r­ta­n­te que tengas una copia de seguridad.
3. Ahora introduce el código en la cabecera de tu tema. Esto lo puedes hacer a través del archivo header.php o, con algunos temas, incluso di­re­c­ta­me­n­te en el backend. El código de inserción se debe agregar di­re­c­ta­me­n­te antes de .
4. Ahora puedes se­le­c­cio­nar los iconos para WordPress que necesites para tu página.

También puedes descargar la colección de iconos deseada di­re­c­ta­me­n­te desde Font Awesome:

1. Primero, de­s­co­m­pri­me el archivo ZIP. Dentro también verás un archivo llamado all.css.
2. Utiliza el FTP para co­ne­c­tar­te al servidor de tu página. Allí habrá una carpeta llamada “fonts”.
3. En esta carpeta, debes crear una su­b­ca­r­pe­ta llamada “Font Awesome” y dentro de ella otra su­b­ca­r­pe­ta con el nombre “css”. Ahora, inserta el archivo all.css en esta carpeta.
4. Abre el archivo header.php de tu tema y añade el siguiente código delante de:

Dashicons funciona de manera muy similar. Estos iconos forman parte de la gama básica de WordPress y se pueden insertar con un plugin. Para ello, basta con copiar el código de un icono de la web y pegarlo en el backend. Aunque hay co­m­pa­ra­ti­va­me­n­te pocos iconos di­s­po­ni­bles para tu página de WordPress, no faltarán los clásicos como los iconos de correo ele­c­tró­ni­co, los logotipos de las distintas pla­ta­fo­r­mas de medios sociales o un carrito de la compra.

Por lo tanto, si quieres añadir iconos a WordPress, tienes varias opciones y todas ellas son re­la­ti­va­me­n­te sencillas. Las icon fonts ofrecen numerosas ventajas frente a los gráficos, por lo que pueden ser una opción muy in­te­re­sa­n­te. Es im­po­r­ta­n­te que siempre utilices los iconos con mo­de­ra­ción. De lo contrario, tu página se volverá rá­pi­da­me­n­te inestable. Un favicon WordPress junto con algunos iconos en las di­fe­re­n­tes páginas suele ser su­fi­cie­n­te.