FontAwesome: Sitelerde Hep Gördüğünüz Küçük İkonlar

Bir çoğunuz girdiğiniz sitelerin bazı yerlerinde küçük küçük ikonlar görmüşsünüzdür. Özellikle giriş yap, üye ol gibi butonların hemen solunda küçük ikonlar bulunur. Belki çok fark etmemişsinizdir ama sitenin daha hoş ve göz alıcı görünmesini sağlayan şeylerden biri de bu ufak ikonlardır. Aslında bunlar her ne kadar ikon gibi görünse de teknik olarak aslında harftir. Şöyle düşünün, Çince’de bir çok harf bulunuyor. Hatta öyle ki bazı harfler bizim dilimizde sözcük sayılıyor. İşte FontAwesome’da da sitede gördüğünüz her ikon başka bir harfe tekabül ediyor.

FontAwesome nedir?

FontAwesome projesi Dave Gandy tarafından oluşturulmuş bir projedir. Bildiğiniz gibi son zamanlarda sitelerin hızlı açılması, açılırken olabildiğince az yükleme yapması için bir çok yöntem geliştiriliyor. Kimisi CSS sıkıştırma gibi yöntemler kullanırken, kimisi sitedeki resimlerin kalitesini düşürüyor. Normalde sitelerde ikonlar hep kullanılıyordu ama çok da kullanışlı değildi. Çünkü, hepsi birer resimdi ve resim eklemek de kodlama açısından biraz zahmetli bir iştir. Ayrıca sitelerin o kadar resmi yüklemesi de vakit alıyor. Öyle ki, eğer resimler büyükse, bu daha da fazla vakit israfı demektir. İşte Dave Gandy de bu projesi bu sorunları aşmak amacıyla başlatmıştır. FontAwesome’ın kısaca mantığı, resimleri harflere çevirmek ve sitede de bunları birer harf gibi göstermektir. Bunu yapmak için de yeni bir yazı tipi oluşturman gerekir. Nasıl Arial, Century Gothic gibi yazı tipleri varsa, FontAwesome da aynı buna benzer bir yazı tipidir. Ancak bunda harfler aslında resimlerden oluşuyor.

 

Aslında bu projenin bi’ kısmı daha önce düşünülmüştü. Yani harfleri aslında resim olan yazı tipleri mevcuttu. Ama sitede kullanılacak şekilde bir proje yapılmamıştı. Yani FontAwesome kadar kullanışlı bir yöntem yoktu. Ayrıca şunu da belirtmeliyim ki FontAwesome tamamen açık kaynak kodlu bir projedir ve isteyen herkes sitesinde bunu kullanabilir. İsterseniz buraya tıklayarak lisansını kontrol edebilirsiniz.

Mutlaka dikkatinizi çekmiştir, yazının sağında solunda küçük küçük resimler var. Mesela yazının başında, sol tarafında bir kamera var. Hemen altında bir çöp kutusu var. Bunların ikisi de her ne kadar resim gibi görünse de aslında bunlar iki farklı harftir. Hatta denemek isterseniz farenizle üstüne gelip sağ tıklayın. Eğer resim olsaydı, sağ tıkladıktan sonra çıkan sekmelerde “Resmi farklı kaydet” gibi bir yazı olması gerekirdi. Ama öyle bir şey olmayacak, çünkü teknik olarak onlar birer harf.

Bunun tek güzel yanı bu da değil. İstersem o küçük ikonun boyutunu ayarlayabiliyor. Rengini de ayarlayabiliyorum. Hatta bazılarına animasyon bile verebiliyorum. İstersem yazının sol tarafına yerleştirebiliyor, istersem sağ tarafına yerleştirebiliyorum. Bu ve bunun gibi bir çok şeyi rahatlıkla yapabiliyorum. Tek yapmam gereken nasıl kullanıldığını bilmek. İşte tam da bu noktada size güzel bir haberim var, projenin resmi sitesinde nasıl kullanılacağını örneklerle, harika ve anlaşılır bir şekilde anlatmışlar.

İsterseniz bir kaç tane örnek göstereyim, daha sonra da nasıl kullanılacağını anlatayım.

Yukarıdaki örneğin kodu:

Başka bir örnek:

fa-lg (%33 büyütme)
fa-2x (2 katı büyütme)
fa-3x (3 katı büyütme)
fa-4x (4 katı büyütme)
fa-5x (5 katı büyütme)

Yukarıdaki örneğin kodu:

İlk baktığınızda biraz karışık görünebilir, ama mantığını anladığınız zaman hiç de öyle olmadığını göreceksiniz.
Ayrıca biraz da CSS ve HTML bilginiz olmalı. Aksi halde kullanırken ufak tefek zorluklar yaşayabilirsiniz.

Bu özelliği her sitede kullanabilir miyim?

FontAwesome özelliğini sitenizde direkt olarak kullanamayabilirsiniz. Eğer WordPress temasına sahip bir siteniz varsa %90 FontAwesome özelliğini destekliyordur ve yukarıdaki kodlarla istediğiniz şekilde kullanabilirsiniz. Bunun dışında bazen kullandığınız ikonlar sitenizde görünmeyebilir. Bunun sebebi ise eski bir sürümünü kullanıyor olabilirsiniz ve yeni sürümdeki bir ikonu kullandığınızda sitenizde görünmeyecektir. Ama merak etmeyin, yeni sürümü rahatlıkla sitenize getirebilirsiniz.

FontAwesome’u nasıl kurabilirim?

Eğer siteniz FontAwesome özelliğini desteklemiyorsa, yapmanız gereken bir kaç şey olacaktır. Burada biraz kod bilgisine ihtiyaç duyacaksınız. Varsayalım ki, WordPress alt yapısı dışında kendiniz HTML, CSS ve PHP ile kodladığınız bir siteniz var. Her sitenin bildiğiniz gibi “<headi>” dediğimiz bir bölümü vardır. Sizin yapmanız gereken bu “head” etiketlerinin arasına bir satırlık bir kod yapıştırmanız. Bu kodu nereden bulabilirim? Tabii ki FontAwesome’un resmi sitesine girmeliyiz. Daha sonra da başlangıç kısmına gideceğiz. Yani, http://fontawesome.io/get-started/ adresine gidiyoruz. Siteye girdikten sonra hemen alttaki kutucuğa e-posta adresimizi yazıyoruz ve yanındaki yeşil butona tıklıyoruz. Daha sonra onlar bize bir e-posta gönderecekler. İşte bu postanın içinde bizim “head” etiketlerinin arasına koyacağımız kod olacak. Bize gönderdikleri kodda hiçbir değişiklik yapmadan “head” etiketlerinin arasına yapıştıracağız. Örneğin;

Yukarıda yazmış olduğum kod bana özel olarak hazırlanmış koddur. Siz isterseniz onu da kullanabilirsiniz tabii ki. Ama kendinize özel bir kodunuzun olması tabii ki daha iyi olacaktır. Bunu yaptıktan sonra artık istediğiniz şekilde FontAwesome’ın tüm özelliklerinden faydalanabilirsiniz.

WordPress dışında başka bir açık kaynak alt yapıya sahip, hazır bir sistem kullanıyorsanız, aynı işlemleri onda da yapabilirsiniz. Ancak farklı sistemlerde “head” etiketlerini bulmakta zorluk çekebilirsiniz. Ancak bir çok alt yapı aynı mantık üzerine kurulur. Büyük ihtimal sitenizin dosyalarının arasında “header” adında bir dosya olacaktır. Bu dosya genelde “.php” uzantılı olur. Bu dosyayı herhangi bir yazı editöründe açın. Daha en başında “head” etiketlerini göreceksiniz zaten. Yukarıdaki örnekteki gibi kodunuzu yapıştırın.

WordPress’te nasıl kurabilirim?

Eğer WordPress kullanıyorsanız, sitenizde kullandığınız temanın klasörüne gidin. Yani,

adresine gitmelisiniz. Bu her tema için böyledir. Yapmanız gereken “header.php” dosyasını bir yazı editörü ile açıp “head” etiketlerinin arasına bu kodu yapıştırmaktır.

İstediğim gibi düzenleyebilir miyim?

Daha önce de söylediğim gibi, FontAwesome projesi tamamen açık kaynak kodlu bir projedir. Yani tüm kodlar sizinle paylaşılıyor. Eğer yeterli kod bilginiz varsa istediğiniz gibi düzenleyebilirsiniz. Ancak yukarıdaki gibi tek satırlık kodla sitenize kurulum yaptıysanız, pek de düzenleme gibi bir şansınız yok. Yani ikonları kullanabilirsiniz, tüm kodlar çalışır ama bunun dışına çıkamazsınız. Eğer tam özgürlüğüm olsun, istediğim gibi ikonlarla oynayayım, hatta kendim de ikonlar ekleyeyim diyorsanız, öncelikle yeterli kod bilginiz olmalı. Daha sonra da önceden girdiğimiz başlangıç yani http://fontawesome.io/get-started/ adresine gidip, aşağıdaki “Download” butonuna tıklayarak kaynak kodlarını indirmeliyiz. Ben maalesef burada bunu anlatamayacağım. Aksi halde konu çok uzayabilir. Kaldı ki, zaten FontAwesome içeriğinde yüzlerce ikon barındırıyor.

FontAwesome nasıl kullanılır?

Kurulum ve saire, her şeyi bitirdikten sonra artık kullanımına geçebiliriz. Aslında başlarda biraz karışık gelecektir ama sonraları mantığını anlayacaksanız. İlk olarak çalışma mantığını anlatayım:

  • Her ikonun kendi kodu bulunuyor. Kodlar genelde ikonların İngilizce karşılığı oluyor.
  • Siz bu kodları kullanarak istediğiniz ikonu gösterebiliyorsunuz.
  • Şimdi vereceğim iki siteyi tarayıcınızda kaydedin.

1. http://fontawesome.io/icons/ (Bu adreste ikonların kodlarını göreceksiniz.)
2. http://fontawesome.io/examples/ (Bu adreste de ikonların kullanımıyla alakalı bazı örnekler var.)

İki siteyi de tarayıcınızda açın. Örneklerden kullanmak istediğinizi seçin. Örneğin, listeli bir şeyler yapmak istiyorsunuz. Biraz aşağıya kaydırıyorum ve “Fixed Width Icons” şeklinde bir başlık görüyorum. Sağ tarafta kodu gösterirken, sol tarafta da örneği gösteriyor. Benim sitemde kullanacağım şeyin buna benzer bir şey olmasını istiyorum. Aynısı gibi çıkmayabilir sitenizde ama benzer bir şeyle karşılaşacaksınız.

Buradaki kodun hepsini kopyalıyorum. Aşağıdaki gibi görünüyor sitemde.

Kodda herhangi bir düzenleme yapmadım şu an. Mesela ilk ikonumda bir fotoğraf makinesi kullanmak istiyorum. Değiştirmem gereken yer “fa-home” yazan kısım. Ama hepsini değil, sadece “fa-” kısmından sonraki “home” yazısını değiştireceğim. İşte bu kısım benim aslında ikonumun kodu. İkonların tüm kodlarına da verdiğim ilk siteye girip bakacağız. İlk siteye girdiğimizde yüzlerce ikon göreceksiniz. Ben kamera ikonunu istediğim için klavyemde CTRL + F tuş kombinasyonunu kullanarak sitede arama özelliğini açıyorum ve “camera” yazıyorum.

Karşıma 2 tane kamera ikonu çıktı. Hangisini kullanmak istiyorsam, onun kodunu kopyalayıp “fa-” den sonraki “home” yazısının yerine yapıştırıyorum. Yani “fa-camera” yazıyorum. Bunu yaptıktan sonra artık ikonumuz değişecek. Aşağıdaki örneğe bakabilirsiniz:

Bunlar tabii ki üzerinde oynanmış kodlar. Kodun en saf hali şu şekilde arkadaşlar:

Yukarıdaki kodda ikonun kodunu yazdıktan sonra istediğiniz şekilde kullanabilirsiniz. Ancak daha karışık şeyler yapmak istiyorsanız tabii ki örneklere bakmanız sizin için daha iyi olacaktır.

Sitelerde değil de, bilgisayarımda da kullanabilir miyim?

Daha önce de söylediğim gibi bu proje aslında bir yazı tipi. Doğal olarak yazı tipini bilgisayarınıza yüklediğiniz zaman istediğiniz gibi kullanabilirsiniz. Yazı tipini yükledikten sonra http://fontawesome.io/cheatsheet/ adresine gidip kullanmak istediğiniz ikonu kopyalayın. Kodunu değil ama, direkt ikonun kendisini kopyalayın. Daha sonra bunu kullanacağınız yere yapıştırın. Başlangıçta dikdörtgen şeklinde bir şey çıkacaktır. Ancak yazı tipini “FontAwesome” olarak değiştirdiğinizde ikon görünecektir.

FontAwesome’un bana faydaları nedir?

Bu kadar anlattığım şeyden sonra zaten az çok faydalarını anlamışsınızdır. Ama ben yine de bahsetmediğim bir şeyin kalmaması için size tüm faydalarını tek tek söylemek istiyorum. Bu arada FontAwesome bu konuda hazırlanmış olan tek proje değil. Ama bence en iyi ve kullanışlı olanı bu arkadaşlar.

  • Hepsi resim değil de harf olduğu için sitenizde neredeyse hiçbir yavaşlamaya sebep olmuyor.
  • Her ne kadar sitenizde yeni bir dosyanın çekilmesine sebep oluyor olsanız da, çekilen bu dosya CDN ile çekildiği için siteniz olması gerektiğinden daha az yavaşlıyor.
  • Ayrıntılı ve anlayışlı bir kullanım kılavuzu bulunuyor.
  • Sitenizin çok daha hoş görünmesini sağlıyor. Unutmayın, görsellik her zaman sitenizi daha iyi gösterir.
  • Kullanımı ve kurulumu gayet basit.
  • İkonların boyutlarını, renklerini, efektlerini, konumlarını ve daha bir çok özelliğini ayarlayabiliyorsunuz.
  • Aynı zamanda bilgisayarınızda, Photoshop gibi programlar kullanırken de bu ikonlardan faydalanabilirsiniz.
  • Hepsi bir harf gibi olduğu için ikonu büyütseniz bile kalitesinde herhangi bir bozulma olmuyor.
  • Eğer yeterli kod bilginiz varsa, kendiniz ikon ekleyip çıkarabiliyorsunuz.
  • İsterseniz ikonları belli açılarda döndürebiliyorsunuz.
  • Tamamen ücretsiz ve açık kaynak kodlu bir proje!

Kategoriler:   Bilgisayar, İnceleme, Nasıl yapılır?, Wordpress

Yorumlar

Bir Cevap Yazın