Ketika kita surfing di internet, kita biasanya melihat banyak sekali website yang menyediakan link ke arah sosial media mereka seperti facebook, twitter, google+ dan masih banyak lagi. Jika kita ingin membuat social button seperti itu, ada beberapa kelemahan yang kita rasakan sebagai seorang blog atau web developer, yaitu social button gambar tersebut biasanya berupa gambar yang mempunyai kekurangan seperti editing yang susah dalam format template yang responsive. Kelemahan social button gambar yang lainnya misalnya waktu loading web/blog semakin bertambah karena ukuran file gambar yang dipakai juga biasanya mempengaruhi kecepatan situs tersebut ditampilkan.
Untuk mengatasi beberapa masalah tersebut, kita bisa memanfaatkan social icon dengan format font. Selain ukurannya yang kecil yang akan berpengaruh pada kecepatan suatu situs, font juga mudah diformat terutama dari ukuran untuk keperluan template-template web/blog yang responsive.
Sebelum menulis kode HTML social icon ini, kita harus pastikan kode css untuk font yang akan digunakan sudah terpasang di web/blog kita. Copy dan paste kode css ini ke dalam tag head di template kalian.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />Baris kode css tersebut merupakan kode yang akan menampilkan social icon di template kalian.
Kode HTML Social Icon
Berikut merupakan kode yang HTML yang kalian pasang untuk menampilkan icons font. Pasang kode ini di tempat anda ingin menampilkan social icons.
<div id="socialicons">Setiap baris kode diatas dipisahkan sesuai dengan jenis icon yang akan kita gunakan. Icon-icon diatas merupakan icon-icon yang sering kita lihat dan gunakan untuk blog atau website.
<a class="icon" href="LINK" title="Follow with Twitter" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="icon" href="LINK" title="Follow with Facebook" target="_blank"><i class="fa fa-facebook"></i></a>
<a class="icon" href="LINK" title="Follow with Instagram" target="_blank"><i class="fa fa-instagram"></i></a>
<a class="icon" href="LINK" title="Follow with Google Plus" target="_blank"><i class="fa fa-google-plus"></i></a>
<a class="icon" href="LINK" title="Follow with Bloglovin" target="_blank"><i class="fa fa-heart"></i></a>
<a class="icon" href="LINK" title="Follow with Pinterest" target="_blank"><i class="fa fa-pinterest"></i></a>
<a class="icon" href="LINK" title="Follow with YouTube" target="_blank"><i class="fa fa-youtube"></i></a>
<a class="icon" href="LINK" title="Follow with Tumblr" target="_blank"><i class="fa fa-tumblr"></i></a>
<a class="icon" href="LINK" title="Follow with RSS" target="_blank"><i class="fa fa-rss"></i></a>
<a class="icon" href="mailto:LINK" title="Email Me" target="_blank"><i class="fa fa-envelope"></i></a>
</div>
CSS Styles untuk Social Icon
Untuk kode CSS styles nya sendiri, disini ada beberapa pilihan dimana kalian dapat memilih pilihan bentuk yang cocok dengan selera kalian.
- CSS styles 1
Tampilan social icon ini merupakan icon sosial media yang berada dalam bentuk square seperti ditunjukkan gambar di bawah :
Berikut kode CSS yang kita pakai :
#socialicons {
text-align: center;
}
#socialicons .icon{
background: MAIN_COLOR;
display: inline-block;
color: white;
font-size: 18px;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
vertical-align: middle;
margin: 0 1px 8px;
}
#socialicons .icon:hover{
background: HOVER_COLOR;
}
- CSS styles 2
Tampilan social icon ini merupakan icon sosial media yang berada dalam bentuk circle seperti ditunjukkan gambar di bawah :
Berikut kode CSS yang kita pakai :
#socialicons {
text-align: center;
}
#socialicons .icon{
background: MAIN_COLOR;
display: inline-block;
color: white;
font-size: 18px;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
vertical-align: middle;
margin: 0 1px 8px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
border-radius: 17px;
}
#socialicons .icon:hover{
background: HOVER_COLOR;
}
- CSS styles 3
Tampilan social icon ini merupakan icon sosial media yang berada dalam bentuk square outline seperti ditunjukkan gambar di bawah :
Berikut kode CSS yang kita pakai :
#socialicons {
text-align: center;
}
#socialicons .icon{
color: MAIN_COLOR;
border: 1px solid #CFCFCF;
display: inline-block;
font-size: 18px;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
vertical-align: middle;
margin: 0 1px 8px;
}
#socialicons .icon:hover{
color: HOVER_COLOR;
border: 1px solid #CFCFCF;
}
- CSS styles 4
Tampilan social icon ini merupakan icon sosial media yang berada dalam bentuk circle outline seperti ditunjukkan gambar di bawah :
Berikut kode CSS yang kita pakai :
#socialicons {
text-align: center;
}
#socialicons .icon{
color: MAIN_COLOR;
border: 1px solid #CFCFCF;
display: inline-block;
font-size: 18px;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
vertical-align: middle;
margin: 0 1px 8px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
border-radius: 17px;
}
#socialicons .icon:hover{
color: HOVER_COLOR;
border: 1px solid #CFCFCF;
}
- CSS styles 5
Tampilan social icon ini merupakan icon sosial media yang berada dalam bentuk plain seperti ditunjukkan gambar di bawah :
Berikut kode CSS yang kita pakai :
#socialicons {
text-align: center;
}
#socialicons .icon{
color: MAIN_COLOR;
display: inline-block;
font-size: 20px;
text-align: center;
margin: 0 6px 5px;
}
#socialicons .icon:hover{
color: HOVER_COLOR;
}
Membesarkan/Mengecilkan Social Icons
Untuk membesarkan/mengecilkan ukuran icon tersebut, caranya cukup sederhana, yaitu dengan merubah format ukuran yang digunakan dalam kode CSS yang dipakai, misalnya :
width: 34px;Kode diatas digunakan untuk merubah font dengan nilai tinggi dan panjang sebesar 34 piksel. Anda dapat merubah, baik mengecilkan atau membesarkan ukuran icons tersebut sesuai dengan format yang cocok bagi template anda.
height: 34px;
line-height: 34px;
Selain icon-icon diatas, kalian juga dapat menambah jumlah icon yang dapat ditampilkan dengan mengunjungi developer pengembang icon ini di http://fortawesome.github.io/Font-Awesome/icons/. Disana kalian dapat memilih sampai dengan 500+ berbagai jenis icon yang ditawarkan secara gratis.
Selamat berkreasi dengan berbagai icon-icon social media di website atau blog kamu.
Thanks for ThesePaperHearts for this tutorial.
ConversionConversion EmoticonEmoticon