Ikon W3.CSS
Perpustakaan Ikon
Dengan W3.CSS Anda dapat menggunakan icon library yang Anda sukai, seperti:
- Font Ikon Keren
- Ikon Desain Material Google
- Ikon Bootstrap
Menggunakan Perpustakaan Ikon
Untuk menyisipkan ikon:
- Sertakan perpustakaan ikon dari CDN (Content Delivery Network) di bagian <head>.
- Tambahkan nama kelas ikon ke elemen HTML sebaris apa pun.
Tip: Elemen <i> dan <span> banyak digunakan untuk menambahkan ikon.
Untuk mengontrol ukuran ikon, ubah properti ukuran font ikon, atau gunakan salah satu kelas ukuran w3 :
- w3-kecil
- w3-kecil
- w3-besar
- w3-xxlarge
- w3-xxxlarge
- w3-jumbo
Beberapa Ikon Font Keren
fa fa-rumah
fa-bar
fa fa-panah-kiri
fa fa-panah-kanan
fa fa-pencarian
fa fa-dekat
fa fa-refresh
fa fa-sampah
sakit
fa fa-car
truk fa fa
fa fa-pesawat
Contoh
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-trash"></i>
</body>
</html>
Untuk daftar lengkap ikon: Kunjungi referensi ikon kami
Beberapa Ikon Desain Material Google
rumah
rumah
rumah
Tidak bisa
Tidak bisa
Tidak bisa
panah_kembali
panah_kembali
panah_kembali
panah_maju
panah_maju
panah_maju
Cari
Cari
Cari
menutup
menutup
menutup
menyegarkan
menyegarkan
menyegarkan
menghapus
menghapus
menghapus
orang
orang
orang
arah_mobil
arah_mobil
arah_mobil
pengiriman_lokal
pengiriman_lokal
pengiriman_lokal
local_airport
local_airport
local_airport
Contoh
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">cloud</i>
<i class="material-icons">delete</i>
</body>
</html>
Beberapa Ikon Bootstrap
rumah
menu hamburger
panah_kembali
panah_maju
Cari
menghapus
menyegarkan
sampah
pengguna
mengajukan
mencetak
pesawat
Contoh
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-trash"></i>
</body>
</html>