Social Icons with Circular Profile Pic in CSS

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.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.