Yazar Ol Yazar Girişi
Yazar Girişi
E-Posta Adresi
Şifre
Şifremi Unuttum
Asp.Net .Net MVC PHP & MySQL C# PhotoShop CSS jQuery AlgoritmA MsSQL Server HTML Ruby
- Kategoriler -
Türkçe
English
German
Tüm Kategoriler
Font Awesome İcon set kullanımı

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

 

Sosyal Hesabında Paylaş

3761 görüntüleme

Yorumlar
Adınız Soyadınız
Mail Adresiniz
Doğrulama Kodu

Bildiklerimiz.Net Bildiklerimizi paylaşıyoruz, bilmediklerimizi öğreniyoruz. biz bunları yapıyoruz ya siz...

© 2019 Bildiklerimiz Tüm hakları saklıdır.
bir Bildiklerimiz.Net projesidir.