Google Released Covid-19 Related Font Awesome Icons

Google Released Covid-19 Related Font Awesome Icons

Are you looking for icons to communicate good hygiene and social distancing in your existing or upcoming Joomla site? If the answer is yes, then you will be interested to hear that Google just released Font Awesome 5.13. 

This release focuses purely on Covid-19 related icons. Their goal is to help your site communicate some of the most vital things your site visitors and customers must do to protect themselves and their communities.

In this blog post, you will take a look at some of these icons which are free. You will also learn how to use them in your Joomla site.


Covid-19 related Google Font Awesome icons

In total, Google released 47 Free and 144 Pro Covid-19 related icons. In both sets, you will find symbols to communicate a message about vital hygiene and social distancing.

Here is my screenshot with the 47 free icons:

google released free 47 covid19 related icons

Let's take a look at some of them more closely.

Here is the user-nurse:

user nurse

Here is the people-arrows:

people arrows

And this is the hands-wash:

hands wash

This one is the head-side-mask:

head side mask

Here is the head-side-cough-slash:

head side cough slash

This one is the handshake-slash:

handshake slash

You get the picture.

For those who are new to using Google Font Awesome icons, let's take a look at how to use them in Joomla content items.

How to use Google Font Awesome icons with Joomla content items

Step #1. Sign up for the Google Font Awesome free CDN powered kit 

  • Visit this page.
  • Enter your email address and click "Send Kit Code":

click send kit code

  • Check your email inbox. You should find an email with the subject "Confirm Your Font Awesome Account Email Address" from the Font Awesome team:

you should receive confirm your font awesome email

  • Open this email and click on the blue "Click to Confirm Your Email Address ..." button:

click to confirm

  • You will be taken to the "Let's finish setting up" box. Enter a password in the "New Password" and "Confirm New Password" fields and click the blue "Set Password & Continue" button:

set password

  • You will see the "Let's Get to Know You Better" box with a few optional fields for your personal information. Fill them in and click "All set. Let's go!" or leave them empty and click "No thanks. Let's skip this step for now":

fill in or skip the lets get to know you better

  • You will be taken to your Font Awesome Kit administrative screen. Click on the "Copy Kit Code" button in the top right corner:

font awesome kit welcome screen

Good job. You are ready to move on to the next step.

Step #2. Add your Kit's code to your Joomla template

In this step, you will add the code of your Font Awesome CDN based kit between the <head> tags of your Joomla template. 

For my demonstration, I selected the Joomlashack Novitas template. If your Joomla site runs a template from another provider, please, consult the template documentation or contact the template's developer.

  • SFTP to your Joomla site with an FTP client of your choice
  • Go to /templates/js_novitas/template.php
  • Paste the code you copied in the previous step in between the <head> tag after the <w:head /> code:

insert the kit code

  • Save the template.php file
  • Visit your site and open the HTML source of the page you visited. You should see the Kit's code you just added displayed between the <head> tags:

the kit code present in html source code

Fantastic! You are now ready to start using Google Font Awesome CDN based icon kit, including the new Covid-19 related icons.

Step #3. Add the required icon

  • Visit the Font Awesome icon gallery
  • Click on the Covid-19 related icon you want to use in your Joomla content. For my demonstration, I decided to pick up the user-nurse icon:

user-nurse icon

  • This will bring you to the user-nurse icon page. Copy the HTML code <i class="fas fa-user-nurse"></i> of this icon at the top of the page:

copy the html of the user nurse icon

  • Open the HTML source code of your Joomla content item and insert the HTML code of the icon as you see fit:

insert the html code of the icon

  • Save this content item and check it on the frontend of the site. You should see the icon displayed:

user nurse icon displayed

What's Next?

You save $1000's when you sign up to Joomlashack's Everything Club.

You'll get access to all our extensions, templates, and Joomla training.

Click here to join the Everything Club