İkon Font Kütüphaneleri Oluşturmak

Günümüzde popüler olarak kullanılan Font Awesome, Glyphicons kütüphaneleri gibi bir çok font tabanlı ikon kütüphanesi vardır. Sizde kendi hazırladığınız ya da internetten edindiğiniz ikonları font’a çevirerek bir kütüphane oluşturabilir, paket halinde kullanabilirsiniz. İkonlarınızı font haline (yazı tipine) çevirmek için IcoMoon, Fontello, Fontastic, Glyphter gibi servislerden birini tercih edebilirsiniz. Bu yazıda IcoMoon servisini kullanarak kendi fontumuzu oluşturacağız. İhtiyacınız olan en önemli şey .SVG uzantılı vektör ikonlar. Bu ikonları internetten edinebilir, Illustrator vb. vektörel bir çizim programı ile de oluşturabilirsiniz.

IcoMoon Kullanarak Font Oluşturmak

https://icomoon.io/app adresinden uygulamayı açıyoruz.

 

Import Icons‘a tıklayarak .svg uzantılı ikonlarımızı tek seferde yükleyebiliriz.

 

 

Yükleme sonrası yeni bir ikon seti oluşacaktır, “Untitled Set” yazan bölümü değiştirerek oluşturduğumuz ikon setine bir isim verebiliriz.

 

 

Oluşturacağımız Font’ta kullanmak istediğimiz ikonları seçiyoruz. İstersek oluşturacağımız bu font’a kendi ikonlarımız dışında IcoMoon ikonlarından da dahil edebiliriz. Yüklediğiniz tüm ikonları hızlıca seçebilmek için ikon setinin sağ tarafındaki menüden “Select All” a tıklayabilirsiniz.

 

 

İkon seçimlerimizi yaptıktan sonra Generate Font‘a tıklayarak Font oluşturma işlemimizi tamamlıyoruz.

 

 

Açılan sayfada ikonlarımızı hangi css class’ı ile çağırmak istediğimizi tanımlıyoruz. Eğer bir tanımlama yapmak istemiyorsanız varsayılan değerleri ile bırakabilirsiniz. Yukarıdaki örnekte olduğu şekilde ev ikonunu kullanmak istiyorsak <i class=”icon-home”></i> şeklinde bir html kodu kullanmamız gerekecek.

 

 

Eğer bilgisayarımıza indirmeden oluşturduğumuz font’u hızlı bir şekilde test etmek istiyorsak “Enable Quick Usage” a tıklayarak bizim için bir link üretmesini sağlıyoruz. Bu link 24 saat boyunca geçici olarak kullanıma açık olacak ve sürenin bitiminde silinecektir. IcoMoon‘un sunduğu kalıcı CDN hizmetinden yararlanmak istiyorsanız Premium satın almanız gerekmektedir.

 

 

Ekranın sağ alt köşesinde bulunan “Font Download” linkine tıklayarak fontumuzu indiriyoruz.

 

 

İndirdiğimiz zip dosyası içerisinden demo.html‘ i açıyoruz.

 

 

Oluşturduğumuz ikon ve kullanacağımız class isimleri bu sayfada yer alıyor. “Font Test Drive” bölümünden ikon kullanımlarını test edebilirsiniz.

Web sitenizde / uygulamanız da kullanmak için gereken kodları/dosyaları indirdiğiniz .zip dosyasının içerisinden alabilirsiniz. Font klasörünü ve style.css içerisindeki css kodlarını almanız yeterli olacaktır. Mevcut ikon kütüphanenizi geliştirmeye devam etmek isterseniz IcoMoon uygulamasına girdikten sonra “Import Icons” a tıklayıp indirdiğimiz .zip dosyası içerisindeki “selection.json” ı yükleyerek kütüphanenizi kaldığınız yerden geliştirmeye devam edebilirsiniz.