Tutorial : imageless social media icon

February 09, 2018

Tutorial : imageless social media icon

Assalamualaikum and have a bless Jumaah' everyone! ♥

So, today after a few week of not blogging I'm gonna share with you guys about how to make image-less sosial icon.

WUTT?

Okay basically, you guys don't need to use image in any type of format like jpeg, png or etc. Just using a few word and tadaa! You got to backlink with your social media.

Here the LIVE PREVIEW

1. Copy this code

<center>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
.fa {
  padding: 12px;

  width: 15px;
  text-align: center;
  text-decoration: none;
  text-color:#fff ;

  font-size: 13px;
  color:white;
text-decoration:none;
color:#777;
  border-radius: 50%;

}

.fa:hover {
text-decoration:none;
    opacity: 0.7;
}

.fa-facebook {
text-decoration:none;
  background: #FFD5E4;
  color: white;
}

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

.fa-google {
  background: #FFD5E4;
  color: white;
}

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

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

.fa-instagram {
  background: #FFD5E4;
  color: white;
}

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










</style>





<!-- Add font awesome icons -->
<a href="https://www.facebook.com/ainaahans/" class="fa fa-facebook"></a>
<a href="https://twitter.com/_ainahs" class="fa fa-twitter"></a>
<a href="https://plus.google.com/+AinaAkmal98" class="fa fa-google"></a>
<a href="https://www.instagram.com/ainahans_/" class="fa fa-instagram"></a>
<a href="https://www.pinterest.com/ainahans_/" class="fa fa-pinterest"></a></center>
</center>