İ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.

icomoon_importicons

 

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

 

icomoon_settitle

 

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.

 

iconmoon_iconset

 

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.

 

icomoon_generatefont

 

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

 

iconmoon_cssclass

 

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.

 

icomoon_quickusage

 

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.

 

icomoon_download

 

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

 

icomoon_demo

 

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

 

icomoon_fonttest

 

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.

 

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir