Font İkon Nasıl Yapılır? Font Awesome Gibi Bir İkon Kütüphanesi Nasıl Kurulur?

 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? FONT AWESOME GİBİ BİR İKON KÜTÜPHANESİ NASIL 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 izleyerek adı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.

Yorum Gönder

Düşünceleriniz bizim için çok değerli!

Sonraki Önceki Ana Sayfa