Tutorial Belajar CSS Part 26 – Menampilkan icon dengan CSS

Posted on Posted in Tutorial 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

 

Font Awasome Icons

Untuk bagian pertama ini kita akan menggunakan library Font Awasome, dalam contoh ini kita akan menggunakan external CSS jadi harus menggunakan koneksi internet agar dapat memanggil External CSS, perhatikan skrip dibawah ini :

 

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

icon-font-awasome

Penjelasan :

  1. pada skrip <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”> kita telah membuat link dengan external css, untuk mengimport library css dari font-awasome, cara ini harus menggunakan koneksi internet, jika anda tidak ingin menggunakan koneksi internet silahkan download dari library cssnya https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css lalu silahkan buat link dengan mode external CSS, 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 http://fontawesome.io/icons/

 

 

Bootstrap Icons

Berikutnya kita bisa memanfaatkan fitur dari Framework Twitter Bootstrap, perhatikan skrip dibawah ini :

 

Semisal kita simpan dengan nama icon-bootstrap.html, lalu kita buka di browser maka hasilnya :

Penjelasan :

  1. Pada skrip <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”> kita telah membuat link dengan external css milik framework Bootstrap, untuk mengimport library css dari Bootstrap, cara ini harus menggunakan koneksi internet. jika anda tidak ingin menggunakan koneksi internet silahkan download library cssnya https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css lalu silahkan buat link dengan mode external CSS seperti penjelasan sebelumnya.
  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 Bootstrap : https://getbootstrap.com/docs/3.3/components/

 

Google 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://www.w3schools.com/icons/google_icons_intro.asp

 

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.

 

 

 

 

 

 

 

 

Leave a Reply

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