Ikon dasar
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!
Anda menempatkan Font Keren ikon dengan menggunakan awalan fa dan nama ikon ini.
Contoh
Kode berikut:
<!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-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>Hasil di:
Font Keren dirancang untuk digunakan dengan elemen inline. The <i> dan <span> elemen yang banyak digunakan untuk ikon.
Juga diketahui bahwa jika Anda mengubah font-size atau warna wadah ikon, ikon berubah. hal yang sama berlaku untuk bayangan, dan apa pun yang akan mewarisi menggunakan CSS.
Ikon yang lebih besar
The fa-lg (33% increase) , fa-2x , fa-3x , fa-4x , atau fa-5x kelas yang digunakan untuk meningkatkan ikon ukuran relatif terhadap kontainer mereka.
Contoh
Kode berikut:
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
Hasil di:
Tip: Jika ikon Anda semakin dipotong di atas dan bawah, meningkatkan line-height.
Daftar Ikon
The fa-ul dan fa-li kelas digunakan untuk menggantikan peluru default dalam daftar unordered.
Contoh
Kode berikut:
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List
icons</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
<li><i class="fa-li
fa fa-square"></i>List icons</li>
</ul>Hasil di:
- List icons
- List icons
- List icons
Berbatasan dan Menarik Ikon
The fa-border , fa-pull-right atau fa-pull-left kelas digunakan untuk kutipan menarik atau ikon artikel.
Contoh
Kode berikut:
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Hasil di:
animasi Ikon
The fa-spin kelas mendapat apapun ikon untuk memutar, dan fa-pulse kelas mendapat apapun icon untuk memutar dengan 8 langkah.
Contoh
Kode berikut:
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i
class="fa fa-spinner fa-pulse"></i>
Hasil di:
Catatan: IE8 dan IE9 tidak mendukung animasi CSS3.
Diputar dan Flipped Ikon
The fa-rotate-* dan fa-flip-* kelas yang digunakan untuk memutar dan flip ikon.
Contoh
Kode berikut:
<i class="fa fa-shield"></i>
<i class="fa fa-shield
fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield
fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>Hasil di:
Ikon ditumpuk
Tumpukan beberapa ikon, menggunakan fa-stack kelas pada orang tua, yang fa-stack-1x kelas untuk ikon berukuran teratur, dan fa-stack-2x ikon yang lebih besar.
The fa-inverse kelas dapat digunakan sebagai warna ikon alternatif. Anda juga dapat menambahkan kelas ikon yang lebih besar untuk orang tua untuk lebih mengontrol ukuran tersebut.
Contoh
Kode berikut:
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin
fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle-thin<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter
fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera
fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"
style="color:red;"></i>
</span>
fa-ban on fa-cameraHasil di:
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
Lebar Tetap Ikon
The fa-fw kelas digunakan untuk mengatur ikon pada lebar tetap. Kelas ini berguna ketika ikon lebar yang berbeda membuang keselarasan. Terutama berguna di navlists Bootstrap dan kelompok daftar.
Contoh
<div class="list-group">
<a href="#" class="list-group-item"><i
class="fa fa-home fa-fw"></i> Home</a>
<a href="#"
class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
<a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i>
Applications</a>
<a href="#" class="list-group-item"><i class="fa
fa-cog fa-fw"></i> Settings</a>
</div> Cobalah sendiri " bootstrap
Font Keren juga karya besar dengan semua komponen Bootstrap.