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:
Let's take a look at some of them more closely.
Here is the user-nurse:
Here is the people-arrows:
And this is the hands-wash:
This one is the head-side-mask:
Here is the head-side-cough-slash:
This one is the 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":
- Check your email inbox. You should find an email with the subject "Confirm Your Font Awesome Account Email Address" from the Font Awesome team:
- Open this email and click on the blue "Click to Confirm Your Email Address ..." button:
- 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:
- 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":
- You will be taken to your Font Awesome Kit administrative screen. Click on the "Copy Kit Code" button in the top right corner:
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:
- 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:
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:
- 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:
- Open the HTML source code of your Joomla content item and insert the HTML code of the icon as you see fit:
- Save this content item and check it on the frontend of the site. You should see the 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.