Social Icons with Circular Profile Pic in CSS

Social Icons with Circular Profile Pic in CSS
Code Snippet:Social icon animation
Author: Brian Phillips
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 221
License: MIT
Edit Code online: View on CodePen
Read More

This CSS and JavaScript code creates circular profile pictures with animated social media icons on hover. The CSS styles the profile picture and icons, while JavaScript handles their animation. It’s useful for showcasing social links with engaging visual effects.

You can use this code on personal websites or portfolios. It helps display profile pictures with interactive social media icons. Moreover, you can customize the icons with additional CSS according to your needs.

How to Create Social Icons with Circular Profile Pic In CSS

1. First of all, load the Font Awesome CSS, Normalize CSS, and Prefixfree JS by adding the following CDN links into the head tag of your HTML document.

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

2. Create the HTML structure for your profile picture and social icons. Use the code as a template and replace the social media links with your own. Ensure each <a> tag corresponds to the respective social icon.

<img class="me" src="https://www.codehim.com/wp-content/uploads/2023/06/Asif-Mughal-codehim-Author.png" alt="Asif Mughal" />

<div class="social">
  <a href="https://twitter.com/bphillips201"><i id="twitter" class="icon-twitter"></i></a>
  <i id="github" class="icon-github"></i>
  <i id="stack" class="icon-stackexchange"></i>
  <i id="linkedin" class="icon-linkedin-sign"></i>
  <i id="code" class="icon-code"></i>
  <i id="plus" class="icon-google-plus-sign"></i>
  <i id="mail" class="icon-envelope"></i> 
</div>

3. Now, style the profile pic and social icons using the following CSS code. Adjust the CSS classes to match your design preferences. You can modify colors, sizes, and positioning to align with your website’s theme.

.me {
  display: block;
  margin: 2em auto;
  margin-bottom: 3em;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: relative;
  z-index: 2;
}

.social {
  text-align: center;
  font-size: 2.5em;
  color: #555;
  overflow: hidden;
}
.social a {
  color: inherit;
  text-decoration: none;
}
.social i {
  margin: 0.3em;
  cursor: pointer;
  transition: color 300ms ease, margin-top 300ms ease;
  transform: translateZ(0);
}
.social i:hover {
  margin-top: -1px;
}
.social i#twitter:hover {
  color: #77DDF6;
}
.social i#github:hover {
  color: black;
}
.social i#linkedin:hover {
  color: #0177B5;
}
.social i#code:hover {
  color: #29A329;
}
.social i#stack:hover {
  color: #ED780E;
}
.social i#plus:hover {
  color: #D43402;
}
.social i#mail:hover {
  color: #F7B401;
}

4. Load the jQuery by adding the following CDN link just before closing the body tag:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

5. Finally, add the following JavaScript code between <script> tag or external js file to animate social icons.

$(document).ready(function() {
  $('i').hide();
})

$(window).load(function() {
  $('i').show();

  var twitterPos = $('#twitter').position();
  var githubPos = $('#github').position();
  var stackPos = $('#stack').position();
  var linkedinPos = $('#linkedin').position();
  var codePos = $('#code').position();
  var plusPos = $('#plus').position();
  var mailPos = $('#mail').position();
  var imgPos = $('.me').position();
  
  $('i').css({
    position: 'absolute',
    zIndex: '1',
    top: imgPos.top + 100,
    left: '47%'
  });
  
  setTimeout(function() {
    $('#twitter').animate({
      top: twitterPos.top + 10,
      left: twitterPos.left - 10
    }, 500);
  }, 250);
  
  setTimeout(function() {
    $('#twitter').animate({
      top: twitterPos.top,
      left: twitterPos.left
    }, 250);
    
    $('#github').animate({
      top: githubPos.top + 10,
      left: githubPos.left - 6
    }, 500);
  }, 500);
  
  setTimeout(function() {
    $('#github').animate({
      top: githubPos.top,
      left: githubPos.left
    }, 250);
    
    $('#stack').animate({
      top: stackPos.top + 10,
      left: stackPos.left - 3
    }, 500);
  }, 750);
  
  setTimeout(function() {
    $('#stack').animate({
      top: stackPos.top,
      left: stackPos.left
    }, 250);
    
    $('#linkedin').animate({
      top: linkedinPos.top + 10,
      left: linkedinPos.left
    }, 500);
  }, 1000);
  
  setTimeout(function() {
    $('#linkedin').animate({
      top: linkedinPos.top,
      left: linkedinPos.left
    }, 250);
    
    $('#code').animate({
      top: codePos.top + 10,
      left: codePos.left + 3
    }, 500);
  }, 1250);
  
  setTimeout(function() {
    $('#code').animate({
      top: codePos.top,
      left: codePos.left
    }, 250);
    
    $('#plus').animate({
      top: plusPos.top + 10,
      left: plusPos.left + 6
    }, 500);
  }, 1500);
  
  setTimeout(function() {
    $('#plus').animate({
      top: plusPos.top,
      left: plusPos.left
    }, 250);
    
    $('#mail').animate({
      top: mailPos.top + 10,
      left: mailPos.left + 10
    }, 500);
  }, 1750);
  
  setTimeout(function() {
    $('#mail').animate({
      top: mailPos.top,
      left: mailPos.left
    }, 250);
  }, 2000);
  
})

That’s all! hopefully, you have successfully created social icons with circular profile pic on your website. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...