Label

Teknik Font awesome

3 Mei 2023

Font Awesome

Pengenalan

Font Awesome adalah situs layanan penyedia icon untuk pengembang web.

Mengapa Font Awesome?

  • Banyak pilihan Icon tersedia secara gratis.
  • Dapat di gunakan di setiap perangkat apapun.

Persiapan

Penulisan Font Awesome terbagi menjadi dua cara, yang masing masing memiliki fungsi yang sama.

Tempelkan kode berikut di atas tag </head> terlebih dahulu.

Html 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

Html 
<script crossorigin='anonymous' src='https://kit.fontawesome.com/a062562745.js'></script>

Jika anda telah memiliki aku Font awesome Anda dapat Login jika belum punya Anda dapat mendaftar terlebih dahulu.

Cari Icon Fontawesome yang ingin di tampilkan

1. Elemen Html

Yang pertama adalah dengan menggunakan tag elemen Html, Ini adalah cara yang sangat sederhana dalam pembuatannya.

Membuat dengan Tag

Anda dapat membuat elemen Html menggunakan tag <i> atau <span> untuk menampilkan icon. Namun lebih di sarankan baiknya menggunakan tag <i>.

Setelah itu tambahkan atribut class dengan nilai fa dan fa-home untuk memanggil icon.

Nilai fa sebagai bagian yang harus ada untuk memanggil icon.

Nilai fa-home sebagai pemilih icon apa yang ingin di tampilkan.

Html 
<h2>Ikon Rumah</h2>
<p>Contoh ikon rumah</p>
<i class="fa fa-home"></i>

Contoh
Mengubah besar ukuran

Anda juga dapat mengubah besar ukuran dengan menambahkan nilai fa-lg (33% lebih besar), fa-2x, fa-3x, fa-4x, dan fa-5x.

Html 
<h2>Size Ikon</h2>
<p>Contoh ikon rumah ukuran fa-2x</p>
<i class="fa fa-home fa-2x"></i>

Contoh
Merubah warna icon

Pada dasarnya icon akan mengikuti warna pada text, Anda dapat merubah warnanya dengan menambahkan atribut style.

Atau tambahkan nilai fa-inverse untuk merubah warna icon menjadi putih.

Html 
<h2>Warna Ikon</h2>
<p>Contoh ikon rumah warna merah</p>
<i class="fa fa-home" style="color: red;"></i>

Contoh
Menggabungkan Ikon

Bagaimanakah menggabungkan dua icon menjadi satu, misalnya Anda ingin menggunakan icon ( ) dan ( ) menjadi satu.

Yang pertama Anda harus membuat wadahnya lalu tambahkan atribut class dengan nilai fa-stack.

Html 
<span class="fa-stack">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-home fa-stack-1x fa-inverse"></i>
</span>

Contoh :

yang ditulis duluan akan menjadi yang paling bawah dalam tumpukan (stack) ikon.

Membuat ikon list

Membuat ikon list dengan fa-ul dan fa-li.

Html 
<ul class="fa-ul">
  <li><i class="fa-li fa fa-home"></i> Home</li>
  <li><i class="fa-li fa fa-book"></i> Book</li>
  <li><i class="fa-li fa fa-globe"></i> Globe</li>
  <li><i class="fa-li fa fa-archive"></i> Archive</li>
</ul>

Contoh :
Memutar ikon

Memutar ikon menggunakan fa-rotate-* dan fa-flip-*.

Html 
<i class="fa fa-shield"></i> normal<br/>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br/>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br/>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br/>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br/>
<i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical

Contoh :
Animasi Ikon

Animasi ikon dengan fa-spin dan fa-pulse.

Html 
<i class="fa fa-cog fa-spin fa-2x fa-fw"></i>
<span class="sr-only">Loading…</span>

<i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
<span class="sr-only">Loading…</span>

Contoh : Loading… Loading…

2. Css

Yang kedua adalah dengan menggunakan Css

Css 
p.demo:before {
  content: "\f007";
  font-family: FontAwesome;
}

Html 
<p class="demo"> About</p>

About

Label