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.
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 .
- Revisa tu bandeja de entrada de correo electrónico. Deberías encontrar un mensaje con el asunto del equipo de Font Awesome.
- Abre el correo electrónico y haga clic en el botón azul .
- Te redirigirá a un formulario. Ingrese una contraseña en los campos y y haga clic en el botón azul .
- Verá el cuadro con algunos campos opcionales para su información personal. Rellene y haga clic en o déjelos vacíos y haga clic en .
- Se dirigirá a la pantalla administrativa de Font Awesome Kit. Haga clic en el botón 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 [] sitúate en
Extensiones/Plantillas/Plantillas. - Haz clic en “”
- Edita el archivo
- 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:
- Guarda y cierra el archivo
- Visita tu sitio y con la opción de “”
[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.
¡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 "":
- Esto te llevará a la página de detalles del icono de "". 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:
- 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:
- 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:
¡¡¡Enhorabuena!!!. Ya puedes utilizar los iconos de fuentes de Google relacionados con Covid-19 en cualquier sitio de tu web.