Setelah sebelumnya kita membahas mengenai Alert pada bootstrap. Kali ini kita akan membahas mengenai salah satu element kecil tetapi memiliki pengaruh besar pada tampilan website yang kita buat yaitu Icons / Ikon.
Pada tutorial kali ini merupakan tutorial singkat mengenai ikon yang bisa kita gunakan untuk menggambarkan suatu hal misalnya kontak whatshapp dengan ikon whatshapp, ikon email untuk menandakan email , dan lain sebagainya.
Dalam bootstrap 3 kita dapat menggunakan library Gliyphicons, tetapi pada bootstrap 4 yang akan kita gunakan tidak mendukung library tersebut. Jadi, kita harus menggunakan libarry dari pihak lainnya.
Section Artikel
Penyedia Library ikon
Banyak penyedia ikon untuk web design yang dapat digunakan. Dibawah ini saya akan memberi contoh library ikon yang biasa saya gunakan:
Font Awesome Icons (https://fontawesome.com/v4.7.0/icons/)
Dalam library font awesome kita dapat melakukan import terhadap ikon yang tersedia dapat dengan cara kita download library nya dahulu (offline method) atau secara online method (tanpa download atau instal). Untuk online method kita hanya memasukkan link dari library font awesome ikon ke dalam tag <head>, sama seperti memasukkan library bootstrap. Script alamat yang digunakan adalah:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
Cara penggunaannya dalam script adalah dengan memasukkan class dalam element html seperti tag <i>,<span>, <p>, dll.
Contoh penggunaannya adalah:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>IKON</h1>
<p>Ikon digunakan untuk menjelaskan banyak hal: <i class="fas fa-thumbs-up"></i></p>
</div>
<div class="container">
<p>Others:</p>
<i class="fas fa-cloud"></i>
<i class="fas fa-coffee"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</div>
</body>
</html>
Library Ikon Bootstrap 3
Library glyphicons ini hanya dapat digunakan pada bootstrap 3. dengan memasukkan alamat library ke dalam tag <head>. Dan memasukkan class-class ikon kedalam tag <i> atau <span> seperti sebelumnya.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
contoh penggunaannya:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <i class="glyphicon glyphicon-cloud"></i> <i class="glyphicon glyphicon-remove"></i> <i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-envelope"></i> <i class="glyphicon glyphicon-thumbs-up"></i> </body> </html>
Google Icons
Selain merupakan salah satu mesin pencari terbaik saat ini Google ternyata juda membuat salah satu library untuk ikon. Cara memasukkan nya masih sama seperti sebelumnya ya teman – teman. Berikut adalah script alamat library nya
<link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons”>
contoh penggunaannya:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <i class="material-icons">cloud</i> <i class="material-icons">favorite</i> <i class="material-icons">attachment</i> <i class="material-icons">computer</i> <i class="material-icons">traffic</i> </body> </html>
Sebenarnya masih banyak lagi penyedia ikon yang ada contohnya:
- Iconics (https://useiconic.com/open/)
- Opticons (https://octicons.github.com/)
- Ionicons (http://ionicons.com/)
- Bytesize (https://github.com/danklammer/bytesize-icons)
- dll
Itulah beberapa library yang biasa saya pakai dalam design website. Untuk memasukkan atau menggunakan library nya sama semua ya teman teman kita harus mendownload atau bisa menggunakan nya secara online dan memasukkan link nya di antara tag <head> dan </head>
Sekian dari saya terima kasih.
