Cara Membuat Social Media Icon dengan Font Awesome

Oleh Syafdillah

16 April 2016

CSS Icon Social Media Flat UI dengan Font Awesome – Pada intinya seperti biasa hanya membahas tentang CSS untuk yang suka bermain kode dan mencoba untuk merubah tampilan blog. Tentu semua sudah tahu tentang font awesome, ikonik font yang banyak di gunakan oleh blogger untuk membuat ikon dengan cara yang ringkas ke dalam tampilan blog. Membuat ikon media sosial dan menerapkan ke dalam blog merupakan salah satu cara untuk menarik perhatian dan juga mempercantik blog. Icon pack social network flat UI ini lumayan lengkap sehingga akun apapun yang anda punya dapat dengan mudah untuk di tempatkan ke dalam area widget pada blog anda. Cukup banyak terdapat akun social media, yang ukuran dan bentuk ikon serta efek hover bisa di sesuaikan agar sesuai dengan blog masing-masing.

Langkah pertama yang perlu di perhatikan adalah pada template sudah terpasang font awesome, jika belum bisa memasang terlebih dahulu dengan menaruh kode berikut ini dan taruh di atas kode </head> pada template.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
atau 
<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/>

1. Social Media Icon V1.

<style type="text/css"> 
.sc-network-bulat a{color:#fff;width:45px;height:45px;display:block;margin:2px;text-align:center;float:left;font-size:30px;}
.sc-network-bulat a:hover{opacity:0.5;border-radius:100%;}
.sc-network-bulat i{line-height:45px}
.fac{background:#3B5998}.twi{background:#39A9E0}.gog{background:#D14836}.rss{background:#FF8300}.yut{background:#CD332D}.lin{background:#007FB1}.git{background:#4183C4}.pin{background:#CB2027}.ins{background:#3F729B}.fli{background:#0063DB}.tum{background:#2C4762}.stu{background:#EB4924}.dig{background:#14589E}.red{background:#FF4500}.dri{background:#EA4C89}.wor{background:#21759B}.vim{background:#4BF}.del{background:#3274D1}.dev{background:#4B5D50}.and{background:#A4C639}.apl{background:#B9BFC1}.sky{background:#00AFF0}.eml{background:#888}.jsf{background:#4679A4}.cdp{background:#000}.drp{background:#3277E3}.ht5{background:#E44D26}.cs3{background:#1572B6}.dru{background:#2AA9E0}.jom{background:#000}
</style> 

<div class="sc-network-bulat">
<a class="fac" href="#" title="Like On Facebook"><i class="fa fa-facebook"></i></a>
<a class="twi" href="#" title="Follow On Twitter"><i class="fa fa-twitter"></i></a>
<a class="gog" href="#" title="View Google+ Profile"><i class="fa fa-google-plus"></i></a>
<a class="rss" href="#" title="Subscribe to RSS Feed"><i class="fa fa-rss"></i></a>
<a class="yut" href="#" title="Visit YouTube Channel"><i class="fa fa-youtube"></i></a>
<a class="lin" href="#" title="Connect On Linked In"><i class="fa fa-linkedin"></i></a>
<a class="git" href="#" title="Visit Github Profile"><i class="fa fa-github"></i></a>
</div>

2. Social Media Icon V2.

<style type="text/css"> 
.sc-network-ketupat a{color:#fff;width:45px;height:45px;display:block;margin:2px;text-align:center;float:left;font-size:30px;}
.sc-network-ketupat a:hover{opacity:0.5;border-radius:15px 0px 15px;}
.sc-network-ketupat i{line-height:45px}
.fac{background:#3B5998}.twi{background:#39A9E0}.gog{background:#D14836}.rss{background:#FF8300}.yut{background:#CD332D}.lin{background:#007FB1}.git{background:#4183C4}.pin{background:#CB2027}.ins{background:#3F729B}.fli{background:#0063DB}.tum{background:#2C4762}.stu{background:#EB4924}.dig{background:#14589E}.red{background:#FF4500}.dri{background:#EA4C89}.wor{background:#21759B}.vim{background:#4BF}.del{background:#3274D1}.dev{background:#4B5D50}.and{background:#A4C639}.apl{background:#B9BFC1}.sky{background:#00AFF0}.eml{background:#888}.jsf{background:#4679A4}.cdp{background:#000}.drp{background:#3277E3}.ht5{background:#E44D26}.cs3{background:#1572B6}.dru{background:#2AA9E0}.jom{background:#000}
</style>

<div class="sc-network-ketupat">
<a class="fac" href="#" title="Like On Facebook"><i class="fa fa-facebook"></i></a>
<a class="twi" href="#" title="Follow On Twitter"><i class="fa fa-twitter"></i></a>
<a class="gog" href="#" title="View Google+ Profile"><i class="fa fa-google-plus"></i></a>
<a class="rss" href="#" title="Subscribe to RSS Feed"><i class="fa fa-rss"></i></a>
<a class="yut" href="#" title="Visit YouTube Channel"><i class="fa fa-youtube"></i></a>
<a class="lin" href="#" title="Connect On Linked In"><i class="fa fa-linkedin"></i></a>
<a class="git" href="#" title="Visit Github Profile"><i class="fa fa-github"></i></a>
</div>

3. Social Media Icon V3.

<style type="text/css"> 
.sc-network-kubus a{color:#fff;width:45px;height:45px;display:block;margin:2px;text-align:center;float:left;font-size:30px;}
.sc-network-kubus a:hover{opacity:0.5;border-radius:5px;}
.sc-network-kubus i{line-height:45px}
.fac{background:#3B5998}.twi{background:#39A9E0}.gog{background:#D14836}.rss{background:#FF8300}.yut{background:#CD332D}.lin{background:#007FB1}.git{background:#4183C4}.pin{background:#CB2027}.ins{background:#3F729B}.fli{background:#0063DB}.tum{background:#2C4762}.stu{background:#EB4924}.dig{background:#14589E}.red{background:#FF4500}.dri{background:#EA4C89}.wor{background:#21759B}.vim{background:#4BF}.del{background:#3274D1}.dev{background:#4B5D50}.and{background:#A4C639}.apl{background:#B9BFC1}.sky{background:#00AFF0}.eml{background:#888}.jsf{background:#4679A4}.cdp{background:#000}.drp{background:#3277E3}.ht5{background:#E44D26}.cs3{background:#1572B6}.dru{background:#2AA9E0}.jom{background:#000}
</style>

<div class="sc-network-kubus">
<a class="fac" href="#" title="Like On Facebook"><i class="fa fa-facebook"></i></a>
<a class="twi" href="#" title="Follow On Twitter"><i class="fa fa-twitter"></i></a>
<a class="gog" href="#" title="View Google+ Profile"><i class="fa fa-google-plus"></i></a>
<a class="rss" href="#" title="Subscribe to RSS Feed"><i class="fa fa-rss"></i></a>
<a class="yut" href="#" title="Visit YouTube Channel"><i class="fa fa-youtube"></i></a>
<a class="lin" href="#" title="Connect On Linked In"><i class="fa fa-linkedin"></i></a>
<a class="git" href="#" title="Visit Github Profile"><i class="fa fa-github"></i></a>
</div>

Ayo Like Facebooknya

Tag : Blogging