Social Media Icons with Tooltip on Hover with HTML & CSS

Hello Coders, Welcome back. In this article we are going to learn how to create social media icons with Tooltip on hover using HTML and CSS.

What is Font Awesome?

Font awesome is a library of fonts and icons which we can directly import to our project and use them however you want. For example, In the above demo you can see that those social media icons are imported from font awesome.

What is the use of using Social Media Icons?

It has a lots of advantages, You can link your other social media handles and grow your audience from one platform to other platform

I have provided all the resources and source code in this article along with a step by step video tutorial.

Popup Social Media Icons with Hover Effect using HTML and CSS | Video Tutorial

Follow the above step by step video tutorial if you are a complete beginner and finding it hard to understand this article. 

Social media Icons with Tooltip on Hover in HTML and CSS | Free Source Code

I have provided the necessary HTML code and CSS code for you to follow along and build. You can also download the complete source code by clicking on the download button at the bottom of this article.

How do I create Social media icons with hover effect in HTML? Free HTML Source Code
Create an index.html. Define the boiler plate of the html document. Follow the below html code.

HTML Code : Below is the HTML code of this project. As I said we will be using Icons from the font awesome. I have included the import code in the head section of the code. Follow along with the html code step by step from top to bottom.

How do I design social media icons with hover effect in CSS? CSS Source Code
Designing is the most important thing here. So now lets start styling it and add the hover effect. Follow the below code.

CSS Code : Create a style.css file. We will need to use a custom font and we have imported from the google fonts. Follow the below css code and type it from the top to bottom and observe the changes it makes.

Its done, This is what you should get once done

Final Demo of Social media icons with hover effects :

Social Media Icons with Tooltip on Hover with HTML & CSS

Thank you for Reading this Article

Credits : Abdelrhman Said

Social Media Icons with Tooltip on hover using html and css | Download Source Code.

Post a Comment

Previous Post Next Post