Membuat Icon Social Bookmark dengan CSS

Membuat Icon Social Bookmark dengan CSS - Jika kita membuat sebuah karakter atau tampilan dari sesuatu dengan menggunakan CSS maka diperlukan beberapa kode untuk membuatnya. Sama seperti dengan membuat icon atau simbol, tapi kenapa harus menggunakan kode CSS? Bukankah sekarang sudah ada font Awesome yang disediakan oleh Astraunotweb yang ditulis ulang oleh Kang Ismet di blognya?

Jika penggunaannya dibandingkan dengan font awesome, memang lebih baik font awesome karena tidak terlalu menggunakan banyak kode CSS, namun tidak ada salahnya juga jika kita menggunakan kode CSS dalam menampilkan icon atau simbol seperti yang terlihat pada tampilan icon sosial bookmark berikut ini

Icon Google+, Facebok dan Twitter berikut ini menggunakan kode CSS bukan menggunakan gambar :)


Salin Kode CSS Berikut Kedalam Template Blog: .googleplus { position: relative; font-size: 20px; height: 2em; width: 2em; background: #2C2C2C; display: block; border-radius: 0.3em; overflow: hidden; } .googleplus::before { left: -0.1em; font-size: 2.9em; top: -0.36em; position: absolute; display: block; content: "g"; color: #EDEEE8; font-family: georgia; } .googleplus::after { left: 0.9em; top: -0.3em; position: absolute; display: block; content: "+"; font-size: 1.25em; font-weight: bold; color: #EDEEE8; font-family: georgia; } Kode Pemanggil. Salin Kode HTML Berikut Kedalam Artikel Blog: <div class="googleplus"></div>

class="cssicon cssico">
Salin Kode CSS Berikut Kedalam Template Blog:
.facebook {
position: relative;
font-size: 20px;
height: 2em;
width: 2em;
background: #3b5998;
display: block;
border-radius: 0.3em;
}
.facebook::before {
left: 0.85em;
top: 0.7em;
position: absolute;
display: block;
content: "";
height: 0.3em;
width: 0.85em;
background: #EDEEE8;
}
.facebook::after {
left: 1.1em;
top: 0.1em;
position: absolute;
display: block;
content: "";
height: 1.5em;
width: 0.3em;
border-radius: 0.4em 0 0 0;
border: 0.3em solid #EDEEE8;
border-right: 0;
border-bottom: 0;
}

Kode Pemanggil. Salin Kode HTML Berikut Kedalam Artikel Blog:
<div class="facebook"></div>

Salin Kode CSS Berikut Kedalam Template Blog:
.twitter {
position: relative;
font-size: 20px;
height: 2em;
width: 2em;
background: #0084B4;
display: block;
border-radius: 0.3em;
}
.twitter::before {
left: 0.55em;
top: 0.4em;
position: absolute;
display: block;
content: "";
height: 1.2em;
width: 0.32em;
background: #94C5FF;
border-radius: 0.5em 0.5em 0 0.9em;
box-shadow: 0 0 0 0.15em #EDEEE8;
}
.twitter::after {
left: 0.87em;
top: 1.143333em;
position: absolute;
display: block;
content: "";height: 0.32em;
width: 0.62em;
background: #94C5FF;
border-radius: 0 0.4em 0.4em 0;
box-shadow: 0 -0.57em 0 -0.15em #94C5FF,-0.2em -0.57em 0 -0.15em #94C5FF,0 -0.57em 0 0em #EDEEE8;
border: 0.15em solid #EDEEE8;
border-left: 0;
}

Kode Pemanggil. Salin Kode HTML Berikut Kedalam Artikel Blog:
<div class="twitter"></div>

Bagaimana? Tertarik untuk menggunakan icon sosial bookmark dengan CSS diatas? Silahkan, kode CSS dan HTML untuk social bookmark diatas sudah berada didalamnya dengan cara sorot icon CSS untuk menampilkan kodenya :)

Untuk kode icon dengan CSS yang lainnya serta sumber artikel ini bisa dipelajari di Kumpulan Icon dan Simbol dengan CSS