Günümüzde bir çok websitesi bootstrap, materialize gibi hazır mobil uyumlu kütüphaneler kullanmakta. Bu kütüphanelerin içinde var olan icon paketleri bazen yetersiz kalıyor font awesome icon ihtiyacınızı neredeyse tamamen karşılayacak kadar çok çeşitli geniş bir icon sete sahip. Web sitelerinde font awesome nasıl kullanılır, nasıl entegre edilir konusunu işleyeceğiz.

Adım adım font awesome nasıl entegre edilir başlayalım.

  • font awesome sitesinden paketi bilgisayarımıza indirelim,
  • İndirdiğimiz zip dosyasını açın ve içerisinden bize lazım olan fonts ve css klasörlerini web projemizin index dosyası ile aynı dizine atalım.
  • index.html dosyasında head etiketinin üst kısmına;
<link rel="stylesheet" href="css/font-awesome.min.css">

şeklinde çağırma işlemini gerçekleştirelim.

  • Ardından kullanmak istediğimiz iconu seçmek için font awesome sayfasını ziyaret edelim ben örnek olması açısından ilk ikonu seçtim. Seçtiğim iconun kodu;
<i class="fa fa-address-book" aria-hidden="true"></i>

Sonuç olarak index.html kodları şu şekilde;

<!DOCTYPE html>
<html>
<head>
	<title>Font Awesome</title>
	<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-address-book" aria-hidden="true"></i>
</body>
</html>