84 views
How to add Social Media Icons in Html
To add social media icons in HTML, you can use icon libraries or include individual icons using HTML and CSS. Here’s an example of how you can add social media icons using Font Awesome, a popular icon library:
- Include Font Awesome in your HTML file. You can either download the Font Awesome files and host them locally or use a CDN (Content Delivery Network) to include them. Here’s an example using the CDN approach:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<!-- Your HTML content goes here -->
</body>
</html>- Add the social media icons using appropriate HTML elements. Here’s an example of adding Facebook, Twitter, and Instagram icons:
HTML
<div class="social-icons">
<a href="https://www.facebook.com"><i class="fab fa-facebook-f"></i></a>
<a href="https://www.twitter.com"><i class="fab fa-twitter"></i></a>
<a href="https://www.instagram.com"><i class="fab fa-instagram"></i></a>
</div>- Apply CSS to style the social media icons as desired. For example, you can adjust the size, color, and spacing of the icons:
CSS
.social-icons a {
display: inline-block;
margin-right: 10px;
color: #000;
font-size: 24px;
}
.social-icons a:hover {
color: #ff0000; /* Change the color on hover */
}In the example above, we wrap each social media icon with an <a> tag and use the appropriate Font Awesome classes (fab for brands and fa-[icon-name] for the specific icon) to display the icons. Adjust the URLs in the href attribute to link each icon to the respective social media profiles.
Feel free to explore other icon libraries or custom icon sets to choose the icons that best suit your needs.