CSS Icon Social Network Flat UI Dengan Font Awesome

CSS Icon Social Network Flat UI Dengan Font Awesome – lama tidak update artikel jadi lumayan bingung mau menulis apa dan mulai dari mana. Tapi 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 mereka. Membuat ikon jaringan sosial dan menerapkan ke dalam blog merupakan salah satu cara untuk menarik perhatian dan mendapatkan pengunjung ke jejaring sosial anda. Demikian juga untuk memudahkan mereka untuk menemukan situs anda di akun jejaring social lain. 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. Terdapat 30 akun social network, yang ukuran dan bentuk ikon serta efek hover bisa di sesuaikan agar sesuai dengan blog masing-masing. Berbagai pilihan bentuk icon media social dan efek hover bisa dilihat ada di halaman demo.

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

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

Berikut untuk kode CSS dan markup HTML masing-masing icon:
Taruh CSS di dalam tag <style> atau sebelum </style>

.sc-network a{color:#fff;width:50px;height:50px;display:block;margin:2px;text-align:center;float:left;font-size:40px}
.sc-network a:hover{opacity:0.5}
.sc-network i{line-height:50px}
.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}

Markup HTML Icon Social Network

<div class="sc-network">
<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>
<a class="pin" href="#" title="Follow On Pinterest"><i class="fa fa-pinterest-p"></i></a>
<a class="ins" href="#" title="Follow On Instagram"><i class="fa fa-instagram"></i></a>
<a class="fli" href="#" title="Follow On Flickr"><i class="fa fa-flickr"></i></a>
<a class="tum" href="#" title="Follow On Tumblr"><i class="fa fa-tumblr"></i></a>
<a class="stu" href="#" title="Follow On Stumbleupon"><i class="fa fa-stumbleupon"></i></a>
<a class="dig" href="#" title="Follow On Digg"><i class="fa fa-digg"></i></a>
<a class="red" href="#" title="Follow On Reddit"><i class="fa fa-reddit"></i></a>
<a class="dri" href="#" title="Follow On Dribbble"><i class="fa fa-dribbble"></i></a>
<a class="wor" href="#" title="View WordPress.org Profile"><i class="fa fa-wordpress"></i></a>
<a class="vim" href="#" title="Visit Vimeo Channel"><i class="fa fa-vimeo-square"></i></a>
<a class="del" href="#" title="Follow On Delicious"><i class="fa fa-delicious"></i></a>
<a class="dev" href="#" title="Deviant Art Profile"><i class="fa fa-deviantart"></i></a>
<a class="and" href="#" title="Apps For Android"><i class="fa fa-android"></i></a>
<a class="apl" href="#" title="Apps For Apple"><i class="fa fa-apple"></i></a>
<a class="sky" href="#" title="Contact On Skype"><i class="fa fa-skype"></i></a>
<a class="eml" href="#" title="Send An Email"><i class="fa fa-envelope-o"></i></a>
<a class="jsf" href="#" title="Visit JSFiddle Profile"><i class="fa fa-jsfiddle"></i></a>
<a class="cdp" href="#" title="Visit CodePen Profile"><i class="fa fa-codepen"></i></a>
<a class="drp" href="#" title="Visit Dropbox Profile"><i class="fa fa-dropbox"></i></a>
<a class="ht5" href="#" title="Check HTML5 Validation"><i class="fa fa-html5"></i></a>
<a class="cs3" href="#" title="Check CSS3 Validation"><i class="fa fa-css3"></i></a>
<a class="dru" href="#" title="Visit Drupal Profile"><i class="fa fa-drupal"></i></a>
<a class="jom" href="#" title="Visit Joomla Profile"><i class="fa fa-joomla"></i></a>
</div>

Ganti semua tanda # dengan link ID masing-masing.

Dari pola bentuk icon tersebut tentu dapat di modifikasi agar sesuai dengan tampilan blog masing-masing. Seperti contoh diatas dengan menambahkan sedikit property border-radius:5px; pada .sc-network a{ … } untuk membuat icon sedikit melengkung pada setiap sudutnya atau bahkan mungkin dengan menambahkan border-radius:100%; agar setiap icon menjadi bulat/circle. Pada intinya bentuk icon atur saja sesuai keinginan, seperti gambar di atas misalnya border-radius:15px 0px 15px;. Untuk penyesuaian background jika ingin lebih simple maka semua icon di atur ke dalam warna yang sama dengan menambahkan background:#666; pada .sc-network a{ … } seperti contoh di atas. Untuk kode CSS secara lengkapnya seperti di bawah ini:

.sc-network a{background:#666;color:#fff;width:50px;height:50px;display:block;margin:2px;text-align:center;float:left;font-size:40px}
.sc-network a:hover{opacity:0.5}
.sc-network i{line-height:50px}

Sedangkan untuk markup HTML-nya tidak perlu menambahkan attribut class pada tag , contohnya seperti dibawah ini:

<div class="sc-network">
<a href="#" title="Like On Facebook"><i class="fa fa-facebook"></i></a>
<a href="#" title="Follow On Twitter"><i class="fa fa-twitter"></i></a>
<a href="#" title="View Google+ Profile"><i class="fa fa-google-plus"></i></a>
<a href="#" title="Subscribe to RSS Feed"><i class="fa fa-rss"></i></a>
</div>

Semua icon tentu tidak akan di pasang semuanya ke dalam blog, jadi hanya beberapa icon saja dengan akun yang sudah dimiliki.