DEV Community

Cover image for Adding Social Media icons in HTML
Anjali Jha
Anjali Jha

Posted on

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:

pic
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>
Enter fullscreen mode Exit fullscreen mode

The size of the above icon can be enlarged by -

<i class="fab fa-twitter fa-5x"></i>
Enter fullscreen mode Exit fullscreen mode

or

<i class="fab fa-twitter fa-6x"></i>
Enter fullscreen mode Exit fullscreen mode

Hope you get the idea!!!!

Top comments (2)

Collapse
 
violet profile image
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.

Collapse
 
anjalijha22 profile image
Anjali Jha

Oh great to know that, Thanks!!!