Font Awesome İcon set kullanımı
2333 görüntüleme

Merhaba Arkadaşlar,

Bildiklerimiz.net sitesinde de kullandığımız Font Awesome icon settinin kullanımından bahsedeceğim.

Font Awesome size şuan için 519 tane icon sunmaktadır. Bu iconlar her türlü ihtiyacınızı karşılayacaktır, adamlar bizleri düşünerek her geçen gün yeni iconlar eklemeye devam ediyorlar. burda bulunan iconlar svg formatında olduğundan istediğiniz gibi işleyebilirsiniz. Büyültüp küçülte bilir, rengini yönünü değiştirebilirsiniz.

yavaştan girş yapalım

ilk önce Font Awesome iconlarını kullanmak için (burayı tıklayarak indirebilirsiniz) dosyaları projenizin içine almanız gerekmektedir.

indirdiğiniz dosyaları

css leri projenize aktarmak için 

<link rel="stylesheet" href="css/font-awesome.min.css">

yeterli olacaktır. artık bu iconları kullanmaya başlayabiliriz.

örnek olarak facebook iconu kullanalım

<i class="fa fa-facebook"></i>

yukarıdaki kod size bir "f" iconu verecektir. class ile istediğimiz iconu çekebiliriz. bunlar div içinde span içinde p gibi çeşitli taglarda kullanabilirsiniz.

<div class="fa fa-book"></div> kitap

<span class="fa fa-twitter"></span> Twitter

<i class="fa fa-eye"></i> Göz

bu şekilde istediğiniz gibi arttırabiliriz.

 

bu kullandığınız iconlar sizin yazı renginiz ve yazı fontunuza göre değişiklik gösterecektir. Bunları siz kendiniz de değiştirebilirsiniz.

 

<i class="fa fa-facebook" style="color:#ff0000; font-size:40px"></i>

facebook iconunun rengini kırmızı yaptık ve 40px olarak büyülttük.

daha fazla detayı zaten Font Awesome sitesinde bulabilirsiniz. Aklınıza takılan kısımları sorabilirsiniz.

daha sonra görüşmek dileğiyle...

 


Bildiklerimizi paylaşıyoruz, bilmediklerimizi öğreniyoruz.
biz bunları yapıyoruz ya siz...
© 2016 Bildiklerimiz.Net Tüm hakları saklıdır.