Anda dapat membuat ikon sosial yang memuat cepat dengan CSS murni dan tidak perlu lagi menggunakan gambar untuk menampilkan ikon sosial di website Anda.
Kami telah mengganti ikon sosial dengan huruf dan menatanya dengan CSS, sehingga tampak serupa, tetapi dapat memuat dengan cepat.
Dengan menggunakan CSS murni ini menghapus beberapa permintaan server http sehingga akan dimuat secara instan, tidak seperti gambar yang perlu waktu untuk dimuat.
Bahkan jika website Anda menggunakan CDN, ini akan mengurangi juga biaya bandwidth CDN untuk memuat gambar-gambar tersebut. Atau Anda bisa mencoba CSS sprite, ini bahkan lebih cepat.
Style CSS ini dibuat lebih mudah dengan kenyataan bahwa orang-orang mengenali warna dan huruf yang membantu mereka mengidentifikasi ikon media sosial seperti Facebook, Twitter, Google+, dan Linkedin.
CSS Ikon Media Sosial
Berikut adalah tombol kode HTML yang bisa Anda tambahkan ke widget sidebar Anda atau di mana pun Anda ingin menempatkan kode.
berisi satu container #socialiconsbox
untuk style semua ikon serta bertindak sebagai kotak yang dapat ditata. Setiap ikon diwakili oleh huruf dan ditata oleh CSS. Masing-masing memiliki class.
Ikon sosial yang dapat ditata untuk menerapkan style ke semua ikon secara keseluruhan dan masing-masing ikon memiliki class individu untuk masing-masing style setiap ikon secara terpisah juga, misalnya untuk menerapkan warna dan padding yang berbeda.
<div id="socialiconsbox"> <a class="facebook socialicons" href="https://www.facebook.com/abc" title="Facebook " target="_blank">f</a> <a class="twitter socialicons" href="https://twitter.com/abc" title="Twitter " target="_blank">t</a> <a class="googleplus socialicons" href="https://plus.google.com/abc" title="Google+" target="_blank">g+</a> <a class="linkedin socialicons" href="https://linkedin.com/abc" title="Linkedin" target="_blank">in</a> </div>
Penataan CSS Ikon Media Sosial
Sekarang Anda perlu menambahkan id
dan class
ke file style.css
atau file css primer lainnya. Saya telah menambahkan beberapa parameter sehingga Anda dapat mengatur syle ikon Anda dengan sempurna tergantung pada desain situs Anda.
#socialiconsbox { margin: 10px 0; } .socialicons { color: #FFF; font-size: 1.5em; margin-right: 6px; font-family: georgia, serif; letter-spacing: -1px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } .facebook { background:#3B5998; padding:2px 10px; } .twitter { background:#00ACED; padding:2px 10px; } .googleplus { background:#D2412E; padding:2px 3px; } .linkedin { background:#4A9CC9; padding: 2px 6px; }
Style CSS Kustom
Idenya di sini adalah menggunakan #socialiconsbox
sebagai container Anda, sehingga Anda dapat mengatur seluruh kotak dengan ikon yang Anda inginkan, seperti menambahkan batas, atau menata warna tautan dll. Saya telah menerapkan margin di bagian atas dan bawah.
Untuk class .socialicons
adalah class utama yang diterapkan pada teks – font yang digunakan adalah Georgia karena ini adalah font ini aman dan untuk ikon Googleplus sangat terlihat bagus dengan jenis font ini. Spasi huruf dikurangi untuk memungkinkan teks ‘g+’ dan ‘in’ menjadi berdekatan.
Padding bervariasi karena jumlah huruf yang berbeda pada ikon. Teks ini dilengkapi dengan batas-batas lengkung ringan yang kompatibel dengan browser untuk tampilan tombol yang bagus – tambahkan batas untuk membuat tombol yang lebih melingkar. Anda dapat meningkatkan ukuran font untuk mendapatkan ikon yang lebih besar.
Menampilkan ikon CSS Anda
Setelah Anda menerapkan style CSS, silahkan segarkan browser Anda untuk melihat seberapa cepat tampilan ikon media sosial. Lakukan eksperimen dengan CSS untuk membuat ikon yang lebih menakjubkan.
Sumber: QuickOnlineTips.com
Leave a Reply