Assalamu alaikum Wr Wb.
Dalam pertemuan kali ini, saya akan memaparkan mengenai CSS Ikon.
Cara Menambahkan Ikon
Cara paling sederhana untuk menambahkan ikon ke halman HTML Anda, adalah dengan ikon perpustakaan , seperti Font Keren.
Menambahkan nama ikon kelas yang ditentukan untuk setiap elemen inline HTML (seperti <i> atau <spasi>).
Ikon Font Awesome
Untuk menggunakan ikon font awesome, tambahkan baris berikut di dalam <head> bagian dari halaman HTML Anda.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Catatan: Tidak ada download atau installasi yang diperlukan!
Contoh
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
</body>
</html>
Hasil
Ikon Bootstrap
Untuk menggunakan glyphicons Bootstrap, tambahkan baris berikut di dalam <head> bagian dari halaman HTML Anda.
<link rel="stylesheet" href="https://maxcdn.bootstracdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Catatan: Tidak ada download atau installasi yang diperlukan!
Contoh
<!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>
Hasil
Ikon Google
Untuk menggunakan ikon Google, tambahkan baris berikut di dalam <head> bagian dari halaman HTML Anda.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Catatan: Tidak ada download atau installasi yang diperlukan!
Contoh
<!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>
Hasil
REFERENSI
No comments:
Post a Comment