Membuat sosial icon menggunakan CSS

Membuat sosial icon menggunakan CSS

  16 June    Andika

---

Kebiasaan menggunakan gambar untuk ikon/logo jejaring sosial bisa sedikit di kurangi dengan memanfaatkan Web Font Icon di blog. Setidaknya, ini bisa menekan penggunaan gambar yang terbilang sangat banyak persyaratan dalam mencapai skor yang maksimal :)

Mungkin kamu pernah mengukur SEO blog, kecepatan dan Valid HTMLnya. Disana kamu akan menemukan beberapa masalah pada gambar yang kamu gunakan. Anggap saja masalah kb (ukuran) dari gambarnya, Format gambar, Judul gambar, Resolusi gambar (px x px), Bahkan url gambar pun bisa jadi masalah.

Semula saya juga menggunakan gambar untuk hal ini, namun sekarang semua telah saya ubah. Jelasnya, ini saya lakukan bukan untuk mencari skor maksimal, ini tak lebih dari sebuah keinginan untuk mencoba sesuatu hal yang baru saja.

Ini lah contoh sosial ikon yang saya maksud,

Menurut kamu, itu CSS atau gambar? :p

Jika kamu berpikir demo itu gambar, itu salah besar. Ini tak lebih dari perpaduan CSS dengan sentuhan Web Font Icon sebagai penampil ikonnya.

Jika kamu ingin mencoba, Pastikan kamu telah menggunakan FontAwesome. Jika Sudah, berikut kodenya,

Berikut Kode CSSnya

ul.sosial {
    list-style:none;
    text-align: center;
}
ul.sosial li {
    display: inline-block;
    width: 40px;
    height: 40px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    text-align: center;
}
ul.sosial li a {
    display:table;
    width: 100%;
    height: 100%;
    color: #EEFFFF;
    font: bold 22px Arial;
    text-decoration: none;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-transition:all 300ms ease-out;
    -moz-transition:all 300ms ease-out;
    transition:all 300ms ease-out;
}
ul.sosial li:nth-of-type(1) a {
    background: #3B9DD5;
}
ul.sosial li:nth-of-type(2) a {
    background: #FF4500;
}
ul.sosial li:nth-of-type(3) a {
    background: #0000FF;
}
ul.sosial li:nth-of-type(4) a {
    background: #40E0D0;
}
ul.sosial li:nth-of-type(5) a {
    background: #32CD32;
}
ul.sosial li:nth-of-type(6) a {
    background: #00CED1;
}
ul.sosial li:nth-of-type(7) a {
    color: white;
    background: #B22222;
}
ul.sosial li:nth-of-type(8) a {
    background: #FFA500;
}
ul.sosial li a i {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
ul.sosial li a img {
    border-width: 0;
    vertical-align: middle;
}
ul.sosial li:hover a {
    opacity:0.6;
    filter:alpha(opacity=60);
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

Untuk warna, silahkan utak-atik sendiri dengan memanfaatkan Kode Warna yang bisa kamu intip Di sini atau Di sini. Sementara untuk efek Hovernya silahkan ganti sesuai keinginan. Pada contoh, saya hanya menggunakan opacity atau keburaman gambar. Dan jika kamu ingin ikon-ikon ini tidak membulat, silahkan hapus -webkit-border-radius: 50px; -moz-border-radius: 50px; dan border-radius: 50px;nya.

Untuk membuat CSS bekerja, tambahkan kode seperti di bawah ini di tempat yang kamu inginkan

<ul class="sosial">
    <li><a href="#"><i class="fa fa-google"></i></a></li>
    <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li><a href="#"><i class="fa fa-comment"></i></a></li>
    <li><a href="#"><i class="fa fa-skype"></i></a></li>
    <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
    <li><a href="#"><i class="fa fa-rss"></i></a></li>
</ul>

Jangan lupa untuk mengubah tanda # dengan url yang kamu inginkan

Simpan dan lihat hasilnya.