Javatpoint Logo
Javatpoint Logo

How to add Social Media Icons in Html

If we want to add social media icons in the Html document using the Internal CSS, to show them on the web page then we have to follow the steps which are given below. Using these simple steps, we can easily add the social media icons.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want add the icons of social media.

Step 2: Now, we have to place the cursor in the head tag just after the title tag of the Html document and then define the <style> tag as shown in the following block.

Step 3: And, then we have to use the following code between the closing and opening of <style> tag.

Step 4: When we added the above code successfully, then we have to link the css file in the <head> tag.

Step 5: And, then we have to use the following code in the <body> tag of Html document.

Step 6: And, at last, we have to save the Html file and then run the file in the browser.

Test it Now

The output of above Html code is shown in the following screenshot:

How to add Social Media Icons in Html

Add Sticky Social Media Icons

If we want to add the sticky social media icons in the Html document using the Internal CSS and Html code, to show the icons on the web page then we have to follow the steps which are given below. Using these simple steps, we can easily add the sticky social media icons.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want add the sticky icons of social media.

Step 2: Now, we have to place the cursor just after the <title> tag in the <head> tag of the Html document and then attach the CDN link. So, we have to type the following <link> tag in the <head> tag.

Step 3: Now, we have to design the structure of sticky media icons using the CSS code. So, we have to add the code as shown in the following block just after the <link> tag in the Html document.

Step 4: Now, we have to add the following code in the <body> tag.

Step 5: And, at last, we have to save the Html file and then run the file in the browser.

Test it Now

The output of sticky social media icons is shown in the following screenshot:

How to add Social Media Icons in Html




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA