How to include Social Media Icons in HTML ?
In this article, we will see how to add social media icons to any website using HTML and CSS
If you want to attach an icons then you need a font-awesome CDN link. Social media could be very helpful in promoting and advertising your website. If your brand has social media accounts, it would be wise to give the website visitors an opportunity to join them and share your posts in their timelines.
Note: You can either add Social Media icons as images( SVG, PNG ) or Font icon ( Font awesome ). In this article, explore both ways.
Method 1: To use Font Awesome Icons, add the following CDN link inside <head> section.
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
<a href="#" class="fa fa-facebook"></a>
Example 1: In this example, we are using font awesome icon (Google Icons and Bootstrap Icons).
Method 2: To use Google Icons, add the following link inside <head> section.
<link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons”>
Method 3: In this example, we are using SVG or PNG Images to an icon.
<svg class="bi bi-google" width="64" height="64" viewBox="0 0 16 16"> <path d=" "/> </svg>
Note: You can select SVG icon through various websites like heroicons, bootstrap icons etc. Bootstrap icon is used in below example
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.