How do I add Add text below font awesome icon Links?

Question

I am trying to add some text under font-awesome Icons in my Blogger template. Here is the image of what I want to achieve

image of Look I want to achieve

But I have managed to achieve this till now

image of progress till now

How to I add clicable link under each icon as shown in the second image? As I am a newbie, it would be a huge help if you can also help me out with the font family and its styling.

p.s. I am using a custom template on blospot hosted blog. I have tried out following code:

Answer 1

You can just add a span tag in your a tag that way it would be possible to apply different styles (like margin, color) on your text without affecting the font-awesome icons.

.sidebar-social {
    margin: 0;
    padding: 0;
}

.sidebar-social ul {
    margin: 0;
    padding: 5px;
}

.sidebar-social li {
	  text-align: center;
    width: 31.9%;
    margin-bottom: 3px!important;
    background-color: #fff;
    border: 1px solid #eee;
    display: inline-block;
    font-size: 10px;
    padding:0;
}

.sidebar-social i {
  display: block;
  margin: 0 auto 10px auto;
	width: 32px;
    height: 32px;
    margin: 10px auto 0;
    line-height: 32px;
    text-align: center;
    font-size: 20px;
    color: #444444;
  margin-top:0;
  padding-top:5px;
}
.sidebar-social a{
  text-decoration:none;
  width:100%;
  height:100%;
  display:block;
  margin:0;
  padding:0;
}

.sidebar-social a span{
  color:black;
  font-size:10px;
  padding:5px 0 10px 0;
  display:block;
  text-transform:uppercase;
  font-family:'Josefin Sans';
  letter-spacing:1px;
}

.sidebar-social a:hover i.fa-facebook { color: #FF0000; }
.sidebar-social a:hover i.fa-twitter { color:#00ABE3 }
.sidebar-social a:hover i.fa-instagram { color:#FFD400 }
.sidebar-social a:hover i.fa-pinterest { color:#FF0000 }
.sidebar-social a:hover i.fa-google-plus { color:#cb2027 }
.sidebar-social a:hover i.fa-flickr { color:#FF57AE }
.sidebar-social a:hover i.fa-500px { color:#00ABE3 }
.sidebar-social a:hover i.fa-youtube { color:#FF1F25 }
.sidebar-social a:hover i.fa-behance { color:#FF57AE }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<div class="sidebar-social">

<ul>
<li>
<a href="URL-HERE" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i>
  <span>facebook</span></a></li>

<li><a href="URL-HERE" title="Google Plus" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i><span>Google plus</span></a>
</li>
        
<li><a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i><span>twitter</span></a>
</li>
        
<li><a href="URL-HERE" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i><span>Pinterest</span></a>
</li>
        
<li><a href="URL-HERE" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i><span>Instagram</span></a>
</li>

<li><a href="URL-HERE" title="Behance" target="_blank" rel="nofollow"><i class="fa fa-behance"></i><span>Behance</span></a> 
</li>

<li><a href="URL-HERE" title="flickr" target="_blank" rel="nofollow"><i class="fa fa-flickr"></i><span>Flickr</span></a>
</li>

<li><a href="URL-HERE" title="YouTube" target="_blank" rel="nofollow"><i class="fa fa-youtube"></i><span>Youtube</span></a>
</li>

<li><a href="URL-HERE" title="500px" target="_blank" rel="nofollow"><i class="fa fa-500px"></i><span>500 PX</span></a></li>
</ul>
</div>