Forum | tutorial pengembangan web terbaru
 

Icons tutorial



Cara Tambah Ikon

Untuk menyisipkan ikon, tambahkan nama kelas ikon untuk setiap elemen HTML inline.

The <i> dan <span> elemen secara luas digunakan untuk menambah ikon.

Semua ikon di perpustakaan ikon di bawah ini, adalah ikon scalable vector yang dapat disesuaikan dengan CSS (size, color, shadow, etc.)


Keren Ikon Font

Untuk menggunakan Font Keren ikon, tambahkan baris berikut di dalam <head> bagian dari halaman HTML Anda:

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

Catatan: Tidak ada download atau instalasi diperlukan!

Contoh

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.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>
Cobalah sendiri "

bootstrap Ikon

Untuk menggunakan glyphicons Bootstrap, tambahkan baris berikut di dalam <head> bagian dari halaman HTML Anda:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

Catatan: Tidak ada download atau instalasi diperlukan!

Contoh

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/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>
Cobalah sendiri "

Google Icons

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 instalasi 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>
Cobalah sendiri "

Untuk daftar lengkap dari semua ikon yang mengagumkan Font, kunjungi Font Keren ikon referensi .

Untuk daftar lengkap dari semua Bootstrap Glyphicons, kunjungi referensi Bootstrap Glyphicon .

Untuk daftar lengkap dari semua ikon Google, kunjungi ikon referensi Google .