My website is: http://thezengirl.com/dev
The footer on all the pages displays the social media icons with the circle background.
This is the page where I am trying to add the social media icons in the sidebar (at the bottom of the right sidebar, facebook/twitter/instagram): http://www.thezengirl.com/dev/blog/

Thanks for writing in!

I copied the following HTML from your website’s footer, you can simply add this in your sidebar “Text” widget (replace with your previous HTML):

<div class="x-social-global">
  <a href="https://www.facebook.com/TheZenGirl" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square"></i></a>
  <a href="https://twitter.com/TheZenGirl" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square"></i></a>
  <a href="https://plus.google.com/u/0/+StacyConlon/posts" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square"></i></a>
  <a href="https://www.linkedin.com/in/stacyconlon" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square"></i></a>
  <a href="https://instagram.com/thezengirl/" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram"></i></a>
  <a href="https://www.pinterest.com/thezengirl/" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square"></i></a>
</div>

After that, add following CSS under Custom > CSS in the Customizer to match the styling of your footer social icons:

.x-sidebar .x-social-global {
    margin: 20px 0
}
.x-sidebar .x-social-global a {
    margin: 0 1.25%;
    width: 54px;
    height: 54px;
    font-size: 21px;
    font-size: 2.1rem;
    line-height: 54px
;
    color: #664375;
    background-color: rgba(102, 67, 117, 0.2);
}
.x-sidebar .x-social-global a.foursquare {
    font-size: 20px;
    font-size: 2rem
}
.x-sidebar .x-nav {
    margin: 20px 0;
    text-align: center
}
.x-sidebar .x-nav li {
    margin: 0;
    display: inline-block
}
.x-sidebar .x-nav li:before {
    content: "/";
    float: left;
    margin: 0 0.55em 0 0.45em;
    opacity: 0.35
}
.x-sidebar .x-nav li:first-child:before {
    content: none
}
.x-sidebar .x-nav li a {
    display: inline;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 1
}
.x-sidebar .x-nav li a:hover {
    background-color: transparent;
    opacity: 0.35
}
.x-sidebar .x-colophon-content {
    margin: 20px 0;
    letter-spacing: 1px;
    opacity: 1
}

You might need to style the sidebar social icons as per your preference, as the custom development is outside the scope of support, regretfully we won’t be able to assist you with further sidebar social icon styling.

Hope this helps. 🙂

Thank you.