Font ikonlar aslında birer svg formatında vektörel çizimlerdir. Bu linkteki yazıya gidip svg formatının ve vektörel çizimin neolduğunu öğrenerek kendi vektörel logo ve ikonlarınızı kendiniz çizebilirsiniz. Konumuza dönecek olursak kendi yazı fontu kütüphanenizi veya Font Awesome’da olduğu gibi ikon kütüphanenizi oluşturmanız için vektörel çizim yapabileceğiniz bir program ve bu çizimleri kütüphane haline getirebileceğiniz başka bir program gereklidir. Aşağıda bulunan başlıkları izleyerek kendi ikon veya yazı fontu kütüphanenizi kurabilir, satabilir ve kullanabilirsiniz. Font ikon nasıl yapılır? Font Awesome gibi bir ikon kütüphanesi nasıl kurulur?
FONT İKON NASIL YAPILIR? VEKTÖREL ÇİZİM
Vektörel çizim konusu çok zevkli ve kolay bir süreçtir. Vektörel çizim aşaması aklınızda tasarladığınız ikon, logo veya yazı stillerini koda dönüştürme aşamasıdır. Bu aşamada size bir vektörel çizim programı veya web sitesi gerekecektir. Bir program veya web sitesi bulduktan sonra da kalem aracının ne olduğunu öğrenmeniz gerekecek. Tüm bu program ve bilgileri websitesi svg logo nasıl çizilir yazımı okuyarak öğrenebilirsiniz.
İlgili yazıda öğrenmesi çok kolay ve zevkli olan vektörel çizim programında çizdiğimiz logo veya ikonu nasıl dışarı kod olarak aktarabileceğimizi de anlattım. Yazıyı okuduktan ve kendi ikonunuzu çizdikten sonra tek yapmanız gereken çizimi bir program ile kütüphaneye dönüştürmektir. İkonunuzu bir kütüphaneye dönüştürdükten sonra font ikon olarak kullanabilirsiniz. Ancak tüm bu aşamalarla uğraşmamak adına çizdiğiniz ikonun svg kodunu kopyala yapıştır yaparak çiziminizi sitenize getirebilirsiniz.
Svg formatında kullanmak ile font ikon formatında kullanmak arasında ufak farklılıklar vardır. Örnek olarak aşağıda yazılımsal olarak svg ve font arasındaki kod farklılıklarını gösterdim.
CSS KULLANIMI | SVG | FONT İKON |
Çizimin kenarlık rengi | stroke=”red” | – |
Çizimin kendi rengi | fill=”#000” | color=”#000” |
Çizimin büyüklüğü | width=”30px” | font-size=”30px” |
Çizim animasyonu | Stroke-dashoffset:200; | – |
Yukarıdaki tabloda da görüldüğü gibi font ikon ile yapabildiklerinizi svg ile de yapabilirsiniz. Svg kullanmak animasyon kenar rengi ve daha birçok açıdan font ikona göre daha avantajlıdır. Svg kullandığınızda svg ikonunun içerisinde bulunan path kodlarına verebileceğiniz css ile her bir karakteri ayrı ayrı kontrol edebilirsiniz. Ancak yine de <i class=”fas fa-times”></i> gibi kodlar kullanarak ikon çağırmak istiyorsanız svg dosyanızı aşağıdaki başlıkta bulunan uygulama ile kütüphaneye dönüştürebilirsiniz. Font ikon nasıl yapılır? Font Awesome gibi bir ikon kütüphanesi nasıl kurulur?
FONT İKON NASIL YAPILIR? KÜTÜPHANEYE DÖNÜŞTÜRME
Size link olarak verdiğim yazıda da okuduğunuz şekilde kendi vektörel çiziminizi yaptıktan sonra aşağıdaki aşamaları uygulamanız kütüphane oluşturmak için yeterlidir.
1- Kütüphaneprogramını indirin. Linkteki program sadece bir alternatif. Daha birçok kullanabileceğiniz program mevcut.
2- Linkteki videoyu izleyerekadım adım çizdiğiniz vektörel çizimleri programa aktarın.
Yukarıda bulunan linklerdeki program ve eğitimleri kullanmanız şart değil. İnternet üzerinde bu hizmeti ücretsiz alabileceğiniz sayısız program var. Herhangi bir sorunla karşılaşırsanız yorum veya iletişim bölümünden bana ulaşabilirsiniz.