Pada umumnya suatu website memiliki account social media, dapat berupa official atau pesonal account, yang biasaya digunakan bisa sebagai contact atau backlink dan lain sebagainya. Okee… oleh sebab itu pada artikel kali ini saya akan berbagi tutorial cara membuat link social media dalam bentuk icon dengan menggunakan Font Awesome.
Apa itu Font Awesome?
Font Awesome adalah salah satu penyedia toolkit berupa font berbentuk icon yang diatur dalam CSS (Cascading Style Sheets) dan digunakan untuk mendukung tampilan dari suatu website. Untuk pembahasan lebih lanjut tentang Font Icon anda dapat membacanya pada artikel berikut : Mengenal dan Memahami Font Icon.
Mengapa menggunakan Font Icon (Font Awesome)?
Kelebihan dari pengguanan font icon ketika anda membuat link Social Media dengan menggunakan Font Awesome adalah :
- Dari segi tampilannya akan tampak lebih simple, menarik, dan juga informatif.
- Lebih hemat kapasitas dan lebih ringan ketika halaman wesite di-load oleh web browser, dibandingan dengan menggunkaan gambar.
Cara Membuat Media Sosial Badge (Link Social Media) dengan Menggunakan Font Awesome
Berikut langkah-langkah yang dapat anda lakukan dalam membuat Social link pada website anda dengan menggunakan HTML, CSS dan Font Awesome :
Pertama-tama persiapkan terlebih dahulu Font Awesome yang akan digunakan, pada artikel kali ini saya akan memenggunakan Font Awesome 5.11.2.1. Anda dapat menggunakan yang sudah online CDN ataupun meng-install nya secara offline pada local project anda.
Jika anda membangun website secara offline maka sangat direkomendasikan untuk mendownload font awesome, dengan begitu font awesome dapat tampil pada tampilan website anda ketika dijalankan secara offline. Namun apabila anda menggunakan layanan cms online misalkan Wordpress.com, dan Blogger untuk penggunaan Font Awesome sangat disarankan menggunakan yang telah di host pada suatu penyedia layanan tertentu atau CDN (Content Delivery Network).
Berikut ini cara menyisipkan / men-define Font Awesome pada website :
1. CDN Font Awesome (online)
Lalu silahkan Save. (jika anda menggunakan font awesome CDN, pastikan komputer anda terkoneksi dengan internet, jika tidak font nya tidak akan muncul).
2. Download Font Awesome
Setalah Font Awesome selesai anda sisipkan pada project atau halaman website anda, selanjutnya anda dapat memanggil icon dengan menggunakan tag yang digunkanan untuk menampilkan text secara inline <b></b>, <i></i>, <u></u> atau <span></span> dengan disisipi class yang value-nya berisi nama dari masing-masing font awesome yang didefinisikan pada file CSS toolkit-nya. Berikut ini daftar font awesome yang menampilkan logo social media atau suatu vendor tertentu :
| No | Name | Preview | Source Code | Copy |
|---|---|---|---|---|
| 1 | ||||
| 2 | ||||
| 3 | ||||
| 4 | ||||
| 5 | Skype | |||
| 6 | ||||
| 7 | Tumblr | |||
| 8 | ||||
| 9 | Youtube | |||
| 10 | Blogger | |||
| 11 | WordPress | |||
| 12 | ||||
| 13 | Flickr | |||
| 14 | Vimeo | |||
| 15 | Snapchat | |||
| 16 | Github |
<span class=”fab fa-facebook”></span>
</a>
<style type=”text/css”>
.social-media-icon {
padding: 5px;
background: #222;
color: #fff;
border-radius: 4px;
}
a.social-media-icon:hover{
background: #fff!important;
color: #222!important;
}
</style>
Contoh Source Code
Mungkin code HTML dan CSS berikut ini dapat digunakan untuk sebagai contoh bagi anda untuk membuat Social Media Button pada website anda :
.facebook{ background: #3c5a98!important; } .twitter{ background: #1da1f2!important; } .blogger{ background: #ff5722!important;; } .instagram{ background: #262626!important;; }
Hasil Interpretasi Contoh Source Code HTML dan CSS
Anda dapat meletakkan script HTML yang telah anda buat tersebut pada bagian manapun di website anda, misalkan Navbar / navigasi bar, header, sidebar, atau bahkan footer. Apabila suatu website memiliki link yang merujuk pada social media pengarang/ author maka visitor ataupun viewer dapat lebih mudah untuk meng-follow account sosial media anda atau akan berdiskusi tentang artikel yang telah anda publikasikan di blog atau website anda.
.social-media-icon{ padding: 5px; background: #222; margin:5px; color: #fff!important; border-radius: 4px; border:solid 1px #444; } a.social-media-icon:hover{ background: #fff!important; color: #222!important; } function copySC_font(id) { var copyText = document.getElementById(id); copyText.select(); document.execCommand(“copy”); }