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

Me gustan los iconos sociales, lo admito. Tengo literalmente docenas de conjuntos de iconos 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 particular.

Pero últimamente, he descubierto las fuentes de los íconos y no he estado usando esos íconos de imágenes antiguas por un tiempo..

¿Qué son las fuentes de iconos??

Imagine los dingbats de todo tipo y estilo: íconos sociales, íconos de sitios web, cualquier cosa que se pueda imaginar, solo que no son imágenes: en realidad son fuentes.

Eso es un gran problema porque con los iconos de imagen, obtienes, bueno, imágenes estáticas. Puede obtener diferentes tamaños de la misma imagen, pero realmente no puede hacer nada con ellos que no sean usarlos tal como están.

Un icono que en realidad es una fuente es un animal completamente diferente. Si bien es cierto que los iconos tienen una apariencia más simple, compensan su minimalismo al ser altamente personalizables. Con una fuente de icono, puede cambiar fácilmente el tamaño y el color de un icono (¡como las fuentes de texto!). Además, las fuentes de iconos tienen fondos transparentes que realmente funcionan en versiones anteriores de Internet Explorer, si es una consideración para usted trabajar en una versión antigua de IE.

Otra ventaja es que pueden reemplazar sprites de imagen CSS. El uso de una fuente de íconos personalizada con un número limitado de íconos funciona de manera similar a los sprites de imágenes, pero le brinda la posibilidad de estilizar íconos como el texto..

Depende de usted decidir si una fuente de ícono funcionará mejor o no que los íconos de imagen en su proyecto particular. Ambos tienen pros y contras. Pero para nuestros propósitos, asumiremos que está listo para probar las fuentes de iconos y desea saber cómo usarlas en un tema de WordPress.

Para nuestro tutorial, armaremos un pequeño conjunto de iconos de fuentes de redes sociales para nuestro hipotético proyecto. Necesitaremos iconos para Facebook, Twitter y Pinterest, así que empecemos.

Íconos personalizados generadores de fuentes

Hay un pequeño número de generadores de fuentes de íconos en línea que le permiten crear conjuntos de fuentes personalizados solo para usted. Puede crear fuentes personalizadas proyecto por proyecto; ¡Es tan conveniente! Aquí vamos a utilizar la aplicación del generador de Icomoon ya que es el servicio que he usado con más frecuencia.

El generador de fuentes de Icomoon es divertido y fácil de usar: puede elegir entre una variedad de fuentes de iconos gratis y otras comerciales. He encontrado que la calidad de las fuentes que ofrecen es muy alta. Incluso puede cargar las fuentes de iconos que encuentre en otros lugares y utilizarlas en su fuente personalizada. Muy útil.

Vamos a construir nuestra fuente personalizada icono de redes sociales. Voy a suponer que nunca has hecho esto antes, pero no te preocupes si necesitas avanzar. Nos pondremos al día.

El Tutorial Adecuado

Haciendo su conjunto de iconos personalizados

Inicie la aplicación Icomoon en su navegador y esto es lo que verá:

El conjunto gratuito de fuentes básicas de Icomoon está cargado, y es posible que también vea algunas otras fuentes de iconos gratuitas. Recomiendo echar un vistazo a los otros juegos que no se cargaron, también, ya que puede encontrar algo que le guste allí. Para ver los otros conjuntos disponibles, desplácese hasta la parte inferior y haga clic en Más conjuntos de iconos.

En la siguiente pantalla, verás una cantidad de otras fuentes gratuitas y comerciales (Entypo es un conjunto realmente bueno que uso con frecuencia, solo para tu información). Para agregar cualquiera de estos a la ventana de selección principal, simplemente haga clic en Añadir botón debajo de ese conjunto.

Una vez que haya vuelto a la pantalla principal, y si desea eliminar un conjunto, haga clic en el icono de menú en la parte superior derecha de la misma y luego Quitar conjunto.

Agregar su propia fuente de icono

Si tiene su propia fuente de icono, tal vez una que haya recibido de un cliente o que haya descargado de otro sitio, puede cargarla haciendo clic en Iconos de importación en la parte superior de la pantalla de selección y se cargarán los iconos en su conjunto. Puede hacer selecciones de fuentes de este conjunto al igual que los conjuntos de fuentes nativos de Icomoon.

Haciendo tus selecciones

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

Elegir todos los íconos del mismo conjunto es una solución fácil: si un conjunto que te guste (y que se ajuste a las necesidades de diseño del proyecto) tiene todos los íconos que necesitas, excelente. Usa esos Sin embargo, a veces ese no es el caso, tal vez el conjunto que te gusta no tenga un ícono de Pinterest, o el de YouTube es un poco squirrelly.

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

Si observa el ícono de fuente Entypo que mencioné anteriormente, verá que su tamaño de cuadrícula base es 20, lo que significa que tendrá que establecer su tamaño de fuente en 20 o un múltiplo de eso para obtener los mejores resultados. Si desea mezclar íconos de conjuntos de diferentes tamaños de cuadrícula base, solo tendrá que revisarlos en su navegador para ver si la calidad de la pantalla es aceptable. Puede ver los tamaños de cuadrícula para todas las fuentes Icomoon haciendo clic en Ver más fuentes en la parte inferior de la ventana principal de la aplicación.

Teniendo en cuenta eso, puedes usar la herramienta de búsqueda en la parte superior de la aplicación para buscar iconos por nombre y comparar varias versiones del mismo icono social..

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

Para elegir sus iconos, simplemente haga clic en ellos. Se añadirán a tu set automáticamente. Cuando hayas terminado, haz clic en Fuente botón en la parte inferior y verá todos sus iconos listos para descargar. Haga clic en el Descargar abotone para obtener su nueva fuente personalizada perfecta y verá un cuadro de texto donde puede asignar un nombre a su fuente. Por lo general, le pongo un nombre para que el cliente los mantenga en orden; En este caso, lo llamaré 'tutorial'.

Recuperar sus selecciones de proyectos

¿Qué sucede si crea esta fuente personalizada, entonces el cliente decide que quiere agregar, por ejemplo, Vimeo e Instagram a sus enlaces de redes sociales el próximo mes? ¿Tienes que empezar desde cero??

No tu no.

En su descarga habrá un selección.json Archivo que almacena todos los ajustes de tu proyecto. Todo lo que tienes que hacer es abrir la aplicación Icomoon y hacer clic Iconos de importación para cargar el archivo JSON, y sus selecciones se mostrarán de nuevo. Agregará los nuevos íconos, luego recreará la fuente y la descargará nuevamente.

Cómo obtener su fuente de icono personalizado en su tema de WordPress

Ahora llegamos a las partes semi-complicadas..

Sube los cuatro archivos en el / fuentes carpeta de su fuente personalizada a una / fuentes carpeta en tu tema.

Abre el style.css archivo en su fuente personalizada y copiar el @Perfil delantero Fragmento que se ve así:

@ font-face font-family: 'tutorial'; src: url ('fonts / tutorial.eot? 6npck9'); src: url ('fonts / tutorial.eot? # iefix6npck9') formato ('embedded-opentype'), url ('fonts / tutorial.woff? 6npck9') formato ('woff'), url ('fonts / tutorial. ttf? 6npck9 ') formato (' truetype '), url (' fonts / tutorial.svg? 6npck9 # tutorial ') formato (' svg '); fuente-peso: normal; estilo de letra: normal; 

Luego, en tu tema de style.css archivo, pegar este fragmento. Recuerde cambiar la URL donde estarán las fuentes en su tema si usa algo diferente al directorio de 'fuentes'.

Inserción de iconos individuales en su código

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

Aquí hay un ejemplo de cómo usar el método de clase por icono en una lista desordenada. Digamos que tendremos una función que coloca una fila de íconos sociales en el encabezado de tu tema: estas capturas de pantalla muestran algunos ejemplos de cómo puedes usar esto..

Entra en tu tema funciones.php Archivo y añadir este código:

 

Luego, vuelva al archivo style.css de su fuente de icono personalizado y copie el siguiente fragmento de código:

[class ^ = "icon-"], [class * = "icon-"] font-family: 'tutorial'; hablar: ninguno; estilo de letra: normal; fuente-peso: normal; Variante de fuente: normal; transformación de texto: ninguna; línea de altura: 1; / * Mejor representación de fuente =========== * / -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: escala de grises;  .icon-facebook: antes de contenido: "\ e600";  .icon-twitter: antes de contenido: "\ e601";  .icon-pinterest: antes de contenido: "\ e602"; 

Pega este fragmento en tu tema style.css expediente. Si todo va según lo planeado, ahora debería tener tres iconos en su encabezado, y puede cambiar el color, el tamaño y otros atributos como el texto.

A veces, Chrome tiene un problema al renderizar las fuentes de los íconos: si se ven entrecortados en Chrome, intente reordenar su @Perfil delantero Fragmento como este con SVG siguiendo EOT:

@ font-face font-family: 'tutorial'; src: url ('fonts / tutorial.eot? 6npck9'); src: url ('fonts / tutorial.eot? # iefix6npck9') formato ('embedded-opentype'), url ('fonts / tutorial.svg? 6npck9 # tutorial') formato ('svg'), url ('fonts / tutorial.woff? 6npck9 ') formato (' woff '), url (' fonts / tutorial.ttf? 6npck9 ') formato (' truetype '); fuente-peso: normal; estilo de letra: normal; 

El otro método para obtener iconos en su tema es mediante el uso de atributos de datos para insertarlos como elementos. No soy un gran fan de este método porque significa poner el icono dentro del propio HTML, y lo encuentro más confuso. Pero aquí vamos, puedes encontrarte como un método más que el otro..

En funciones.php, Usarás atributos de datos como este:

 

Y en tu tema style.css:

[icono de datos]: antes de font-family: 'tutorial'; contenido: attr (icono de datos); hablar: ninguno; fuente-peso: normal; Variante de fuente: normal; transformación de texto: ninguna; línea de altura: 1; -webkit-font-smoothing: suavizado; 

Terminando

Ahora ya sabe lo básico sobre cómo crear y usar fuentes de iconos personalizadas en su tema de WordPress, no es demasiado difícil. Encuentre algunos iconos que le gusten y pruébelo en su próximo proyecto..

Aquí hay algunos recursos para dar el siguiente paso. Quién sabe; es posible que en algún momento diseñe su propia fuente de icono, cuando no pueda encontrar la fuente adecuada para ese proyecto en particular.

Recursos

Otros lugares para generar fuentes de iconos personalizados:

  • Fontello
  • Fontástico
  • IconVault
  • Pictónica
  • Pictos

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

Rolling Your Own Icon Fonts

  • Cómo hacer tu propio icono Webfont
  • Más complejo: crear una fuente de iconos personalizada para la web