Web Sitesinde Font Awesome İcon Kullanımı
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 | Barış Akbaş</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-address-book" aria-hidden="true"></i>
</body>
</html>
Diğer bir yöntemi ise CDN kullanarak sitenize Font Awesome iconlarını entegre edebilirsiniz.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
bu kodu script bölümüne yapıştırırsanız sitenize iconlar çalışır hale gelicektir.
Etiketler
Yorumlar+1
Harika teş ederim sağol knk