icons Archives - Lena Design

To create the CSS Sticky social media bar follow the steps below:

Demo:

Step1.

Add HTML

Create the sticky-icon-bar container and add preferable social media icons (to see the tutorial, how to create the social media icons/ buttons click here).

<div class="sticky-icon-bar">
  <a href="https://codepen.io/lenasta92579651" class="codepen"><i class="fab fa-codepen"></i></a> 
  <a href="https://twitter.com/lenasta92579651" class="twitter"><i class="fab fa-twitter"></i></a> 
  <a href="https://www.instagram.com/stanleylenablog/" class="instagram"><i class="fab fa-instagram"></i></a> 
  <a href="https://www.youtube.com/channel/UCMtOSqCHykGR3ATq5nwBhSw?view_as=subscriber" class="youtube"><i class="fab fa-youtube"></i></a> 
</div>

Add some text (to make a page scrollable):

<div class="text">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan nunc eget hendrerit suscipit. Donec dictum libero libero, ac bibendum elit eleifend a. Donec nunc lacus, malesuada quis auctor quis, ullamcorper vitae metus. Donec posuere massa a finibus blandit. Donec et consequat lorem, non ornare nulla. Integer ac mauris laoreet ex consequat malesuada. Sed quis odio at nibh egestas eleifend vel et nisi. Sed sollicitudin nisi ipsum, sit amet tristique tellus eleifend a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan nunc eget hendrerit suscipit. Donec dictum libero libero, ac bibendum elit eleifend a. Donec nunc lacus, malesuada quis auctor quis, ullamcorper vitae metus. Donec posuere massa a finibus blandit. Donec et consequat lorem, non ornare nulla. Integer ac mauris laoreet ex consequat malesuada. Sed quis odio at nibh egestas eleifend vel et nisi. Sed sollicitudin nisi ipsum, sit amet tristique tellus eleifend a. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan nunc eget hendrerit suscipit. Donec dictum libero libero, ac bibendum elit eleifend a. Donec nunc lacus, malesuada quis auctor quis, ullamcorper vitae metus. Donec posuere massa a finibus blandit. Donec et consequat lorem, non ornare nulla. Integer ac mauris laoreet ex consequat malesuada. Sed quis odio at nibh egestas eleifend vel et nisi. Sed sollicitudin nisi ipsum, sit amet tristique tellus eleifend a. Donec accumsan nunc eget hendrerit suscipit. Donec dictum libero libero, ac bibendum elit eleifend a. Donec nunc lacus, malesuada quis auctor quis, ullamcorper vitae metus. Donec posuere massa a finibus blandit. Donec et consequat lorem, non ornare nulla. Integer ac mauris laoreet ex consequat malesuada. Sed quis odio at nibh egestas eleifend vel et nisi. Sed sollicitudin nisi ipsum, sit amet tristique tellus eleifend a. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan nunc eget hendrerit suscipit. Donec dictum libero libero, ac bibendum elit eleifend a. Donec nunc lacus, malesuada quis auctor quis, ullamcorper vitae metus. Donec posuere massa a finibus blandit. Donec et consequat lorem, non ornare nulla. Integer ac mauris laoreet ex consequat malesuada. Sed quis odio at nibh egestas eleifend vel et nisi. Sed sollicitudin nisi ipsum, sit amet tristique tellus eleifend a. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan nunc eget hendrerit suscipit. Donec dictum libero libero, ac bibendum elit eleifend a. Donec nunc lacus, malesuada quis auctor quis, ullamcorper vitae metus. Donec posuere massa a finibus blandit. Donec et consequat lorem, non ornare nulla. Integer ac mauris laoreet ex consequat malesuada. Sed quis odio at nibh egestas eleifend vel et nisi. Sed sollicitudin nisi ipsum, sit amet tristique tellus eleifend a. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan nunc eget hendrerit suscipit. Donec dictum libero libero, ac bibendum elit eleifend a. Donec nunc lacus, malesuada quis auctor quis, ullamcorper vitae metus. Donec posuere massa a finibus blandit. Donec et consequat lorem, non ornare nulla. Integer ac mauris laoreet ex consequat malesuada. Sed quis odio at nibh egestas eleifend vel et nisi. Sed sollicitudin nisi ipsum, sit amet tristique tellus eleifend a. </p>
</div>

Step2.

Add CSS

Import the font-awesome font:

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');

Set the color and the position of the background and elements:

body {
  margin:0;
  height:150vh;
  background-color: #f9f9f9;
}

Style the text:

.text {
  margin: 80px;
  font-size: 28px;
  text-align: justify;
}

Style the sticky social bar:

To stick the social bar set the position: fixed;

.sticky-icon-bar {
  position: fixed;
  top: 50%;
  box-shadow:5px 0 20px rgba(0,0,0,0.4);
  transform: translateY(-50%);
}

.sticky-icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: #333;
  font-size: 20px;
  background-color: #ffffff;
}

.sticky-icon-bar a:hover {
  background-color: #333;
  color: white;
}

Enjoy coding!

Read also:

CSS Sticky Element

CSS Position Property

CSS background-position Property

How to create social media icons/ buttons?

Demo:

To learn how to style the social media icons/ buttons follow the steps below:

Step1.

Add HTML

Create the social media icons that you want to style:

<a href="#" class="fab fa-codepen"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-facebook"></a>
<a href="#" class="fab fa-tiktok"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-linkedin"></a>
<a href="#" class="fab fa-youtube"></a>
<a href="#" class="fab fa-pinterest"></a>
<a href="#" class="fab fa-snapchat-ghost"></a>
<a href="#" class="fab fa-skype"></a>
<a href="#" class="fab fa-dribbble"></a>
<a href="#" class="fab fa-yahoo"></a>

Step2.

Add CSS

Import the font-awesome font:

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');

Style the icons:

.fab {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px;
  transition: transform .2s;
}

.fab:hover {
  transform: scale(1.2);
}
.fa-codepen {
  background-color: #000;
  color: white;
}
    
.fa-instagram {
  background-color: #f72585;
  color: white;
}
    
.fa-facebook {
  background-color: #3B5998;
  color: white;
}
    
.fa-tiktok {
   color: white;
   background-color: #000;
    }

.fa-twitter {
  background-color: #55ACEE;
  color: white;
}

.fa-linkedin {
  background-color: #007bb5;
  color: white;
}

.fa-youtube {
  background-color: #bb0000;
  color: white;
}

.fa-pinterest {
  background-color: #cb2027;
  color: white;
}

.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
  background-color: #00aff0;
  color: white;
}

.fa-dribbble {
  background-color: #ea4c89;
  color: white;
}

.fa-yahoo {
  background-color: #430297;
  color: white;
}

To see how to create the round social media icons/buttons click here.

Enjoy coding!