How to put background to FA icons - html

Question

I want to put a background to my FA icons, but something like a low opacity circle around them.
Code:
.social {display:block; float:left; margin:auto; height: 50px; font-size: 12px; padding-top:7px; width: 200px; text-align: center; text-decoration: none; border-bottom: 5px solid black;}
.social i {cursor: pointer; display: inline-block; position: relative; transition: 0.5s;}
.social i:after {content: '\00bb'; position: absolute; opacity: 0; top: -1px; right: -50px; transition: 0.2s;}
.social:hover i {padding-right: 20px; color: white;}
.social:hover i:after {opacity: 1; right: 0;}
.my-facebook {background: transparent; color: #3b5998;}
.my-instagram {background: transparent; color: white;}
.my-codepen{background: transparent; color: black;}
.my-github{background: transparent; color: #f5f5f5;}
.my-linkedin{background: transparent; color: #00a0dc;}
.my-fcc{background: transparent; color: #006400;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="buttons">
<a class="social my-codepen" target='_blank' href="#"><i class="fa fa-codepen fa-3x"></i></a>
<a class="social my-github" target='_blank' href="#"><i class="fa fa-github fa-3x"></i></a>
<a class="social my-facebook" target='_blank' href="#"><i class="fa fa-facebook fa-3x"></i></a>
<a class="social my-fcc" target='_blank' href="#"><i class="fa fa-free-code-camp fa-3x"></i></a>
<a class="social my-linkedin" target='_blank' href="#"><i class="fa fa-linkedin fa-3x"></i></a>
<a class="social my-instagram" target='_blank' href="#"><i class="fa fa-instagram fa-3x"></i></a>
</div>
I've tried to change the "background" but it changes the whole square. I want only to give a circular background or a circular border around the icon itself.
Thanks to all!

Answer 1

You need to use stacked icons. I have modified your example for you below.
Code
.social {display:block; float:left; margin:auto; height: 50px; font-size: 12px; padding-top:7px; width: 200px; text-align: center; text-decoration: none; border-bottom: 5px solid black;}
.social i {cursor: pointer; display: inline-block; transition: 0.5s;}
.social i:after {content: '\00bb'; position: absolute; opacity: 0; top: -1px; right: -50px; transition: 0.2s;}
.social:hover i {padding-right: 20px; color: white;}
.social:hover i:after {opacity: 1; right: 0;}
.my-facebook {background: transparent; color: #3b5998;}
.my-instagram {background: transparent; color: black;}
.my-codepen{background: transparent; color: black;}
.my-github{background: transparent; color: black;}
.my-linkedin{background: transparent; color: #00a0dc;}
.my-fcc{background: transparent; color: #006400;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="buttons">
<a class="social my-codepen" target='_blank' href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-codepen fa-stack-1x fa-inverse"></i>
</span>
</a>
<a class="social my-github" target='_blank' href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
<a class="social my-facebook" target='_blank' href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
<a class="social my-fcc" target='_blank' href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-free-code-camp fa-stack-1x fa-inverse"></i>
</span>
</a>
<a class="social my-linkedin" target='_blank' href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
</span>
</a>
<a class="social my-instagram" target='_blank' href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
</span>
</a>
</div>
Jsfiddle Here