Tasarımlarınızda Kullanabileceğiniz İkon Paketleri: Flaticon

Sürekli site tasarlayanlar, sitelerinde ikonları çok kullananlar, görselliğe önem veren tasarımcılar genelde küçük ikonlar kullanırlar. Telefon, adres, isim, yaş, cinsiyet gibi şeyleri yazmadan önce genelde bunları insanlara anımsatacak ikonlar kullanırlar. Bu da sitenin göze daha hoş görünmesini sağlar. Örnek verecek olursak, daha önceden bir yazımda FontAwesome projesinden bahsetmiştim. Öyle ki, bu proje sayesinde harfler aslında küçük ikonlar oluyordu ve biz sitemizde bunları kullanabiliyorduk. Böylelikle daha hoş görünümlü bir site tasarımına sahip oluyorduk. Siteden bir örnek verecek olursak, ana sayfada sağ üst tarafta “Giriş Yap” ve “Üye Ol” butonlarında yazılardan hemen önce küçük ikonlar kullandım.

Bu şekilde görselliklerden faydalandığımız zaman sitemiz çok daha hoş bir görünüme sahip olur. Yazımda da bununla alakalı konuşacağım. Normalde bu ikonları internetten biraz araştırsanız bir çok siteden bulabilirsiniz. Google’da “icon packs” şeklinde bir araştırma yapsanız mesela, karşınıza yüzlerce ikon paketi çıkar. Ama asıl mesele bu ikonları nasıl kullanacağınızı, sitenize nasıl entegre edeceğinizi bilmek arkadaşlar. Daha önce FontAwesome’u ve nasıl kullanıldığını anlatmıştım. Bu da aynı FontAwesome gibi çalışıyor ancak FontAwesome ile alakalı dosyalar zaten sitenizde otomatik olarak hazırlanmış oluyordu. Doğal olarak tek satırlık kod ile istediğiniz ikonu sitenizde gösterebiliyordunuz.

Şimdi, FontAwesome’un ikonlarından sıkıldığınızı düşünün ve farklı ikonları sitenizde barındırmak istediğinizi düşünün. Ama FontAwesome sitenizde otomatik olarak kuruluydu ve bunun üstünde pek de bir değişiklik yapma şansınız yoktu. Doğal olarak aslında her ne kadar FontAwesome size çok fazla fırsat sunuyor olsa da, yapabilecekleriniz biraz sınırlı aslında. Yani bizim yapmak istediğimiz şey:

Farklı ikon paketlerini sitemizde kullanabilmek.

Bu aslında o kadar da zor değil. Her şey sizin anlayacağınız şekilde anlatılmış zaten. Genel olarak yapacağımız şeyi listeleyelim:

  • FlatIcon.com adresine girip üye olacağız.
  • Ücretli veya ücretsiz üyelik bulunuyor. Eğer ücretli yani “Premium” üye olursanız, tüm ikonlardan lisanslı bir şekilde faydalanabilirsiniz. Ücretsiz olursanız da faydalanabilirsiniz ama ikonların tasarımcısını sitenizde belirtmelisiniz. Bunu da yazının devamında anlatacağım.
  • Ücretsiz ikon paketlerinden beğendiğimizi seçeceğiz ve indireceğiz.
  • İnen dosyada “font” klasörünü sitemize atacağız.
  • Sitemizin “header” veya ikonu kullanacağımız kısmında “.css” uzantılı dosyamızı çekeceğiz.
  • FontAwesome’daki gibi kodlarla ikonları sitemize ekleyeceğiz.

Her ne kadar karışık görünse de, bir kere mantığını anladığınız  zaman tüm ikon paketlerini kullanabileceksiniz.

FlatIcon.com’a nasıl üye olunur?

Üyelik işlemi gayet basit. https://profile.flaticon.com/register adresine giriyoruz. Kullanıcı adımızı, e-posta adresimizi ve şifremizi girdikten sonra “Sign up” butonuna tıklıyoruz.

Üyelik işleminden sonra e-posta adresimize onay linki gelecek. Ona tıklayıp hesabımızı onaylıyoruz ve https://profile.flaticon.com/login adresine girip giriş yapıyoruz.

İkon paketleri ücretli mi?

Ücretli olanları da var ücretsiz olanları da. Ücretli ikonların başında kral tacı şeklinde ikon olurken, ücretsizlerde kutu içinde “S” harfi oluyor. Aşağıdaki resimde ücretsiz ikon paketlerindeki işareti görebilirsiniz:

Ücretsiz ikon paketlerini hemen kullanabilir miyim?

Evet, kullanabilirsiniz. Ancak ikon paketi için paketi hazırlayan kişiyi belirtmelisiniz.

Paket sahibini nasıl belirtebilirim?

Eğer sitede kullanacaksanız genelde sitenin “footer” yani alt kısmında bir bağlantı eklenir. Eğer tasarımınızda kullanacaksanız yine tasarımın bir yerinde ikonun tasarımcısını belirtmelisiniz. Aksi halde karşınıza çıkacak yasal problemlerden siz sorumlu olursunuz.

Beğendiğim ikon paketini nasıl indirebilirim?

Eğer ücretsiz üyelik kullanıyorsanız, indireceğiniz ikon paketinin “Premium” kategorisinde olmadığına emin olun. Daha sonra ikon paketinin üstüne tıklayın ve çıkan sayfada sağ taraftaki yeşil “Download Pack” butonuna tıklayın. Karşınıza çıkan ekranda “Free Download” butonuna tıklayın. Paket inmeye başlayacak ve genelde “.zip” uzantılı bir dosya iner. Ben örnek olarak http://www.flaticon.com/packs/essential-set-2 bağlantısındaki ikon paketini indirdim. Bu pakette tam olarak 380 tane ikon var.

Paketi indirdikten sonra ne yapacağım?

Paketin içeriğinde genelde 6 klasör bulunuyor. Bunlar;

  • eps
  • font
  • license
  • png
  • psd
  • svg

Eğer sitenizde kullanacaksanız sizi sadece “font” klasörü ilgilendiriyor. Tasarımlarınızda kullanacaksanız diğerlerini kullanabilirsiniz.

Yapacağınız şey, “font” klasörünü sitenizde herhangi bir yere atmaktır. Direk klasör olarak atmalısınız ve klasörün içindeki dosyaları birbirinden ayırmamalısınız. Aksi halde “.css” dosyasında düzeltmeler yapmanız gerekir ve bu da ekstra uğraş demek.

Bundan sonra artık son adıma geçiyoruz. Sitemizin “header” kısmına geleceğiz. Burayı kullanacağız çünkü genelde ikonların siteye ilk girildiği anda yüklenmesini isteriz. Eğer WordPress alt yapısı kullanıyorsanız temanızın klasörünün içinde “header.php” şeklinde bir dosya olur. Başka bir alt yapı kullanıyor olsanız da bu her zaman aynıdır. Her zaman “header.php” şeklinde bir dosya olur. Yani:

header.php dosyasını bulun.

Dosyayı herhangi bir editör programıyla açın. Tavsiyem Notepad++. Ama bilgisayarın normal Notepad programı da olur.

Karşınızda 40-50 satırlık bir kod olacak. Kodun başlarında

etiketini göreceksiniz. Eğer bulamıyorsanız CTRL + F yaparak “head” kelimesini aratın. Mutlaka bulacaksınız.

Bunu gördükten sonra hemen bir alt satıra geçip aşağıdaki kodu yapıştırın:

Burada düzenlemeniz gereken kısım “(klasörün bağlantısı)” yazan yer olmalı. Eğer sitenizin kök klasörüne attıysanız “font” klasörünü, direkt olarak “/font/flaticon.css” şeklinde yazabilirsiniz. Eğer başka klasörlerin içine attıysanız tüm bağlantıyı yazmanız gerekiyor. Yani kısacası, “font” klasörünün içindeki “flaticon.css” dosyasının bağlantısını yazmamız gerekiyor. Bunu yaptıktan sonra artık sitemizde ikonları istediğimiz gibi kullanabiliriz.

İkonları yükledikten sonra sitede nasıl kullanabiliriz?

font” klasörünün içinde “flaticon.html” adında bir dosya var. Bunu kullandığınız tarayıcınızla açın. Burada kullanım kılavuzu olacak. Daha önce ben bunu FontAwesome projesini anlatırken göstermiştim. İsterseniz buraya tıklayarak konuyu inceleyebilirsiniz.

 

Not: Aynı zamanda bu dosyanın en alt kısmında, ikon paketinin tasarımcısını sitenizde nasıl belirteceğinizi de anlatıyor.

 

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

Yorumlar

Bir Cevap Yazın