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.