In this digital age, having an online presence is very crucial for businesses. Through social media, you get to connect with more people who can become potential clients if you are business oriented. Integrating Social media icons on your website will provide potential clients an easier way to get in touch with you on various platforms.
One easy way to integrate social media icons on your site is using Font Awesome, a scalable vector icon library. Font awesome offers a wide range of icons that can be used into your projects including social media icons. This make it a convenient choice for web designer and developers.
Let's see how we can add social media icons in HTML using Font Awesome.
We will be adding Social Media Icons to the Navbar of the Site below.
Here is the code for it.
As you can see, currently, we have an unordered list that holds the list items (The social media names). I won't go deep into styling because that is not the reason you are here.
Let's see how to convert those social media names into their respective icons.
Adding Social Media Icons using Font Awesome
Include Font Awesome in Your Project:
Before you can use Font Awesome icons in your HTML document, you must include the font awesome library.
As of the publishing date of this article, the current version of font awesome is
@ version 6.5.1. With this version of font awesome, the easiest way to get started is by creating your own kit (you personal CDN)
A Font Awesome kit is the place that helps you manage all your icons for your project. With a kit, you can also add your own icons.
To create your own kit, create an account with Font Awesome.
Enter your email address and agree to the terms of service then click
Send Kit Embed Code
Head to your emails to continue setting up your account.
Adding a Kit
Once you are done, setting up the account, Login to your account and select
Add New Kit.
In the free tier, you can only add one kit. To add more kits, you must upgrade to a pro level plan. For this demonstration, we are good with one kit.
Once you have created a kit, copy the script tag in the easy installation guide.
This is the script we add to the header of our HTML file.
Adding the Font Awesome Library to our HTML
Open you HTML document and add this script to the head of you code as shown below.
With the script in place, we can now use the icons in our code. Let's try
Adding icons in our HTML
With the CDN script in place, let's find the icons we will use in this project and add them to our project.
Head over to the icons section on the font awesome website.
On the search bar, type the icon you want and press
Enter key. In this case, we will start with Twitter X.
These are the available icons for twitter. Click on the icon you want to get the code for it.
Copy that code and add it to your list items on your HTML as shown below.
Search for the other icons and add them into your HTML and save your project. Here is the final result.
As you can see, the navbar looks much better with the icons.
In this article we have looked at how you can add social media icons into HTML documents using the font awesome library. This way you increase you chances to land a client by making it easy for them to contact and follow you.
if you found the article helpful, consider sharing the article with interested parties.
Thank you for reading : )