How to Add Social Media Icons in HTML

In this article, you learn how to add social media icons into HTML documents for an online presence.

Adding Social Media Icons into HTML Documents
Adding Social Media Icons into HTML Documents

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.

Project Breakdown

We will be adding Social Media Icons to the Navbar of the Site below.

Img 1.png

Here is the code for it.

Img 2.png

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.

Img 3.png

To create your own kit, create an account with Font Awesome.

Img 4.png

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.

Img 5.png

Adding a Kit

Once you are done, setting up the account, Login to your account and select Add New Kit.

Img 6.png

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.

Img 7.png

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.

Img 8.png

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.

Img 9.png

Img 10.png

These are the available icons for twitter. Click on the icon you want to get the code for it.
Img 11.png

Copy that code and add it to your list items on your HTML as shown below.

Img 12.png

Search for the other icons and add them into your HTML and save your project. Here is the final result.

Img 13.png

As you can see, the navbar looks much better with the icons.

Good job!

Summing Up

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 : )

Table of Contents
Great! Next, complete checkout for full access to GeekBits.
Welcome back! You've successfully signed in.
You've successfully subscribed to GeekBits.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info has been updated.
Your billing was not updated.