Adding Social Media icons in HTML

If you are new to web development, you might have wondered how to add social media icons to your website to help expand its reach and connectivity. I figured out just few days ago-

There are various options, but I used a popular toolkit called Font Awesome.

Step 1:

To get started, open the link below-
https://fontawesome.com/

Step 2:

Click on start for free and enter your email id to receive a kit code. You will receive an email for confirmation and setting up your account.

Step 3:

You will be greeted with a kit code, which needs to be copied and pasted in the head section of your HTML.

Step 4:

You can now browse to any icons on the Font Awesome webpage. Select the icon you wish to use and copy the associated HTML code. You can use this code in your HTML page and would be able to see the icon that you wished to.

To increase or decrease the size of the icon you can just manipulate your code a little.

<i class="fab fa-twitter"></i>

The size of the above icon can be enlarged by -

<i class="fab fa-twitter fa-5x"></i>

or

<i class="fab fa-twitter fa-6x"></i>

Hope you get the idea!!!!

Comments

[Elena]

Svg icons are superior compared to font glyphs because you can use css selectors to get parts of the svg icon and style it differently. You can also have hover effects and animations of svg nodes.

[Anjali Jha]

Oh great to know that, Thanks!!!