Implementa los iconos de fuentes de Google relacionados con Covid-19

Implementa los iconos de fuentes de Google relacionados con Covid-19

Si tienes la necesidad de informar o recomendar medidas de higiene o distanciamiento social usando iconos en tu sitio web, no busques más. Recientemente Google ha lanzado Font Awesome 5.13

Esta versión está compuesta únicamente en iconos relacionados con Covid-19. Su misión es ayudar a tu web a comunicar algunos de los consejos más vitales que los visitantes y clientes de tu web deben hacer para protegerse a sí mismos y a sus contactos.

En este artículo de mi blog, mostraré algunos de estos íconos que son gratuitos. También aprenderás cómo usarlos en su sitio de Joomla.

# ICONOS DE GOOGLE FONT AWESOME RELACIONADOS CON COVID-19.

Los 47 íconos sólidos de Font Awesome 5.13 están disponibles gratuitamente y son de código abierto, más otros 144 en la versión Pro. Ambos grupos de iconos están concebidos para ayudar a generar conciencia sobre cómo prevenir y combatir el virus COVID-19.

Úselos para comunicar una buena higiene y distanciamiento social, y con ello contribuir a que las personas puedan protegerse a sí mismas y a sus grupos sociales y laborales.

47 icon solid free

Ahora veamos en detalle algunos de estos iconos:

# CÓMO UTILIZAR LOS ICONOS DE GOOGLE FONT AWESOME CON ELEMENTOS DE CONTENIDO JOOMLA

REGISTRARSE PARA ADQUIRIR EL KIT GRATIS DE FONT AWESOME 5.13

  • Dirígete a la página de inicio de Font Awesome.
  • Escriba su dirección de correo electrónico en la caja de texto y haga clic en Enviar código kit.
  • Revisa tu bandeja de entrada de correo electrónico. Deberías encontrar un mensaje con el asunto Confirme la dirección de correo electrónico de su cuenta de Font Awesome del equipo de Font Awesome.
  • Abre el correo electrónico y haga clic en el botón azul Haga clic para confirmar su dirección de correo electrónico ....
  • Te redirigirá a un formulario. Ingrese una contraseña en los campos Nueva contraseña y Confirmar nueva contraseña y haga clic en el botón azul Establecer contraseña y continuar.
  • Verá el cuadro Conozcámonos mejor con algunos campos opcionales para su información personal. Rellene y haga clic en Todo listo. ¡Vamos! o déjelos vacíos y haga clic en No, gracias. Saltemos este paso por ahora.
  • Se dirigirá a la pantalla administrativa de Font Awesome Kit. Haga clic en el botón Copiar código del kit en la esquina superior derecha.

Bien hecho. Ya eres un usuario registrado free en Font Awesome. Estás listo para pasar al siguiente paso.

AGREGAR EL CÓDIGO SCRIPT A TU PLANTILLA JOOMLA

Lo siguiente será agregar el código de su script basado en Font Awesome CDN entre las etiquetas <head> de su plantilla de Joomla!.

Para mi demostración, he utilizado la instalación básica de Joomla con la plantilla de ejemplo Protostar y el editor de texto JCE. Si tu sitio Joomla! ejecuta una plantilla de otro proveedor, consulte la documentación de la plantilla o póngase en contacto con el desarrollador de la misma.

El procedimiento es el siguiente:

  • En la parte del administrador [backend] sitúate en Extensiones/Plantillas/Plantillas.
  • Haz clic en “Detalles y archivos de la plantilla …
  • Edita el archivo index.php
  • Pega el código que copió en el paso anterior <script src="https://kit.fontawesome.com/3d...5.js" crossorigin="anonymous"></script> entre las etiquetas <head> y </head> como se muestra en el siguiente gráfico:codigo01
  • Guarda y cierra el archivo index.php
  • Visita tu sitio y con la opción de “Herramientas para desarrolladores[Ctrl+May+I] del Chrome, puedes ver el código fuente de tu web y comprobar que el script que acabas de agregar, está entre las etiquetas <head>, como en mi ejemplo.codigo02

¡Buen trabajo! Ahora estás preparado para usar el conjunto de iconos basado en CDN de Google Font Awesome relacionados con Covid-19.

INCRUSTAR EL ICONO DESEADO EN EL CONTENIDO DE TU PLANTILLA JOOMLA

  • Vamos de nuevo a Font Awesome para ver la galería de iconos free covid-19.
  • Haz clic en el icono relacionado con Covid-19 que desees utilizar en tu contenido de Joomla. Yo he decidido elegir el icono de "people-arrows":
  • Esto te llevará a la página de detalles del icono de "people-arrows". Copia el código HTML <i class="fas fa-people-arrows"></i> de este icono haciendo clic en la etiqueta que hay en la parte superior de la página:icono01
  • Edita un elemento de contenido de Joomla (artículo o módulo), utiliza el modo de vista de código del editor de texto e inserta el código HTML del icono como mejor te parezca. En mi caso, he elegido el artículo de la página de inicio y he incluido en el código HTML del icono un factor de aumento:icono02
  • Guarda el elemento de contenido editado y verifíquelo en la vista del sitio. Debería ver el icono que se muestra como en mi ejemplo:icono03

¡¡¡Enhorabuena!!!. Ya puedes utilizar los iconos de fuentes de Google relacionados con Covid-19 en cualquier sitio de tu web.

Deja tu comentario

Estás comentando como invitado.
  • Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.


Construido por Eduardo Velasco 2021 ®
Icon made by Freepik from www.flaticon.com is licensed by CC 3.0 BY