La guía para principiantes sobre las fuentes de iconos en WordPress

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Me gustan los iconos de redes sociales, lo admito. Tengo literalmente docenas de conjuntos de iconos para redes sociales que he recopilado en los últimos años, e incluso he creado algunos conjuntos propios para tratar de lograr ese ajuste perfecto para un proyecto en concreto.

Pero últimamente, he descubierto fuentes de iconos, y no he estado usando esos antiguos iconos de imagen en un tiempo.

¿Qué son las fuentes de iconos?

Imagina dingbats de todo tipo y estilo, iconos de redes sociales, iconos de sitios web, cualquier cosa que se te ocurra, solo que no son imágenes: en realidad son fuentes.

Eso es un gran problema porque con los iconos de imagen, se obtienen, bueno, imágenes estáticas. Es posible que tengas algunos tamaños diferentes de la misma imagen, pero realmente no puedes hacer nada con ellos que no sea usarlos tal cual.

Un icono que en realidad es una fuente es un animal completamente diferente. Si bien es cierto que estos iconos son más simples en apariencia, compensan su minimalismo al ser altamente personalizables. Con una fuente de iconos puedes cambiar fácilmente el tamaño y el color de uno de sus iconos (al igual que lo haces en las fuentes de texto!). Además, las fuentes de iconos tienen fondos transparentes que realmente funcionan en versiones antiguas de Internet Explorer, en el caso de que trabajar en una versión antigua de IE sea algo que tengas que tener en cuenta.

Otra ventaja es que pueden reemplazar los sprites CSS de imagen. El uso de una fuente de iconos personalizados con un número limitado de iconos funciona de forma similar a los sprites de imagen, pero te dan la capacidad de aplicar estilo a los iconos tal y como lo haces con el texto.

Si una fuente de icono funcionará mejor o no que los iconos de imagen en tu proyecto en particular depende de ti; ambos tienen pros y contras. Pero para nuestros propósitos, asumiremos que estás listo para probar fuentes de iconos y queremos saber cómo usarlas en un tema de WordPress.

Para nuestro tutorial, vamos a crear un pequeño conjunto de iconos de fuente de redes sociales para nuestro hipotético proyecto. Necesitaremos iconos para Facebook, Twitter y Pinterest, así que comencemos.

Generadores de fuentes de iconos personalizados

Existen un pequeño número de generadores de fuentes de iconos online que te permiten crear conjuntos de fuentes personalizadas solo para ti. Puedes crear fuentes personalizadas para cada proyecto; ¡es algo muy conveniente! Aquí vamos a utilizar la aplicación generadora de Icomoon, ya que ese es el servicio que he utilizado con más frecuencia.

El generador de fuentes de Icomoon es divertido y fácil de usar: puedes elegir entre una serie de fuentes de iconos de forma gratuita y otras que son comerciales. He encontrado que la calidad de las fuentes que ofrecen es muy alta. Incluso puedes cargar fuentes de iconos que encuentres en otro lugar, y utilizarlas en tu fuente personalizada. Muy práctico.

Creemos ahora nuestra fuente de icono de redes sociales personalizada. Asumo que nunca has hecho esto antes, pero no te preocupes si necesitas saltar adelante. Nos pondremos al día.

El tutorial apropiado

Crear tu conjunto de iconos personalizados

Inicia la aplicación Icomoon en tu navegador y esto es lo que verás:

De inmediato se carga el conjunto gratuito de fuentes básicas de Icomoon, y es posible que también veas algunas otras fuentes de iconos gratuitas. Te recomiendo que eches un vistazo también a los otros conjuntos que no han sido cargados, es posible que encuentres ahí algo que te guste. Para ver los otros conjuntos disponibles, desplázate hasta la parte inferior y haz clic en More Icon Sets (Más conjuntos de iconos).

En la siguiente pantalla, verás una cierta cantidad de otras fuentes gratuitas y comerciales (Entypo es un conjunto muy agradable que utilizo con frecuencia, simplemente para tu información). Para añadir cualquiera de estos a la ventana de selección principal, simplemente haz clic en el botón Add (Añadir) bajo dicho conjunto.

Una vez que estés de vuelta en la pantalla principal, y si quieres eliminar un conjunto, haz clic en el icono de menú en la parte superior derecha y luego en Remove Set (Eliminar conjunto).

Añadir tu propia fuente de iconos

Si tienes tu propia fuente de iconos, tal vez una que hayas obtenido de un cliente o descargado de otro sitio, puedes subirla haciendo clic en el botón Import Icons (Importar iconos) en la parte superior de la pantalla de selección y cargará los iconos en tu conjunto. Puedes realizar selecciones de fuentes desde este conjunto al igual que lo haces con los conjuntos de fuentes nativos de Icomoon.

Hacer tus selecciones

Para nuestro proyecto, estamos buscando iconos de redes sociales para Facebook, Twitter y Pinterest. Muchos de los conjuntos disponibles tienen algunos o todos estos iconos, así que ¿cómo elegir?

Elegir iconos del mismo conjunto es una solución fácil, si un conjunto que te gusta (y uno que se adapte a las necesidades de diseño del proyecto) tiene todos los iconos que necesitas, genial. Usa ese. A veces ese no es el caso, sin embargo, tal vez ese conjunto que te gusta no tiene ningún icono de Pinterest, o el de YouTube es un poco bizarro.

Si ese es el caso, elige una alternativa de diferentes conjuntos, pero ten cuidado, Icomoon utiliza un tamaño de cuadrícula base para cada una de sus fuentes de icono; para el conjunto Icomoon Free, el tamaño de la cuadrícula es 16. Obtendrás los mejores resultados (la apariencia más nítida) en un navegador cuando establezcas el tamaño de fuente igual a 16 o un múltiplo de 16.

Si miras el icono de fuente Entypo que mencioné anteriormente, verás que su tamaño de cuadrícula base es 20, lo que significa que tendrías que establecer tu tamaño de fuente en 20 o un múltiplo para obtener los resultados más nítidos. Si quieres mezclar iconos de conjuntos de diferentes tamaños de cuadrícula base, solo tendrás que comprobarlos en tu navegador para ver si la calidad de visualización es aceptable. Puedes ver los tamaños de cuadrícula de todas las fuentes de Icomoon haciendo clic en View More Fonts (Ver más fuentes) en la parte inferior de la ventana principal de la aplicación.

Teniendo en cuenta esta consideración, puedes utilizar la herramienta de búsqueda en la parte superior de la aplicación para buscar iconos por nombre para comparar varias versiones del mismo icono de redes sociales juntas.

Por supuesto, también puedes simplemente navegar por los conjuntos, que es una buena manera de perder una hora de tiempo.

Para elegir tus iconos, simplemente haz clic en ellos. Se añadirán automáticamente a tu conjunto. Cuando hayas terminado, haz clic en el botón Font (Fuente) en la parte inferior y verás todos los iconos listos para descargar. Haz clic en el botón Download (Descargar) para obtener tu nueva fuente personalizada perfecta y verás un cuadro de texto donde puedes nombrar tu fuente, por lo general los nombro de manera que el cliente lo entienda claramente; en este caso, lo llamaré 'tutorial'.

Recuperar las selecciones de tus proyectos

¿Qué sucede si creas esta fuente personalizada y después el cliente decide que quiere añadir, por ejemplo, Vimeo e Instagram a sus enlaces de redes sociales el próximo mes? ¿Tendrás que empezar de cero?

No, tú no.

En la descarga habrá un archivo selection.json que almacena todos los ajustes del proyecto. Todo lo que tienes que hacer es abrir la aplicación Icomoon y hacer clic en Import Icons (Importar iconos) para cargar el archivo JSON, y tus selecciones se mostrarán de nuevo. Añades los nuevos iconos, luego volves a crear la fuente y la descargas de nuevo.

Mostrar tu fuente de icono personalizada en tu tema de WordPress

Ahora llegamos a las partes de dificultad media.

Carga los cuatro archivos de la carpeta /fonts de la fuente personalizada en una carpeta /fonts del tema.

Abre el archivo style.css de tu fuente personalizada y copia el fragmento de @font-face que tenga el siguiente aspecto:

@font-face {
 font-family: 'tutorial';
 src:url('fonts/tutorial.eot?6npck9');
 src:url('fonts/tutorial.eot?#iefix6npck9') format('embedded-opentype'),
 url('fonts/tutorial.woff?6npck9') format('woff'),
 url('fonts/tutorial.ttf?6npck9') format('truetype'),
 url('fonts/tutorial.svg?6npck9#tutorial') format('svg');
 font-weight: normal;
 font-style: normal;
}

A continuación, en el archivo style.css de tu tema, pega este fragmento de código. Recuerda cambiar la URL donde estarán las fuentes en tu tema si utilizas algo distinto al directorio 'fonts'.

Insertar iconos individuales en tu código

Existen dos métodos principales de hacer esto; uno utiliza una clase para cada icono para agregarlos como pseudo-elementos (este es el que yo uso), y el otro utiliza un atributo de datos para agregarlos como elementos reales en el HTML.

Este es un ejemplo del uso del método clase-por-icono en una lista desordenada. Supongamos que vamos a tener una función que coloca una fila de iconos de redes sociales en la cabecera de tu tema, estas capturas de pantalla muestran algunos ejemplos de cómo podrías usar esto.

Entra en el archivo funciones.php de tu tema y añade este código:

<?php function my_header_elements() { ?>
<ul class="social">
 <li><a href="#"><span class="icon-twitter"></span></a></li>
 <li><a href="#"><span class="icon-pinterest"></span></a></li>
 <li><a href="#"><span class="icon-facebook"></span></a></li>
 </ul>
 <?php
}
add_action( 'hybrid_header', 'my_header_elements' );

A continuación, vuelve al archivo style.css de tu fuente de icono personalizado y copia el siguiente fragmento de código:

[class^="icon-"], [class*=" icon-"] {
 font-family: 'tutorial';
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;

/* Better Font Rendering =========== */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.icon-facebook:before {
 content: "\e600";
}
.icon-twitter:before {
 content: "\e601";
}
.icon-pinterest:before {
 content: "\e602";
}

Pega este fragmento de código en el archivo style.css de tu tema. Si todo va según lo planeado, ahora deberías tener tres iconos en tu cabecera, y podrás cambiar el color, el tamaño y otros atributos al igual que lo haces con un texto.

A veces Chrome tiene un problema al representar fuentes de iconos, si se ven entrecortados en Chrome, intenta reordenar tu fragmento de @font-face como en este siguientes SVG EOT:

@font-face {
 font-family: 'tutorial';
 src:url('fonts/tutorial.eot?6npck9');
 src:url('fonts/tutorial.eot?#iefix6npck9') format('embedded-opentype'),
 url('fonts/tutorial.svg?6npck9#tutorial') format('svg'),
 url('fonts/tutorial.woff?6npck9') format('woff'),
 url('fonts/tutorial.ttf?6npck9') format('truetype');
 font-weight: normal;
 font-style: normal;
}

El otro método para obtener iconos en el tema es mediante el uso de atributos de datos para insertarlos como elementos. No soy un gran fan de este método porque implica colocar el icono dentro del propio HTML, y creo que es más confuso. Pero aquí vamos, es posible que te guste un método más que el otro.

En el archivo functions.php, usarás atributos de datos como este:

<?php function my_header_elements() { ?>
<ul>
 <li><a href="#"><span aria-hidden="true" data-icon="&#e601;"></span></a></li>
 <li><a href="#"><span aria-hidden="true" data-icon="&#e602;"></span></a></li>
 <li><a href="#"><span aria-hidden="true" data-icon="&#e600;"></span></a></li>
</ul>
<?php }
add_action( 'hybrid_header', 'my_header_elements' );

Y en el archivo style.css de tu tema:

[data-icon]:before {
  font-family: 'tutorial';
  content: attr(data-icon);
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

Resumiendo

Ahora ya sabes los conceptos básicos de la creación y el uso de fuentes de iconos personalizados en tu tema de WordPress, no es algo demasiado complicado. Encuentra algunos iconos que te gusten y pruébalo en tu próximo proyecto.

Estos son algunos recursos para dar el siguiente paso. Quién sabe, es posible que tú mismo estés diseñando tu propia fuente de iconos en algún momento, por ejemplo si no puedes encontrar la fuente correcta para un proyecto concreto.

Recursos

Otros lugares para generar fuentes de iconos personalizadas:

Si deseas obtener más información sobre el uso de atributos de datos, CSS Tricks tiene una buena visión general.

Crear tus propios iconos de fuente

Cómo crear tu propio icono Webfont
Más complejo - Creación de una fuente de iconos personalizada para la Web