Fontello ile Sadece İhtiyacınız Olan İkon Fontları Kullanın

Ocak 2019
YouTube'ta Takip Et

Önceki derslerimizde Web Sitelerinde Font Awesome Kullanımı ile ilgili bir makale hazırlamıştım. Web sitelerinde ikon fontlarını kullanmak sitelerin daha hızlı açılmasını sağlar ve Facebook, Twitter ikonları gibi çözünürlüğü yüksek ikonlar oluşturur. Peki Fontello‘nun farkı ne? Şimdi web sitelerinde Fontello kurulumu ve kullanımı hakkında bazı bilgiler vereceğim.

Bir web sitenizin olduğunu düşünelim. Bu sitede yaklaşık 10 tane ikon kullanmanız gerekiyor ve bunu da Font Awesome gibi ikon fontlarıyla halletmek istiyorsunuz. Ancak Font Awesome’ın onlarca farklı ikonu var ve siz de aralarında sadece birkaçını kullanmak istediğiniz halde tüm ikonları indirip siteye yüklemeniz gerekiyordu. Yine bu birkaç ikonu görüntülemek için ziyaretçilerin de tüm ikon fontlarını arka planda indirmesi gerektiği gibi bir zorunluluk vardı.

Fontello ise bu işin aksine sadece sizin seçtiğiniz o birkaç fontun dosyalarını yüklemenize, istediğiniz setten istediğiniz font ikonunu kullanabilmenize imkan tanıyor. Bu da web sitenizin boyutunu azaltmak ve sitenin daha hızlı açılmasını sağlamak için kullanılan yöntemlerden biri. Fontella, Font Awesome vektör imaj kütüphanesine sahip olduğu gibi kendi kütüphanesi olan Fentelico ve Brandico‘nun yanısıra Entypo, Typicons, Iconic, Zocial, hava durumu ikonlarından Meteocons, Smashing Magazine ikon fontlarından Linecons gibi farklı ikon fontlarıyla birlikte kullanılabiliyor. Ve bu indirilen ikonlara CSS ile normal bir yazı için uygulanan renk, boyut, gölge gibi düzenlemeler de yapılabiliyor.

  1. Fontello adresine girerek kullanmak istediğiniz ikonları seçin. Seçilen ikonların CSS’te kullanılacak isimleri değiştirmenize de olanak tanıyor sistem. Bu isimleri Customize Names sekmesinde düzenleyebilirsiniz.
  2. Seçimleri yaptıktan sonra sağ üstteki Download webfont butonunun yanındaki kutucuğa tıklayarak, ilgili dosyaları bilgisayarınıza indirin. Font dosyaları ile birlikte, CSS dosyaları ve bir JSON dosyası indirmiş olacaksınız. woff, ttf, svg ve eot yazı tipi formatları, cross browser support denilen, birden fazla tarayıcıda sorunsuz şekilde çalışması için oluşturulan dosyalar.
  3. Bir klasör oluşturun, klasör ismini siz belirleyebilirsiniz. İçindeki dosyaları bu klasöre kopyalayın. Ben font dosyaları ve CSS dosyalarının klasör yapısını bozmadan kullanmayı tercih ediyorum.
  4. Sitenin bu dosyaları tanıması için de head etiketleri arasında aşağıdaki kodu ekleyin. CSS klasörünün altındaki fonts.css’i çağırmamız yeterli.

Seçili ikon fontlarını web sitesinde kullanmak için de basitçe aşağıdaki kodu kullanabilirsiniz. İkonların class’larını Fontello’nun sitesinden ya da indirdiğiniz dosyaların arasındaki codes.css dosyasında görebilirsiniz. Dosyada şuna benzer formatta bir görünüm olacaktır.

Yukarıdaki kodlar sitenizde kullanmak için de aşağıdaki formatı kullanabilirsiniz.

İndirdiğiniz dosyanın config.json dosyası ise daha sonraki düzenlemeleriniz için kullanacağınız dosyadır. 20 adet ikon seçmişseniz ve sonradan projenize yeni bir ikon daha eklemek istediğinizde önceki 20 ikonu yeniden seçmek yerine bu dosyayı kullanıyoruz. Fontello ana sayfasına bu dosyayı sürüklediğinizde önceki ikonlar otomatik olarak seçili hale geliyor.

Fontello, kendi ikonlarınızıın da indirilen dosyaya dahil edilebilmesine olanak tanıyor. Kendi oluşturduğunuz SVG uzantılı dosyaları Fontello ile, indirilen diğer ikonlar gibi kullanabilirsiniz.

Gözden kaçırdığım veya eklemek istediğiniz bir şey olursa yorum kısmına yazabilirsiniz.