Iklan bawah header

Belajar CSS : Menampilkan Icon dengan CSS

Icon

Pada pembahasan kali ini kita akan mempelajari tentang bagaimana cara menampilkan icon dengan menggunakan CSS, Untuk menampilkan icon kita akan memanfaatkan external CSS yang dimiliki framework css seperti Bootstrap, jadi tidak perlu untuk memasukan iconnya satu persatu.

Baik langsung saja kita mulai pembahasannya ...

Font Awesome Icons

Yang pertama kita akan mulai dengan menggunakan library Font Awesome. Untuk menggunakannya kalian bisa mengakses alamat web : https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Font awesome

Download terlebih dahulu font awesome free for the web, setelah itu extract file yang telah didownload tersebut, sehingga akan terbuat folder dengan nama fontawesome-free-5.15.2-web. Agar lebih mudah dalam pemanggilan filenya, maka kita harus merename fontawesome-free-5.15.2-web dengan nama fontawesome, lalu kita akan gunakan file css dengan nama all.min.css, posisi file ini berada pada folder css.

Untuk penggunaanya, coba perhatikan contoh 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>
Icon font awesome

Dari contoh diatas, pada code <link rel="stylesheet" href="fontawesome/css/all.min.css"> kita telah membuat link dengan eksternal css, untuk mengimport library css dari font-awesome.

Selanjutnya bisa kita gunakan perintah menggunakan tag <i> </i> dengan menambahkan class dengan value berdasarkan icon yang diinginkan, untuk jenis icon bisa dilihat pada dokumentasi font-awesome https://fontawesome.com/icons kalian bisa mencari icon yang free untuk digunakan.

Google Icons

Dokumentasi dari Google icons bisa kalian lihat pada halaman :

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

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

Kita juga bisa menampilkan icon dengan memanfaatkan library google, coba perhatikan contoh berikut 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>
Google icon

Dari contoh diatas, pada code <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> kita telah membuat link dengan eksternal css milik Google, untuk mengimport library google, tentu cara ini harus menggunakan koneksi internet.

Selanjutnya kita bisa gunakan perintah tag <i> </i> lalu tambahkan class dengan value material-icons dan berikan text diantara tag <i></i> untuk menentukan icon mana yang akan ditampilkan.

Untuk referensi lebih lanjut bisa kalian akses : https://material.io/resource/icons/?style=baseline

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel