How To Add Social Media Icons In HTML
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Ashish
In this tutorial we will show you how to add social media icons in HTML, there are generally many ways to add social media icons in your html page. By adding social media icons, the webpage or website seems to be more attractive or socialized according to modern time.
All this is a way to link your social platforms to your webpage as a reason to sponsors or anything else according to editor’s choice.
Step By Step Guide On How To Add Social Media Icons In HTML :-
1. By using font awesome iframes
As general, we know fontawesome is mainly known as to provide free icons, sorry for known as to provide free use of icons in our webpage.
Hence, with the help of fontawesome, we are able to add icons in our webpage. For this, we have to go fontawesome official website and have to search for icons what we want to use.
After clicking on it, we have to copy the code that starts with <i> and ends with </i>. The first opened tag has also some additional classes in it. A general use of image tag with the help of codes is given here.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<i class="fa-brands fa-paypal"></i>
<i class="fa-brands fa-amazon-pay"></i>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- But, here before closing head tag, we have to add a link, which is the link of fontawesome cdn. For this search only fontawesome cdn on google and from cdnjs website copy first link by clicking on second icon. Now, paste it in head tag.
- Here, we use an example of PayPal or amazon-pay. You also can know about this by seeing the HTML code because the icon name is also mostly embedded between lines of codes which you copy from font awesome.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Now, here we have to paste the codes which we copy from fontawesome website. These codes are for your specific icons which we want to show.
- Now, open this HTML code on your browser, but before this you must have an internet connectivity to your desktop because it works with online sources only.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last, we can insert any icon in the html webpage, here we use an example of PayPal and amazon pay. But with your creativity skills you able to do as such things you want. I hope this tutorial on how to add social media icons in HTML helps you.
About Ashish
