Ikon Font Keren

Pustaka ikon Font Awesome menyediakan 519 ikon vektor skalabel gratis. Perpustakaan ini sepenuhnya gratis untuk penggunaan pribadi dan komersial. Awalnya dirancang untuk Bootstrap, ikon ini dapat disesuaikan dengan mudah.

Memuat Perpustakaan Font

Untuk memuat pustaka Font Awesome, salin dan tempel baris berikut di bagian <head> halaman web.

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

Menggunakan Ikon

Font Awesome menyediakan beberapa ikon. Pilih salah satunya dan tambahkan nama kelas ikon ke elemen HTML mana pun di dalam tag <body>. Dalam contoh berikut, kami telah menggunakan ikon mata uang India.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
   </head>
	
   <body>
      <i class = "fa fa-inr"></i>
   </body>
	
</html>

Ini akan menghasilkan keluaran sebagai berikut -

Mendefinisikan Ukuran

Anda dapat menambah atau mengurangi ukuran ikon dengan menentukan ukurannya menggunakan CSS dan menggunakannya bersama dengan nama kelas, seperti yang ditunjukkan di bawah ini. Dalam contoh yang diberikan, kami menyatakan ukurannya sebagai 6 em.

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.mysize {font-size: 10em;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr mysize"></i>
   </body>
	
</html>

Ini akan menghasilkan keluaran sebagai berikut -

Mendefinisikan Warna

Sama seperti ukuran, Anda dapat menentukan warna ikon menggunakan CSS. Contoh berikut menunjukkan cara mengubah warna ikon mata uang India.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.custom {font-size: 6em; color: red;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr custom"></i>
   </body>
	
</html>

Daftar Kategori

Font Awesome menyediakan 519 ikon dalam kategori berikut -

Ikon Aplikasi Web
Ikon Tangan
Ikon Transportasi
Ikon Gender
Ikon Jenis File
Ikon Pemintal
Ikon Kontrol Formulir
Ikon Pembayaran
Ikon Bagan
Ikon Mata Uang
Ikon editor teks
Ikon Arah
Ikon Pemutar Video
Ikon Merek

Untuk menggunakan salah satu dari ikon ini, Anda harus mengganti nama kelas dalam program yang diberikan dalam bab ini dengan nama kelas dari ikon yang diinginkan. Dalam bab-bab mendatang dari Unit ini (Font Awesome), kami telah menjelaskan berdasarkan kategori penggunaan dan output masing-masing dari berbagai ikon Font Awesome.