En el inicio, los iconos estaban siempre disponibles, pero implementarlos de forma eficiente en WordPress era un poco más difícil. Se podían solucionar algunos problemas con los sprites, pero no siempre fueron una buena forma de avanzar, y cuando empezaron a aparecer las pantallas de retina, el problema se amplió (literalmente).
Una de las soluciones más comunes de este problema era el uso de icon font. Los iconos son fuentes o vectores en la red, así que uno puede escalarlos de forma infinita y muchos iconos pueden entrar en un solo archivo, reduciendo considerablemente el conteo de peticiones. Esto le permite utilizar casi cualquier icono que se pueda imaginar. Sin embargo, con esto, también vienen algunas consideraciones de desempeño.
Le mostraremos en este artículo un par de formas en las que puede utilizar icon fonts de WordPress, dónde conseguirlos, y cuál podría ser el mejor método para su sitio.
- ¿Dónde Encontrar los Icon Fonts?
- Las Formas Más Rápidas y Sencillas para Utilizar Icon Fonts
- Problemas de Desempeño a Considerar con Icon Fonts
- Alojar Icon Fonts Localmente (Solo los que Necesita)
- Preocupaciones con la Accesibilidad de Icon Fonts
¿Dónde Encontrar los Icon Fonts?
Hay muchos excelentes lugares para encontrar icon fonts para su sitio de WordPress. Sólo escriba “icon font” en Google y este le brindará algunos buenos resultados. Uno de los más populares y más usados es Font Awesome. Al momento de que se escribiera este articulo, dicho font tenia más de 1,400 iconos gratuitos, y también, más de 4,500 iconos en su versión pro. Este incluye iconos de casi todo, desde los de interfaz, sociales, flechas, y muchos otros tipos de icono.
Aquí hay otros que puede chequear:
- IcoMoon es otro servicio popular con más de 5,00 iconos de vector gratuitos y más de 4,000 iconos premium. De hecho, estaremos usando una herramienta generadora de icon font más adelante.
- Fontello es otro excelente servicio que le ayudará a descubrir y construir icon fonts.
- Si está buscando un conjunto de iconos súper livianos, asegúrese de verificar Bytesize. Sus 84 iconos miden unos 9KB minimizados (2 KB en SVGZ o Gzipped).
- Si quiere utilizar iconos SVG manualmente, no encontrará una mejor biblioteca que la de iconmonstr o una mejor biblioteca premium que la de Iconfinder.
Las Formas Más Rápidas y Sencillas para Utilizar Font Icons de WordPress
Primero, nos adentraremos en algunas de las formas más rápidas y sencillas para usar font icons de WordPress. Sólo una advertencia, no todas estas son las mejores tratándose de desempeño. Para esto, le recomendamos saltarse a la sección del mejor método.
Opción 1 – Utilice el Plugin de WordPress
La forma más rápida para comenzar a utilizar los font icons de WordPress es simplemente usando un plugin externo. El plugin gratuito de Font Awesome Integration contiene la más reciente biblioteca de iconos de Font Awesome 5. Después de instalarlo y activarlo, lo único que requiere es un simple shortcode para insertar el icono. Incluso, ¡ya cuentan con un icono de WordPress! Genial.
Puede chequear la tabla de uso básico de Font Awesome 5 para descubrir formas adicionales para utilizar y personalizarlo, al igual podrá encontrar su biblioteca de iconos. Por ejemplo, en la parte de abajo insertamos el icono de Font Awesome de WordPress en un bloque de shortcode de Gutenberg agregamos fa-3x para hacerla 3 veces más grande.
[fawesome iclass="fab fa-wordpress fa-3x"]
Así es como se ve en el front-end. Bastante sencillo, ¿no? Tenenemos un icono de Font Awesome funcionando en nuestro sitio en tan sólo unos minutos.
Si lo que usted quiere es un montón de shortcodes sencillos de usar, podría ver el plugin de Shortcodes Ultimate. Ellos tienen un addon de iconos premium que puede utilizar.
Lo anterior es una excelente solución si quiere que sus clientes agreguen iconos a publicaciones o páginas, pero si quiere utilizar estos elementos dentro de su tema o plugin es mejor ponerlos en la fila usted mismo (hablaremos un poco más de esto más adelante).
Opción 2 – Utilice los Dashicons Ya Incluidos
Dashicons es un conjunto de iconos incluidos por omisión, ya que WordPress los utiliza en el backend. Usted necesitará ponerlos en la fila del front-end, pero lo único que necesitará será el nombre del script, el archivo ya se encuentra disponible en WordPress.
Puede agregar lo siguiente a su archivo functions.php o nosotros recomendamos utilizar un plugin gratuito como Code Snippets. Esto minimiza el riesgo de romper su tema y los cambios también serán persistentes a lo largo de las actualizaciones de tema.
function my_theme_styles() {
wp_enqueue_style( 'dashicons' );
}Luego puede ir al sitio web de Dashicons, seleccionar un icono y dar clic en enlace de “copiar HTML” el cual la dará el código que usted necesita para mostrar el icono. No tienen una amplia selección, pero aún así funcionan muy bien y son muy livianos.
<h2 class="dashicons-before dashicons-smiley">My Cool Headline</h2>Por ejemplo, en la parte de abajo insertamos el icono de dashboad en un bloque de HTML de Gutenberg.
Así es como aparece en el front-end.
Dashicons no tiene shortcodes geniales de inmedito, pero puede personalizar el tamaño de sus iconos con CSS. Aquí le dejamos un ejemplo de cómo se inserta un icono justo antes del encabezado.
<h2 class="dashicons-before dashicons-smiley">My Cool Headline</h2>Opción 3 – Manualmente Enlazarlo a un Icon Fonts Alojado Externamente
Su tercera opción es enlazar manualmente a icon fonts externamente alojado. Esto es esencialmente lo que el plugin en la opción anterior hace detrás de escena.
Para Font Awesome, usted puede agarrar el código de su página de Inicio y luego seguir los siguientes pasos. Ellos le alojarán a todos sus fonts (fuentes) en CDN, completamente gratis. Lucirá de esta manera:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-xxxxx" crossorigin="anonymous">Paso 1
Copie el código en elHeadde cada plantilla o página en su sitio de WordPress donde quiera utilizar Font Awesome. Puede editar el archivo de header.php de su tema o mejor aún, seguir nuestro simple tutorial sobre cómo agregar código a su encabezado.
Paso 2
Luego pude empezar a colocar iconos en el bodyde su HTML. Encuentre el icono correcto y aprenda cómo agregarlo a su página.
Problemas de Desempeño a Considerar al Usar Icon Fonts
Mientras que no hay nada malo en utilizar una de las formas anteriores para agregar icon fonts a su sitio, técnicamente, tampoco son la mejor forma de hacerlo. ¿Por qué? Todo está relacionado a problemas de desempeño.
Probablemente No Necesitará Todos Estos Iconos
En primer lugar, cuando use un plugin para las fuentes de iconos o un enlace a una biblioteca de fuentes de iconos externa, cargará todos los iconos de toda la biblioteca. Si solo está usando 20 o más iconos en todo su sitio, esto se puede manejar de una manera mucho mejor.
Por ejemplo, hemos incluido la biblioteca de Font Awesome 5 en nuestro sitio y mientras que el archivo CSS para este es pequeño archivo de fuente en sí, es de 108 KB. Mientras que esto podría parecer poca cosa, podrá ver más adelante, qué tan pequeños pueden ser estos archivos cuando sólo elegimos los Fuentes HTML que realmente utilizaremos.
Cargar de una CDN Es Usualmente Más Rápido
Segundo, no hay nada de malo en cargar scripts de distintas CDNs. Sin embargo, si usted tiene la opción de cargarlo de una CDN, esto es usualmente más rápido. ¿Por qué? Porque este toma ventaja de una sola conexión HTTP/2 y reduce las búsquedas adicionales de DNS. ¡Sólo asegúrese de que su CDN principal sea una buena!
Alojar Icon Fonts Localmente (Solo los que Necesita)
Por las razones de desempeño antes mencionadas, le guiaremos para que pueda alojar a sus icon fonts, como también a cómo utilizar sólo los que necesita. Al decir localmente, nos referimos a cargarlos del servidor de su host de WordPress o en su propia CDN.
Al elegir, sólo los icon fonts que usted necesita, esto puede reducir el tamaño del archivo de 100 KB a unos cuantos kilobytes, ¡bastante útil! Aún mejor: puede mezclar y emparejar iconos de varios conjuntos de fuentes.
Los Básicos – ¿Cómo Funciona?
El usar un font icon involucra hospedar al archivo de la fuente (WOFF, WOFF 2, etc.) en el servidor web, luego utilizar el CSS para cargar la cara de la fuente, luego crear algunas marcas para agregar los iconos a su lugar correcto.
Mientras que su sitio cargará un solo archivo, usted terminará teniendo un gran número de formas de archivo para cada fuente ya que algunos navegadores utilizan distintos formatos. Font Awesome tiene 6 distintos formatos de archivo, incluidos: EOT, SVG, TTF, WOFF, WOFF 2 y OTF. Sin embargo, basado en el soporte del navegador, realmente sólo necesita WOFF o WOFF 2.
Consejo: WOFF es soportado por más del 93% de todos los navegadores modernos. Sin embargo, WOFF 2 ha sido compreso aún más, pero sólo es soportado por un poco más del 83% de los navegadores modernos. Nosotros recomendamos elegir uno o el otro o los dos. El navegador determinará, basado en su código, cuál entregará al cliente.
Su primera tarea es utilizar una herramienta para elegir sólo los iconos que usted quiera. Luego, puede agregar estos archivos al directorio de su proyecto en algún lado, típicamente en un directorio de fuentes.
Luego, usted debe agregar el archivo CSS de Font Awesome a su proyecto y agregarlo a su sitio web, utilizando un antiguo elemento regular de un enlace.
<link rel="stylesheet" href="css/font-awesome.min.css">También puede poner en fila el archivo CSS o si es muy pequeño, simplemente utilizarlo en la línea.
Si ve el archivo CSS podrá ver lo que está pasando en el fondo. Los archivos de la fuente son cargados, el elemento básico con la clase de .fa es definido (junto con algunos otros), y finalmente, cada icono con nombre es definido (por ejemplo: .fa-book).
Lo único que tiene que tener en cuenta es la trayectoria de los archivos de sus fuentes. Por defecto, estos son cargados desde ../fonts que será el directorio de las fuentes, un folder arriba del actual archivo de CSS. Es probable que tenga que cambiar esto para que entre en su propia estructura de directorio.
Ahora que tiene una mejor idea de como funciona, le guiaremos, paso a paso, para que aprenda a hacer esto. En este ejemplo, usaremos un sitio de producción de ecommerce.
Paso 1
Primero, usted debería determinar qué biblioteca de font icon querrá usar. Hemos compartido algunas que nos gustan al principio de este articulo. En este ejemplo, estaremos utilizando Font Awesome junto con el generador de fuentes de IcoMoon. Si quiere los archivos de WOFF 2 de IcoMoon, tendrá que pagar un solo pago de $9.00 para obtener acceso a su biblioteca premium.
Puede descargar manualmente, todos los iconos de Font Awesome que desee sin costo alguno, pero usted necesitaría utilizar una herramienta como FontForge para editar manualmente su archivo WOFF o WOFF 2. Nos gusta simplificar las cosas, así que utilizaremos un generador.
Paso 2
Vaya al generador de IcoMoon. Nosotros le dimos clic en “Add” en la biblioteca de Font Awesome.
Paso 3
Luego, usted querrá elegir los iconos que quiera utilizar en su sitio de WordPress. Si ya está utilizando Font Awesome y se está simplemente pasando a versiones localmente alojadas, termine esto y haga una pequeña lista, luego elíjalas de la biblioteca.
En este ejemplo, estaremos eligiendo iconos para perfmatters.io, un sitio de ecommerce de WordPress, el cual utiliza Easy Digital Downloads.
Paso 4
Una vez que haya elegido todos sus iconos, elija “Generate Font” que se encuentra en la parte de abajo. Para este sitio, terminamos utilizando 20 iconos.
Terminará con unos archivos que lucirán así. Los importantes que necesitará son el archivo style.cssy los archivos de fuente (WOFF, WOFF 2).
Paso 5
Luego, se recomienda que lleve a cabo un find and replace (buscar y reemplazar) en el style.css antes de subirlo/copiarlo a su sitio. Así es como luce el original.
Para aquellos que ya se encuentren utilizando Font Awesome, simplemente, esto hace que sea más sencillo cambiar las cosas sobre las de Font Awesome, de esta forma, si ya había algo codificado en su sitio de WordPress usando este, automáticamente empezará a utilizar los iconos.
Así que utilice la parte de Find para encontrar “icon” y reemplácelo con todas las ocurrencias con “fa”. Podrá hacer un find and replace rápido con un editor de texto como Sublime.
Esto reemplaza [class^="icon-"], [class*=" icon-"] with [class^="fa-"], [class*=" fa-"]. Esto también arregla cada icono, así que en lugar de empezar con .icon-, ahora empieza con .fa-.
También podría necesitar cambiar la URL fuente, basada en donde subió sus archivos de fuente en el Paso 7. Nosotros recomendamos cambiar la URL a la de su CDN.
Paso 6
Luego, necesita agregar el CSS a su sitio. Hay un par de formas de como puede hacer esto.
Opción 1
Ya que la cantidad de CSS es muy pequeña, usted podría copiar todos los archivos de CSS y pegarlos en el WordPress Customizer. Nunca haga esto para archivos grandes, pero esta es una relativamente pequeña cantidad de CSS. Esto quiere decir que cargará en línea en su sitio.
Opción 2
Usted podría enlazarlo manualmente a su stylesheet al colocarlo en el encabezado de su sitio de WordPress. Sugerencia: Enlácelo a su propia CDN para tener un desempeño más rápido.
<link rel="stylesheet" href="https://cdn.yourdomain.com/fonts/style.css">Opción 3
También podría poner en fila el archivo CSS en WordPress. El proceso es muy similar a la forma manual. Agregue lo siguiente al archivo de functions.php de su tema, o utilice el plugin gratuito de Code Snippets plugin. A lo mejor necesite cambiar el directorio basado en el lugar donde lo haya subido.
function my_theme_styles() {
wp_enqueue_style( 'FontAwesome', get_template_directory_uri() . '/css/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_styles' );Paso 7
Ahora que tiene el CSS agregado a su sitio, es tiempo de subir los archivos de fuentes. Puede poner las fuentes en cualquier lado, está bien meterlo a un folder llamado “fonts” en su /public. Pero recuerde, el folder fuente en su archivo style.cssnecesita coincidir.
Paso 8
Ahora su sitio de WordPress debería tener accesibles su CSS y archivos de fuente. Así que puede agregar una marca a su sitio. Esto tan sólo es un ejemplo de como agregar un icono de un engrane.
<i class="fa fa-cog"></i>Puede ver un ejemplo en vivo de esto funcionando en perfmatters.io. Tenga en mente de que puede utilizar cualquier elemento, no sólo la i . También puede utilizar elementos span, todo esto además de agregar el CSS a sus clases personalizadas.
La diferencia real es cuando uno da un vistazo a la diferencia de tamaño. Recuerde, cuando enlazamos a la biblioteca externa de Font Awesome, el tamaño total del archivo de la fuente era de 108 KB. Después de utilizar un generador de fuente y sólo elegir los iconos de Font Awesome que necesitábamos para el sitio, redujo a 2.6 KB el tamaño del archivo de la fuente. ¡Nuestro archivo de fuente redujo en tamaño por un sorprendente 97.59%!
Y no sólo eso, sino que ahora carga desde nuestra CDN, lo que quiere decir que no habrá búsquedas adicionales de DNS para fontawesome.com
También puede usar este mismo enfoque con iconos SVG, que es un poco distinto.
Preocupaciones con la Accesibilidad de Icon Fonts
Un aspecto negativo de icon fonts es su terrible accesibilidad. Lectores de pantallas podrían saltárselos, o peor aún, leer el unicode o el mismo carácter. Esto resultaría en que la gente con deficiencia visual escuche “favoritos de yellow star” cuando llegue al articulo de su menú de favoritos – no es ideal. También debe tomar en cuenta qué sucede si las fuentes no cargan.
Idealmente, usted querrá que iconos decorativos simplemente desaparezcan cuando no carguen y que los iconos críticos sean reemplazados con texto si es que hay algún problema.
El problema de accesibilidad es fácil de resolver, simplemente utilice el parámetro y valor aria-hidden=”true” para indicar a los lectores de pantalla que deberían descartar nuestro elemento.
<span class="icon icon-star" aria-hidden="true"></span> My FavouritesEn una implementación más completa, también puede utilizar Modernizr para probar el soporte de font face. Simplemente necesita modificar un poco el CSS, vea este excelente artículo de Bulletproof Font Icons para obtener información más detallada.
Para obtener más información sobre como crear iconos críticos con texto de respaldo, también le recomendamos leer el articulo de arriba, ellos han explicado y resuelto el problema de la mejor forma posible, pero el implementarlo se encuentra un poco fuera del alcance de este artículo.
Resumen
Eso es todo con los icon fonts. Ahora ya tiene un par de formas distintas para obtener fácilmente icon fonts en su sitio de WordPress, junto con la mejor forma de implementarlos cuando se trata de desempeño.
Siempre le recomendamos utilizar un generador de fuente para construir un icon font que consiste sólo de estos iconos que usted utiliza. ¡Esto hará que su tema sea un poco más directo y consistente! Si tiene una biblioteca o generador favorito que no hayamos mencionado déjenos saber. ¡Hay varios muy buenos en el mercado! Además, asegúrese de leer nuestra guía detallada sobre las fuentes de WordPress.
Brian tiene una gran pasión por WordPress, lo ha estado utilizando durante más de 10 años e incluso ha desarrollado un par de plugins premium. Brian disfruta de los blogs, las películas y el senderismo. Conéctese con Brian en Twitter.
Deja una respuesta