Introduction
Are you looking to add stylish social media icons to your website? In this tutorial, I’ll show you how to create hover-effect social media icons using only HTML and CSS—no JavaScript or external libraries required. This is a beginner-friendly project that boosts your frontend skills and can be easily customized for any portfolio or landing page.
What You’ll Learn
- How to create social media icons using Font Awesome
- Styling icons with CSS
- Adding smooth hover animations
- Responsive design techniques
Project Overview
You can find the source code for this project on my GitHub repo:
🔗 GitHub – Social Media Icons
Technologies Used:
✅ HTML5
✅ CSS3
Project Structure
scial-media-icons/ ├── index.html └── style.css
HTML Code (index.html)
Here’s how the basic structure looks:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Social Media Icons | Learn New Things</title>
<link rel="stylesheet" href="./style.css">
<script src="https://kit.fontawesome.com/22c625fc9a.js" crossorigin="anonymous"></script>
</head>
<body>
<ul>
<li>
<a href="#"> <i class="fa-brands fa-facebook-f icon"></i></a>
</li>
<li>
<a href="#"><i class="fa-brands fa-x-twitter icon"></i></a>
</li>
<li>
<a href="#"><i class="fa-brands fa-linkedin-in icon"></i></a>
</li>
<li>
<a href="#"><i class="fa-brands fa-youtube icon"></i></a>
</li>
</ul>
</body>
</html>
CSS Code (style.css)
The styling makes the icons interactive and centered:
body {
margin: 0;
padding:0;
background: #252432;
}
ul {
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
ul li {
list-style: none;
}
ul li a {
width: 80px;
height: 80px;
background-color: #fff;
text-align: center;
line-height: 80px;
font-size: 35px;
margin: 0 10px;
display: block;
border-radius: 50%;
position: relative;
overflow: hidden;
border: 3px solid #fff;
z-index: 1;
}
ul li a .icon {
position: relative;
color: #262626;
transition: .5s;
z-index: 3;
}
ul li a:hover .icon {
color: #fff;
transform: rotateY(360deg);
}
ul li a:before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #f00;
transition: .5s;
z-index: 2;
}
ul li a:hover:before {
top: 0;
}
ul li:nth-child(1) a:before{
background: #3b5999;
}
ul li:nth-child(2) a:before{
background: #161616;
}
ul li:nth-child(3) a:before {
background: #0077b5;
}
ul li:nth-child(4) a:before {
background: #ff1414;
}
Live Preview
Although there’s no live demo hosted, you can clone the repo and run the code locally in seconds. Here’s how:
git clone https://github.com/rukeshbabugantla143/scial-media-icons.git cd scial-media-icons open index.html
Customization Ideas
- Change icon colors based on brand identity
- Add animations like bounce or rotate
- Use tooltips for better accessibility
- Add your own social media links
Why Use This?
This kind of hover icon set is perfect for:
✅ Personal portfolios
✅ Agency websites
✅ Footer sections
✅ Landing pages
It’s a simple but powerful way to showcase your social presence in a visually appealing manner.
Conclusion
Adding hover-effect social media icons is a fun way to improve your frontend design skills. You can use this component in virtually any web project. Check out the GitHub repo, experiment with colors and animations, and take your UI game to the next level!
