18 Ağustos 2016 Perşembe

Blogger'da Font Awesome Kullanımı

35 yorum
Hızlı, pratik, kullanıcı dostu olması gibi nedenlerle son zamanlarda çoğu web projesinde gördüğümüz Font Awesome hakkında bilgi vermek istiyorum. Font Awesome nedir, ne değildir, ne işe yarar, nasıl kullanılır gibi soruların yanıtlarını bu yazıda vermeye çalışacağım.

font awesome


Font Awesome Nedir?

Font Awesome, vektörel ikonların font olarak bir araya geldiği, @font-face özelliğiyle çalıştığı için kullanımı oldukça kolay olan açık kaynaklı bir font/ikon kütüphanesidir.

Kısacası font awesome herkesin kullanımına açık olan bir font yani yazı tipi topluluğudur. Fakat bildiğimiz fontlarda harfler ve rakamlar varken font awesome’da ikonlar vardır.


Font Awesome Kullanmanın Avantajları Nelerdir?

Yukarıdaki tanımda da okuduğunuz üzere font awesome’ı kullanmaktaki amaç eski tip .jpg, .png, .gif grafik ikonlarının yerine daha hızlı, modern ve basit karakter ikonları göstermektir. Grafik ikonlar yerine font awesome ikonları kullanmanın avantajları kısaca şunlardır:

  • Blogda kullanacağınız ikonlar grafik olmadığı için sayfanın açılması daha hızlı olacaktır.
  • Font awesome ikonları hiçbir optimizasyona gerek duymadan mobil cihazlara uyacaktır.
  • Çok geniş bir ikon paketi mevcut olduğundan sadece basit bir HTML kodu kullanarak yüzlerce ikondan ücretsiz faydalanabileceksiniz.
  • İkonlar birbiriyle uyumlu olduğundan ve hepsi aynı familyadan geldiğinden görsel açıdan şık olacaktır.

Blogger’da Font Awesome Nasıl Kullanılır?

Font awesome ikonlarını Blogger’da kullanmanız için yapmanız gereken ilk şey font awesome dosyasını tanıtmak tır. Bunun için Şablon > HTML’yi Düzenle diyerek <head> kodunun altına şu kodu eklemelisiniz:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

Şimdi  font awesome'ın ikon kütüphanesini ziyaret ederek kullanmak istediğimiz ikonun üzerine tıklayalım ve o ikona ait kodu alalım. Örnek olarak ben futbol topu ikonunu seçtim ve bu ikonu blogda göstermek için yapmam gereken tek şey o ikona ait HTML kodunu istediğim yere eklemek. Futbol topu ikonunun kodu şu:

<i class="fa fa-futbol-o"></i>

Bunu kodu eklediğimizde elde ettiğimiz sonuç ise şu:

Futbol topu örneğinden devam edelim. Futbol topu ikonunu daha farklı boyutlarda kullanmak istediğimizi düşünelim. Bunun için mevcut koda çok küçük bir ekleme yapacağız. Farklı ikon boyutları için odlar şu şekilde:

<i class="fa fa-futbol-o fa-lg"></i>
<i class="fafa-futbol-o fa-2x"></i>
<i class="fa fa-futbol-o fa-3x"></i>
<i class="fa fa-futbol-o fa-4x"></i>
<i class="fa fa-futbol-o fa-5x"></i> 

Ortaya çıkan sonuç ise şu şekilde:




Örneklerle devam ediyoruz. Şimdi de yine font-awesome'ın nimetlerinden faydalanarak sosyal ikonlardan bir yatay menü yapalım. Bunun için kullanacağımız kod şu şekilde olmalı:

<a href="#"><i class="fa fa-facebook fa-lg"></i></a>
<a href="#"><i class="fa fa-twitter fa-lg"></i></a>
<a href="#"><i class="fa fa-instagram fa-lg"></i></a>
<a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
<a href="#"><i class="fa fa-linkedin fa-lg"></i></a>
<a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
<a href="#"><i class="fa fa-youtube fa-lg"></i></a>
<a href="#"><i class="fa fa-rss fa-lg"></i></a>

Ortaya çıkan sonuç ise şu şekilde:




İkonlarının renginin yeşile döndüğünü fark ettiniz sanırım. Bunun nedeni sosdyal takip hesapları için ikonlara link vermem ve Blog Hocam'da tüm linklerin renginin yeşil olarak tanımlanmış olması. Sizin blogunuzda linkler kırmızı ise ikonlar da otomatik olarak kırmızıya dönüşecektir.

Fakat font awesome ikonlarını CSS ile istediğiniz gibi kontrol edebilirsiniz. Örneğin her ikonu farklı renk yapabilirsiniz. Bunu da bir örnekle gösterelim isterseniz. Bunun için her bir class için stil kodu tanımlamamız yeterli olacaktır:

<a href="#"><i class="fa fa-facebook fa-lg"></i></a><style>.fa-facebook{color:#3b5998}</style>
<a href="#"><i class="fa fa-twitter fa-lg"></i></a><style>.fa-twitter{color:#00aced}</style>
<a href="#"><i class="fa fa-instagram fa-lg"></i></a><style>.fa-instagram{color:#125688}</style>
<a href="#"><i class="fa fa-google-plus fa-lg"></i></a><style>.fa-google-plus{color:#dd4b39}</style>
<a href="#"><i class="fa fa-linkedin fa-lg"></i></a><style>.fa-linkedin{color:#007bb5}</style>
<a href="#"><i class="fa fa-pinterest fa-lg"></i></a><style>.fa-pinterest{color:#cb2027}</style>
<a href="#"><i class="fa fa-youtube fa-lg"></i></a><style>.fa-youtube{color:#bb0000}</style>
<a href="#"><i class="fa fa-rss fa-lg"></i></a><style>.fa-rss{color:#ff6600}</style>


Ortaya çıkan sonuç ise şu şekilde:



Aynı örnek üzerinden devam edelim. Font awesome yardımıyla gadget olarak ekleyebileceğimiz bir sosyal takip eklentisi yapalım. Bunun için yukarıdaki örnekte kullandığımız ikonları alt alta sıralayalım ve yanlarına da takip seçeneklerini yazalım. Bunun için kodu şu şekilde düzenliyoruz:
<ul class="fa-ul">
<li><a href="#"><i class="fa-li fa fa-facebook fa-lg"></i>Facebook</li></a><style>.fa-facebook{color:#3b5998}</style>
<li><a href="#"><i class="fa-li fa fa-twitter fa-lg"></i>Twitter</li></a><style>.fa-twitter{color:#00aced}</style>
<li><a href="#"><i class="fa-li fa fa-instagram fa-lg"></i>Instagram</li></a><style>.fa-instagram{color:#125688}</style>
<li><a href="#"><i class="fa-li fa fa-google-plus fa-lg"></i>Google+</li></a><style>.fa-google-plus{color:#dd4b39}</style>
<li><a href="#"><i class="fa-li fa fa-linkedin fa-lg"></i>LinkedIn</li></a><style>.fa-linkedin{color:#007bb5}</style>
<li><a href="#"><i class="fa-li fa fa-pinterest fa-lg"></i>Pinterest</li></a><style>.fa-pinterest{color:#cb2027}</style>
<li><a href="#"><i class="fa-li fa fa-youtube fa-lg"></i>YouTube</li></a><style>.fa-youtube{color:#bb0000}</style>
<li><a href="#"><i class="fa-li fa fa-rss fa-lg"></i>RSS</li></a><style>.fa-rss{color:#ff6600}</style>
</ul>

Ortaya çıkan sonuç ise şu şekilde oluyor:


Kodlarda değişiklikler yaparak ve Font Awesome resmi sitesindeki dökümanlar ile örneklerden faydalanarak bu ikonlardan çok güzel çalışmalar yapabilirsiniz.

35 yorum:

  1. Teşekkürler hocam, bu güzel bilgilendirme yazısı için. Kullandığım bir blogger sitesi için deneyeceğim...

    YanıtlaSil
  2. internet teknolojisinin harika ürünlerinden birisidir kuşkusuz font awesome, bloggerda da kullanılmasında fayda var.

    YanıtlaSil
    Yanıtlar
    1. awesome fontu explorer destekliyormu

      Sil
  3. Wordpres sitelerde de kullanilabilirmi acaba serdar hocam

    YanıtlaSil
  4. Elinize sağlık. Sitemde hemen deneyeceğim. Benim sitemide ziyaret edebilirsiniz.
    mrsdreamer2.blogspot.com.tr

    YanıtlaSil
  5. Font Awesome ile birlikte teknoloji iyice gelişti internet alanında.

    YanıtlaSil
  6. blogla alakası yok biliyorum ama günlerdir çaresizce uğraşıyorum....
    hocların hocası sayın hocam ve burada benden çok bilgisayardan anladıklarına iman ettiğini düşündüğü bloggerlar!!!
    pinterest'e neden girilemiyor??? girmenin bir yolu var mı???
    mobil erişimde problem yaşamıyorum ama hangi tarayıcıyı kullanırsam kullanıyim pc de giremiyorum!!!
    bir bilginiz varsa paylaşırken birine (!) anlatır gibi anlatırsanız beni çok mutlu edersiniz yoksa yakıcam kendimi bu meydanlarda !!!!

    YanıtlaSil
  7. Güzel açıklama olmuş, teşekkürler.

    YanıtlaSil
  8. Güzel bir yazı olmuş teşekkürler. Hali hazırda bir blogumda kullanıyordum ama dahada bilgilenmiş oldum.

    http://adsensepatronu.blogspot.com.tr/

    http://blogpatronu.blogspot.com.tr/

    YanıtlaSil
  9. Teşekkürler...

    http://www.fooduristik.com/

    YanıtlaSil
  10. Sosyal medya iconları için font awesome kullanıyorum.

    YanıtlaSil
  11. Yine Faydalı bir paylaşım yapmışsınız. İşimize yarayacağı kesin.

    YanıtlaSil
  12. Font Awesome bütün sitelerimde var nerdeyse

    YanıtlaSil
  13. Hocam google'un wordpress gibi Ratings yani oylama eklentisi var mıdır, genelde tasarımda böyle eklentiler görüyorum fakat google aramalarında başlık altında bu yıldızlar (oylama) görünmüyor

    YanıtlaSil
  14. Kullanılabilir bence.Blog yazılarına daha bir renk katacağını düşünüyorum.

    YanıtlaSil
  15. Teşekkür ederim kaliteli paylaşımınız için :) Başarılarınızın devamını diler şu paylaşımımı okumanızı sizlere tavsiye ederim. Özellikle oyun severlere :)
    http://oyunmedyasi.blogspot.com/2016/08/prey-2-sonunda-cikiyor-inceleme-tanitim.html

    YanıtlaSil
  16. hocam benim bir bloggerim var kurban olim yardımcı olun bana yetersiz içerik diyip duruyo 4 sefer gnderdim onaylanmadı lütfen biriniz yardım edin 190 tane özgün ingilizce otel tanımı var lütfen yardımcı olurmusunuz bana 7 aydır uğraşıyorum informationabouthotels.blogspot.com sitem bu lütfen mail adresim muhammetturhan085@gmail.com bir yerden bana ulaşıp yardımcı olacak bir arkadas varsa mutlu olurum teşekkür ederim

    YanıtlaSil
  17. Merhabalar @Information About Hotels;
    Sorununuzu gördüm. Benim sitemde AdSense platformuna nasıl kayıt olunacağı detaylı bir şekilde yazmaktadır. ''Google AdSense Yetersiz İçerik Hatası'' adlı yazımı incelemeni tavsiye ederim. İyi bloglamalar!

    adsensepatronu.blogspot.com.tr

    YanıtlaSil
  18. Serdar kardeş eline sağlık. Paylaşımların son derece okunaklı ve anlaşılır. Sitemi ziyaret edip eksiklerimi belirtmeni önemle arz ederim

    http://www.blogdershanesi.com/

    Aradığınız bütün Temaları veya Eklentileri burada bulabilirsiniz. Bir göz atın derim.

    YanıtlaSil
  19. Teşekkürler.. Ben de blog adresimde bu ikonlardan kullanıyorum. Daha doğrusu başka bir temada görüp kodlarını kendi blog adresimde paylaştım. Bence çok hoş görünüyorlar ve renklerini kolayca değiştirebilmemiz bence bir avantaj

    https://sagliksporvebeslenme.blogspot.com.tr/

    YanıtlaSil
    Yanıtlar
    1. https://www.cilgintavuklar.com/kaydol.php?ref=534401

      Sil
  20. Font Awesome her zaman yardımıma yetişiyor.

    YanıtlaSil
  21. Bana Adsenseden bildirim geldi sadece youtubeden para kazanabilirsiniz diye bende blog sayfamın linkini gerekli yere yazdım ama blogger.com iş ortağı olamaz diyo ne yapmalıyım hocam yardım edin lütfen şimdiden teşkkürler

    YanıtlaSil
    Yanıtlar
    1. Öyle bir bildirim gelemez yanlış görmüş olmalısınız. AdSense reklam ağına Blogger üzerinden başvurun. Buton aktif değilse yazılarımı inceleyin.

      adsensepatronu.blogspot.com.tr

      Sil
  22. Paylaşım için teşekkürler. font awesome u blogger sitemde kullanıyorum.

    YanıtlaSil
  23. Bunları biliyordum da siteye (head) nasıl eklendiğini bilmiyordum, teşekkürler hocam, sayenizde öğrendim...

    YanıtlaSil
  24. Merhaba hocam, Bunları emoloji olarak blogger yorum kutusunda kullandırma şansımız varmı?

    YanıtlaSil
  25. Güzel paylaşımınız için teşekkür ederim

    YanıtlaSil
  26. Blogumda sag üste koydum cok şıklar

    YanıtlaSil
  27. blogu ma koydun çok hoş durdu

    YanıtlaSil
  28. Çok faydalı gerçekten çok teşekkürler. Blogunuzu devamlı takipteyim ve kendi sitelerimde sizden feyz alarak yazıyorum. Teşekkürler ve kolay gelsin.

    YanıtlaSil
  29. Blogger yazı fontu konusunda çok zayıf

    YanıtlaSil
  30. Font Awesome bütün sitelerimde var nerdeyse

    YanıtlaSil

Picardes

LİNKLER