Tutorial Belajar CSS Part 26 – Menampilkan icon dengan CSS

bySetyo Wibowo ID - 0

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





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 :





<!DOCTYPE html>
<html>
<head>
	<title>Icon Font Awasome</title>
<link rel="stylesheet" href="fontawasome/css/all.min.css">
</head>
<body>
<i class="fab fa-accessible-icon"></i>
<i class="far fa-bell"></i>
<i class="fas fa-bell"></i>
</body>
</html>




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 :





<!DOCTYPE html>
<html>
<head>
	<title>Icon Google</title>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
</head>
<body>
	<span class="material-icons">
	android
	</span>

	<span class="material-icons">
	autorenew
	</span>
</body>
</html>








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.


Tags:

Post a Comment (0)

أحدث أقدم