Icomoon ile Web-Font Icon Paketleri Oluşturma
Merhaba, bu yazımda projemizde kullanmak istediğimiz ikonları Icomoon.io sitesi aracılığıyla web-font formatına dönüştürmeyi ve projemize nasıl dahil edeceğimizi anlatacağım. Web-fontları tercih etme sebebim pratik stilize edilebilmeleri, ölçeklendirilebilirlik, tarayıcı desteği ve performans gibi konularda üstünlük sağlamaları. Projenizde onlarca farklı ikon görseli kullanacaksanız bu yöntemi hem kullanım kolaylığı sağlaması, hem de performans açısından tercih edebilirsiniz. Burada gerçekleştireceğimiz işlemden sonra ikonlarımız vektörel font dosyalarına dönüşecek ve CSS ile fontlar üzerinde kullandığımız tüm stil özelliklerini ikonlarımız için de kullanabileceğiz.
Kullanım
Öncelikle Icomoon.io sitesi üzerinden yeni bir üyelik açıyoruz. Kayıt olmadan işlem yapılabilse de oluşturduğunuz ikon paketlerine daha sonra kolayca ulaşabilmek için üyelik almanızı tavsiye ederim. Ana sayfada sağ üstte bulunan Icomoon App butonuna tıklıyoruz. Açılan sayfada Import Icons butonuna tıklayarak bilgisayarımızdaki ikonları siteye yüklüyoruz. İkonların SVG formatında olması gerekiyor, aksi halde hata alabilirsiniz. İkonlarımız yüklendikten sonra sağ alttaki Generate Font butonuna tıklıyoruz. Açılan sayfada dönüştürdüğümüz ikonların önizlemelerini görebiliyor ve kullanmak istediğimiz ikonun HTML koduna <> Get Code butonuna tıklayıp ulaşabiliyoruz. Bu aşamadan sonra oluşturduğumuz paketi sağ alttaki Download butonuna tıklayarak bilgisayarımıza indiriyoruz.
İndirdiğimiz icomoon.zip adlı dosyayı arşivden çıkardıktan sonra fonts klasörü içerisindeki fontları projemizde kullanmak istediğimiz dizine, style.css dosyasını da ana dizine taşıyoruz. Burada dikkat edilmesi gereken nokta, indirdiğimiz style.css dosyası içerisinde tanımlı olan @font-face kuralları içerisinde tanımlanmış dizin ile projemizde konumlandırdığımız ikonların dizininin birbiriyle uyuşması. Eğer ikonları farklı bir klasöre konumlandıracaksanız @font-face kuralları içerisindeki ‘src:’ kısmından dizini güncellemelisiniz. Aksi halde ikonlar gözükmeyecektir. Bu işlemden sonra ikonlarımızda fontlar için kullanılan birçok özelliği kullanabiliyoruz.
Burada yaptığımız işlemi birazcık açmak gerekirse; oluşturduğumuz paketin içerisindeki her bir ikon için yeni bir sınıf yaratılıyor ve bu sınıfların içerisinde ikonlarımız :before sözde seçicisi (pseudo class) ile content olarak tanımlanıyor.
Artık ikonlarımızı kullanmak istediğimiz HTML etiketi sınıfına tanımlayarak kullanabiliriz.
Web-Font Avantajları
- font-size, color gibi CSS özelliklerini pratik bir şekilde uygulayabilmek.
- İyi bir cross-browser desteği.
- Onlarca farklı ikon görselini tek bir dosyaya indirgeyebilmek.
Web-Font Dezavantajları
- Font karakterlerinin yalnızca tek bir rengi desteklemesi.
- İkon dönüştürme işleminin direkt olarak PNG veya SVG kullanmak kadar pratik olmaması.
- Az sayıda ikonla oluşturulan paketlerin dosya boyutu olarak PNG veya SVG’lerden büyük olması.
