Tutorial Belajar CSS Part 26 – Menampilkan icon dengan CSS

Dalam tutorial kali ini kita akan membahas mengenai bagaimana sih cara menampilkan icon dengan menggunakan CSS, kita akan memanfaatkan External CSS yang dimiliki framework CSS seperti Bootstrap, jadi anda tidak perlu memasukkan iconnya satu persatu.

Kita akan memanfaatkan class agar icon dapat ditampilkan, baik langsung saja kita akan coba untuk menampilkan icon


 

Video Tutorial Belajar CSS – Menampilkan Icon dengan CSS


 

 

Font Awasome Icons

Untuk bagian pertama ini kita akan menggunakan library Font Awasome

Saat tutorial ini dibuat Font Awasome ada di versi 5, untuk dapat menggunakan bisa mengakses alamat dibawah ini : https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Download dulu Font Awasome Free for the web, dimana hasil download file CSSnya akan kita gunakan secara offline sehingga kita perlu download terlebih dahulu.

Setelah didownload silahkan extract file tersebut, sehingga terbuat folder dengan nama fontawesome-free-5.13.1-web, dalam contoh ini saya rename jadi fontawasome biar lebih mudah dalam pemanggilannya, kita akan gunakan file css dengan nama all.min.css, posisi file ini berada pada folder css.

sehingga untuk penggunaan adalah seperti berikut ini, perhatikan skrip dibawah ini :

Semisal Kita Simpan dengan nama icon-font-awasome.html, lalu kita buka di browser :

Penjelasan :

  1. pada skrip <link rel=”stylesheet” href=”fontawasome/css/all.min.css”> kita telah membuat link dengan external css, untuk mengimport library css dari font-awasome, jika anda belum mengetahui mode external CSS silahkan dipelajari ditutorial sebelumnya cara penulisan kode css di HTML
  2. Berikutnya anda bisa menggunakan perintah menggunakan tag <i></i> lalu tambahkan class dengan value berdasarkan icon yang anda inginkan, untuk jenis icon bisa dilihat di dokumentasi font-awasome https://fontawesome.com/icons anda bisa mencari icon yang free untuk bisa digunakan

 

Google Icons

Untuk Dokumentasi dari Google Icons bisa anda lihat di halaman :

Dokumentasi Icon yang bisa digunakan : https://material.io/resources/icons/?style=baseline

Dokumentasi cara penggunaan : https://github.com/google/material-design-icons

Anda juga bisa memanfaatkan dari library google untuk menampilkan icon, silahkan perhatikan skrip dibawah ini :

 

Semisal kita simpan dengan nama icon-google.html lalu kita buka di browser maka hasilnya adalah sebagai berikut :

Penjelasan :

  1. pada skrip <link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons”> kita telah membuat link dengan external css milik Google, untuk mengimport library css dari Google, cara ini harus menggunakan koneksi internet.
  2. Berikutnya anda bisa menggunakan perintah menggunakan tag <i></i> lalu tambahkan class dengan value material-icons dan berikan text diantara tag <i></i> untuk menentukan icon mana yang akan ditampilkan
  3. Untuk referensi lebih lanjut silahkan mengakses : https://material.io/resources/icons/?style=baseline

 

Baik itu dulu teman – teman yang bisa kita bahas mengenai bagaimana cara menampilkan icon dengan menggunakan CSS, jika ada yang ingin didiskusikan silahkan tinggalkan pesan dikolom komentar, sekian dulu sampai jumpa di tutorial CSS Selanjutnya.

One thought on “Tutorial Belajar CSS Part 26 – Menampilkan icon dengan CSS

Leave a Reply

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