Harika Yazı Tipi Simgeleri

Font Awesome simgeler kitaplığı, 519 ücretsiz ölçeklenebilir vektör simge sağlar. Bu kütüphane hem kişisel hem de ticari kullanım için tamamen ücretsizdir. Başlangıçta Bootstrap için tasarlanmış olan bu simgeler kolayca özelleştirilebilir.

Yazı Tipi Kitaplığını Yükleme

Font Awesome kitaplığını yüklemek için aşağıdaki satırı kopyalayıp web sayfasının <head> bölümüne yapıştırın.

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

Simgeyi Kullanma

Font Awesome birkaç simge sağlar. Bunlardan birini seçin ve simge sınıfının adını <body> etiketi içindeki herhangi bir HTML öğesine ekleyin. Aşağıdaki örnekte, Hindistan para birimi simgesini kullandık.

<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>

Aşağıdaki çıktıyı üretecektir -

Boyutu Tanımlama

Aşağıda gösterildiği gibi, boyutunu CSS kullanarak ve sınıf adıyla birlikte kullanarak bir simgenin boyutunu artırabilir veya azaltabilirsiniz. Verilen örnekte bedeni 6 em olarak ilan ettik.

<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>

Aşağıdaki çıktıyı üretecektir -

Rengi Tanımlamak

Tıpkı boyut gibi, CSS kullanarak simgelerin rengini tanımlayabilirsiniz. Aşağıdaki örnek, Hindistan para birimi simgesinin renginin nasıl değiştirileceğini gösterir.

<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>

Kategori Listesi

Font Awesome, aşağıdaki kategorilerde 519 simge sağlar -

Web Uygulama Simgeleri
El simgeleri
Ulaşım Simgeleri
Cinsiyet Simgeleri
Dosya Türü Simgeleri
Spinner Simgeler
Form Kontrolü Simgeleri
Ödeme Simgeleri
Grafik Simgeleri
Para Birimi Simgeleri
Metin düzenleyici Simgeler
Yön Simgeleri
Video Oynatıcı Simgeleri
Marka Simgeleri

Bu simgelerden herhangi birini kullanmak için, bu bölümde verilen programlardaki sınıf adını istenen simgenin sınıf adıyla değiştirmelisiniz. Bu Ünitenin (Font Awesome) sonraki bölümlerinde, çeşitli Font Awesome simgelerinin kullanımını ve ilgili çıktılarını kategori bazında açıkladık.