Trying to move icons from left to right

[naimiii]

I have been trying to move my icons from left to right ( above the button) but the margin property does not work for me. Repo link : Circle-Web-Development/Module-1-end-Project at main · naima-shk/Circle-Web-Development · GitHub
Here’s the picture for reference :

[naimiii]

@camperextraordinaire please help me out.

[manjupillai16]

Hi @naimiii ,

I clubbed only the icon elements in the span element (i.e, I moved the “Get in Touch” button out of the span element), and styled this span with your margin-left. It seems to work.

[naimiii]

@manjupillai16 i tried the same but did not working for me… please check my updated code here: Circle-Web-Development/Module-1-end-Project at main · naima-shk/Circle-Web-Development · GitHub
Also, you can share your code too for the better understanding.

[manjupillai16]

The changes I made in html:

<div id="d-flex-social-Icons">
         <span class ="social-links"> <a  href="https://www.linkedin.com/in/naima-shaikh-b60873128/"> <i class="fab fa-linkedin"></i></a>
          <a href="https://twitter.com/NaimaShaykh"> <i class="fab fa-twitter"></i></a>
          <a href="https://github.com/naima-shk"> <i class="fab fa-github"></i></a>
         </span>
          <br>
        <button  type="button"  id= 'skill-button' class="btn button primary-button mr-4 text-uppercase">Get In Touch</button>
        </div>

And in css:

.d-flex .social-Icons  span{
   // display: flex;
   // margin-left: 57px;
   // color: black; 
}

.social-links{
  margin-left: 45rem;
}

Screenshot of the end result:

Hope this helps.

[naimiii]

@manjupillai16 Thanks it’s working… Now I wanna give equal space between the icons.

here’s my updated code Circle-Web-Development/Module-1-end-Project at main · naima-shk/Circle-Web-Development · GitHub

[manjupillai16]

You could display the span as a flex and use ‘justify-content: space-between’ to achieve the space between icons.

Add the below code to your already existing .social-links{} styling.

  width: 7rem;
  display: flex;
  justify-content: space-between

To decrease or increase the gap, you could adjust the width attribute.

[naimiii]

Thanks .It works … @manjupillai16