Font Awesome nedir? nasıl kullanılır? | Web bulutu

Font Awesome nedir? nasıl kullanılır?

font awesome nedir ve nasıl kullanılır

Font awesome, web geliştiricilerinin olmazsa olmazları arasında yer alır. Bildiğiniz üzere web sitelerinde ufak tefek birçok icon bulunmaktadır. Tasarım esnasında uygun iconların bulunması, efektlerin uygulanması, web sitesini yavaşlatması gibi birçok sorunları olan bu işlem için, “font icon” denen bir sistem geliştirilmiş. Kullanımı oldukça basit olan bu sistemi, sizlerin de kesinlikle kullanmasını isterim.

Neler var bir göz atalım;

http://fortawesome.github.io/Font-Awesome/icons/ tıklayarak geliştirici adresine girin. Aşağıya doğru indiğinizde  iconları  göreceksiniz, bunları  daha  önce  web sitelerinde de  gördüğünüzden eminim :).  Uygulamayı sayfamıza  dahil ettikten sonra, css yardımıyla, Renklendirme, Boyutlandırma, Hover(efekt) gibi birçok işlemden  geçirerek  istediğimiz  gibi kullanacağız. Lafı fazla  uzatmadan anlatıma geçelim.

 

1.Adım – Download işlemi ; 

http://fortawesome.github.io/Font-Awesome/ tıklayın ve açılan sayfada  “download” butonundan  dosyaları indirin ve sıkıştırılmış dosyadan çıkartın.

Klasörü açınca içinde bir klasör daha  olduğunu göreceksiniz, onu kopyalayın ve  projenizin Css klasörü içine  atın.


 

2. adım – Projeye  dahil etme; 

Css klasörünün içine  attığımız  font awesome klasörünü açtığımız zaman  içinde  “css” adlı bir klasör olduğunu  göreceksiniz. Onun  içisinde 1 tane  kullanacağımız  css dosyası var. Aslında  ikisi de  aynı dosyadan  ibaret, sadece  birisi sıkıştırılmış (hız bakımından  tavsiye ederim). Ben anlatırken , “font-awesome.min.css” sıkıltırılmış dosyasını ekleyeceğim, diğerinin eklenişi de  aynı zaten  söylememe gerek bile yok.

İndex  dosyamızı açıyoruz ve projemize font awesome  css dosyasını dahil ediyoruz.

font-awesome-nasil-kullanilir
font-awesome-nasil-kullanilir

 

Dosyayı indirip kullanmak dışında,  bir de uzaktan kullanımı mevcut. Onu da  Buraya  tıklayarak, açılan sayfadaki cdn adres kodunu index’inize  dahil edebilirsiniz.

font-awesome-cdn-kullanimi

 


 

3. Adım – İcon fontları kullanma;

http://fortawesome.github.io/Font-Awesome/icons/ tıklayarak, açılan sayfadan  rastgele veya  beğendiğiniz bir iconun üzerine tıklayın.

Aşağıdaki gibi bir kod ile karşılaşacaksınız, onu kopyalayın ve sayfanızda  kullanmak istediğiniz alana  ekleyin.

font-awesome-2016-anlatimi


 

4. Adım – Css ile müdahale etme;

Fark ettiyseniz “i” etiketine  2 ayrı class girilerek oluşturulmuş bir sistem  bu. Yani biz de “fa-mixcloud” classına  müdahale ederek işlemleri uygulayabiliriz. Tabi örnekde  göstermiş olduğum class üstteki icona  ait, her birinde  farklı classlar  mevcut. Benim eklediğim icon için bir takım işlemler  yaptım, ve aşağıda  ekran  görüntüsünü paylaştım, inceleyebilirsiniz.

 

font-awesome-css-uygulama

Font-size değerini 48px yaptıktan sonra  yanına bir de !important eklemeyi unutmayın  yoksa  boyutlandırma işlemi uygulanmayacaktır. Sebebi ise, projeye  dahil ettiğimiz css dosyasında  tüm iconların defauld boyutlandırmaları olduğu için, bizim yazacağımız boyutu sistem göz ardı edecektir. !important kelimesi, daha önce  değer atanmışsa  bile, şimdi yazdığım değer  geçerli olsun anlamında  kullanılıyor. Eğer css’de  bir işlem yapmak istiyorsunuz ama fontlarda  değişiklik olmuyorsa bu tekniği kullanın birde.


 

Son olarak  şöyle bir örnekle kapatalım 🙂

See the Pen Font awesome kullanma by Bulut (@bulutaylak) on CodePen.

 

Bir sonraki yazımda  görüşmek üzere 🙂

Web bulutu

 

Bir önceki yazımız olan İnput veya formlarda otomatik tamamlamayı devre dışı bırakma başlıklı makalemizde html5 ve İnput hakkında bilgiler verilmektedir.


Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir