Cara Untuk Membuat Social Media Icon (Social Media Badge) dengan Mengunakan HTML/CSS dan Font Awesome dengan Mudah

Posted on 252 views

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.

Tutorial Cara membuat Social Media Link pada Website 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)

Untuk penggunaan CDN Font Awesome, silahkan Copy-kan code berikut di dalam tag head (<head> …di sini… </head>) pada file project anda :
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css”>

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

Untuk penggunaan Font Awesome anda dapat men-download terlebih dahulu font awesome melalui official page-nya : Font Awesome.
–  Kemudian silahkan ekstrak dan letakkan folder hasil ekstrak di dalam folder assets pada project anda (project_anda/assets/…).
– Selanjutnya anda dapat men-define atau mendeklarasikan lokasi css font awesome pada file index.html atau halaman view pada project anda. Misalkan berikut :
<link rel=”stylesheet” href=”./assets//font-awesome/all.min.css”>

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 :

NoNamePreviewSource CodeCopy
1Facebook
2Twitter
3Pinterest
4Instagram
5Skype
6Linkedin
7Tumblr
8Whatsapp
9Youtube
10Blogger
11WordPress
12Reddit
13Flickr
14Vimeo
15Snapchat
16Github
Selain yang telah saya sebutkan pada table di atas masih banyak lagi variasi font awesome dalam bentuk social media yang dapat gunakan, dan bisa anda temukan melalui menu search icon pada official page Font Awesome.
Gambar Menu Search pada Website Font Awesome
Anda dapat mengcopy source code font awesome yang telah tersedia pada table di atas, lalu silahkan sesuaikan value href dengan link atau url social media anda, misalkan berikut :
<a class=”social-media-icon” href=”https://www.facebook.com/SkyLight.Animation“>
<span class=”fab fa-facebook”></span>
</a>
Anda wajib mengganti tujuan dari link pada social icon, dengan cara menggati url yang berwarna merah, dengan link atau url social media yang anda miliki.
Terakhir jangan lupa untuk meng-copy-kan CSS untuk mengatur tampilan dari Icon Social Media. Berikut CSS untuk mengatur styleing icon social media di yang telah buat diatas :

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

Oke… cukup sekian artikel kali ini yang membahas tentang cara membuat icon sosial media beserta link-nya menggunakan HTML, CSS dan Font Awesome, banyak kekurangan kami mohon maaf… sekian dan terima kasih..
~Semoga Bermanfaat~

.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”); }

Leave a Reply

Your email address will not be published. Required fields are marked *