Özgür Özer

Junior full stack developer

İkon Font Nasıl Yapılır

Hepimiz muhtemelen Font Awesome, Foundation, Iconic, Typicons, Material Icons veya benzeri ikon fontları kullanmışızdır. Bu ikon fontlar geniş arşivleriyle ihtiyacımız olabilecek tüm ikonları sağlayabilmektedirler. Ama bazı durumlarda özel ikonlar oluşturup kullanmak isteyebiliriz. Şimdi en basit şekilde kendi ikon fontumuzu nasıl yapacağımızı öğrenelim.

İlk ihtiyacımız olan şey vektörel çizim yapabileceğimiz bir grafik programı. Ben hafif yapısından dolayı Sketch kullanıyorum, siz dilerseniz Illustrator, iDraw, Inkscape, Pixelmator veya benzeri bir program da kullanabilirsiniz.

Tüm ikonlar düzenli bir şekilde tasarlandıktan sonra dikkat edilmesi gereken tek kural ikonların SVG dosyaları şeklinde export edilmesi.

İkonlarımızı SVG formatında export ettikten sonra, sıra onları font dosyasına dönüştürme aşamasına geliyor. Fonta çevirme işleminde gelişmiş özellikler sunduğu için IcoMoon‘u tercih ediyorum. Onun dışında Fontastic, Fontello, Glyphter, SVG Icon Font vb. bir çok site aracılığı ile de aynı işlemi gerçekleştirebiliriz.

IcoMoon‘a girdiğimizde aşağıdaki gibi bir ekran karşılıyor bizi.

Burası ikon font üretme dışında, yüzlerce farklı ikon arasından özel ikon paketleri oluşturmamıza da izin veren bir site.

Sol üstten Import Icons butonuna basıp, grafik programından export ettiğimiz SVG dosyalarını seçiyoruz ve Untitled Set isminde bir set oluşuyor.

Sağ taraftaki menü butonuna basarak Select all deyip tüm ikonlarımızı seçiyoruz ve sağ alttaki Generate Font butonuna basıyoruz.

IcoMoon herşeyi düzenli bir şekilde ayarlıyor ve bize sadece sağ alttaki Download butonuna basıp fontumuzu indirmek kalıyor.

Varsayılan ayarlamalarla yetinmek istemezsek ikon isimlerini değiştirmek için ikonlara tıklayabilir, daha spesifik ayarlar yapmak için ise üst taraftaki U+, fi, Preferences, Codes butonlarını kullanabiliriz.

İndirdiğimiz zip dosyası içerisinden .eot, .svg, .ttf ve .woff formatlarında fontlar ve demo dosyaları çıkıyor. Download demeden ikonlarımızın nasıl göründüğünü hızlıca deneyimlemek istersek üst taraftan Enable Quick Usage‘e basıyoruz ve 24 saat geçerli olacak bir CSS URL’i edinebiliyoruz. Dilersek kendi projemize dahil edip testler yapabiliriz.

Dilersek de View on CodePen linkine basıp CodePen üzerinden hızlıca testler yapabiliriz.

IcoMoon ile oldukça basit işlemlerle fontumuzu oluşturabiliyoruz. İkon font oluşturmak için farklı alternatifler kullanıyorsanız lütfen aşağıdan bizimle paylaşmayı unutmayın.