Skip to main content

Icon Social dengan gambar Font Awesome


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">
<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>
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.

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;
height: 34px;
line-height: 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.

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.
Labels:

Comments

Post a Comment

Popular posts from this blog

Tombol Shortcut yang Ada pada Mozilla Firefox untuk Mempercepat Pekerjaan ketika Browser

Mozilla firefox adalah salah satu browser sejuta umat, popularitasnya sudah tidak di ragukan lagi, saya sendiri merupakan salah satu dari user (pengguna) mozilla firefox sejak versi pertama firefox release dulu dan terus menggunakan browser ini sampai sekarang walaupun ada juga browser lain yang saya instal. Tombol pintasan untuk navigasi serta fungsinya Kembali/back : tekan Alt + ← atau tekan Backspace Redo/Forward : tekan Alt + → atau Shift + Backspace Home : tekan Alt + Home Open File : tekan Ctrl + 0 Reload/segarkan : tekan Ctrl + R atau tekan F5 Reload dan menghapus cache : tekan Ctrl + F5 atau Ctrl + Shift + R Stop : tekan Esc Tombol pintasan pada halaman yang sedang dibuka Geser halaman ke bawah : tekan Page Down Geser halaman ke atas : tekan Page Up Pergi kepaling bawah halaman web : tekan End Pergi kepaling atas halaman web : tekan Home Move to next frame: tekan F6 Move to previous frame: tekan Shift + F6 Print: tekan Ctrl + P Save halaman: tekan Ctrl + S Zoom In (memperbesar...
Post a Comment
Read more

5 Macam Perangkat Keras Komputer (Hardware) Beserta Fungsinya

Apa itu Perangkat Keras Komputer (Hardware) ? Perangkat keras komputer atau disebut juga  hardware  merupakan seluruh perangkat komputer yang dapat di lihat secara fisik atau dapat diraba secara nyata yang berfungsi untuk mendukung proses komputerisasi dan saling bekerja sama untuk mencapai tujuan dalam sistim komputer. Komputer merupakan sekumpulan peralatan elektronik yang saling berkaitan sehingga dapat digunakan untuk memasukkan data, mengolah data dan menghasilkan informasi. Paling sedikit perangkat sebuah komputer terdiri dari CPU, monitor, keyboard, mouse , atau yang biasa disebut sebagai Perangkat Utama Komputer. Sedangkan Perangkat Penunjang (Pelengkap) Komputer antara lain printer, speaker, scanner, proyektor dll. Perangkat Komputer terdiri dari peralatan-peralatan dengan fungsi tertentu. Fungsi dari peralatan komputer tersebut dapat digambarkan sebagai berikut : Peralatan-peralatan komputer berdasarkan fungsinya dapat dibedakan menjadi 5 (lima) ...
Post a Comment
Read more

Inilah Alasan Mengapa "Drive C" Merupakan Drive Default pada Sebuah Komputer

Jika berbicara tentang komputer dengan OS Microsoft Windows adalah salah satu sistem operasi dominan yang digunakan oleh mayoritas pengguna komputer. Jika kalian memiliki komputer Windows maka satu pertanyaan pasti akan terlintas di benak kalian, Mengapa Drive Default di komputer Windows adalah drive C ? Kenapa bukan drive A atau B ? Komputer sekarang menjadi persyaratan bagi banyak dari kalangan. Komputer memainkan peran besar dalam membuat hidup kalian lebih mudah. Drive selain C diberi label D, E, dan seterusnya. Selain itu, jika Kalian memasang flash drive USB Kalian, Kalian akan mendapatkan drive F dan G. Lantas, bagaimana dengan A dan B? Jika Kalian ingat, pada generasi awal, komputer tidak memiliki sistem penyimpanan internal yang besar. Bahkan, hard disk drive menjadi stkalianr sejak tahun 1980. Sebelum hard disk drive, floppy disk drive digunakan sebagai perangkat penyimpanan. Floppy disk drive adalah perangkat penyimpanan utama yang hadir sejak 1960. Pada saat itu, drive flop...
Post a Comment
Read more