Blogger'da Font Awesome Kullanımı
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 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:
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:
Ş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:
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:
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ı:
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:
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:
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.
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.
Teşekkürler hocam, bu güzel bilgilendirme yazısı için. Kullandığım bir blogger sitesi için deneyeceğim...
YanıtlaSilinternet teknolojisinin harika ürünlerinden birisidir kuşkusuz font awesome, bloggerda da kullanılmasında fayda var.
YanıtlaSilawesome fontu explorer destekliyormu
SilWordpres sitelerde de kullanilabilirmi acaba serdar hocam
YanıtlaSilElbette kullanılabilir.
SilElinize sağlık. Sitemde hemen deneyeceğim. Benim sitemide ziyaret edebilirsiniz.
YanıtlaSilmrsdreamer2.blogspot.com.tr
Font Awesome ile birlikte teknoloji iyice gelişti internet alanında.
YanıtlaSilblogla alakası yok biliyorum ama günlerdir çaresizce uğraşıyorum....
YanıtlaSilhocları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 !!!!
Güzel açıklama olmuş, teşekkürler.
YanıtlaSilGüzel bir yazı olmuş teşekkürler. Hali hazırda bir blogumda kullanıyordum ama dahada bilgilenmiş oldum.
YanıtlaSilhttp://adsensepatronu.blogspot.com.tr/
http://blogpatronu.blogspot.com.tr/
Teşekkürler...
YanıtlaSilhttp://www.fooduristik.com/
Sosyal medya iconları için font awesome kullanıyorum.
YanıtlaSilYine Faydalı bir paylaşım yapmışsınız. İşimize yarayacağı kesin.
YanıtlaSilFont Awesome bütün sitelerimde var nerdeyse
YanıtlaSilHocam 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ıtlaSilKullanılabilir bence.Blog yazılarına daha bir renk katacağını düşünüyorum.
YanıtlaSilTeş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 :)
YanıtlaSilhttp://oyunmedyasi.blogspot.com/2016/08/prey-2-sonunda-cikiyor-inceleme-tanitim.html
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ıtlaSilMerhabalar @Information About Hotels;
YanıtlaSilSorununuzu 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
Serdar kardeş eline sağlık. Paylaşımların son derece okunaklı ve anlaşılır. Sitemi ziyaret edip eksiklerimi belirtmeni önemle arz ederim
YanıtlaSilhttp://www.blogdershanesi.com/
Aradığınız bütün Temaları veya Eklentileri burada bulabilirsiniz. Bir göz atın derim.
Eline sağlık arkadaşım.
YanıtlaSilTeş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
YanıtlaSilhttps://sagliksporvebeslenme.blogspot.com.tr/
Font Awesome her zaman yardımıma yetişiyor.
YanıtlaSilBana 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Ö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.
Siladsensepatronu.blogspot.com.tr
Paylaşım için teşekkürler. font awesome u blogger sitemde kullanıyorum.
YanıtlaSilBunları biliyordum da siteye (head) nasıl eklendiğini bilmiyordum, teşekkürler hocam, sayenizde öğrendim...
YanıtlaSilMerhaba hocam, Bunları emoloji olarak blogger yorum kutusunda kullandırma şansımız varmı?
YanıtlaSilGüzel paylaşımınız için teşekkür ederim
YanıtlaSilBlogumda sag üste koydum cok şıklar
YanıtlaSilblogu ma koydun çok hoş durdu
YanıtlaSilÇ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ıtlaSilBlogger yazı fontu konusunda çok zayıf
YanıtlaSilFont Awesome bütün sitelerimde var nerdeyse
YanıtlaSilEllerinize sağlık faydalı bir paylaşım daha
YanıtlaSilÖncelikle Merhabalar, çok faydalı bir konuya değinmişsiniz teşekkürler. Bir şey danışmak istiyorum size bu ikonları menü ye ekleme imkanımız yokmudur ? (icon)Ana Sayfa gibi ?
YanıtlaSil