Building font-awesome icons

Question

Kendi fontum harika ikonlarımı kurardım. Özellikle, tüm özellikleriyle font-awesome'ın bir kopyası olan bir şey inşa edeceğim, ancak sadece bir simge kümesi kullanıyorum.

Ayrıca, yazı tipleri klasörleri içindeki dosyaları nasıl oluşturduklarına gerçekten ilgiliyim. On github'da, tüm svg simgelerini içeren bu repo numaralı telefonu buldum. Ubuntu, Font Custom kullanarak, ben gerçekten memnun olmasam bile, svg dosyaları giriş, yazı tipi dosyası vererek oluşturmak mümkün oldu. Ama bunun yanı sıra, yazı tip-harika ile bu dosyaları birleştirme nasıl anlamıyorum.

Özetle, kendi svg dosyalarımı kullanarak kendi font-harika kümemi nasıl oluşturabilirim?

fontello, icoMoon veya benzerlerini kullanmayın, çünkü yerel makinemde üçüncü taraf hizmetleri kullanmadan yapmak istiyorum.

Answer 1

seni bunun için FontLab Studio kullanabilirsiniz inanıyorum: muhtemelen kendi css yazmak zorunda kalacak, ancak http://store.fontlab.com/

, şahsen ben icomoon veya benzer web tabanlı jeneratör ile bunu üreten düşünüyorum çünkü çok daha kolay ve hızlıdır Özellikle FontLab Studio'dan önce web yazı tiplerinin oluşturulmasında veya masaüstü yazı tiplerinin tasarlanması için benzer masaüstü uygulamalarının yapıldığı ve önceden oluşturulmuş css derleyici/üreteci ile gelmediği belirtilmiştir.

Masaüstü bilgisayar için bir jeneratör görmek istiyorum.

Answer 2

Aslında benzer bir şey yaptım, ancak büyük ihtimalle kötü yazı tipi dönüştürme nedeniyle asla mükemmel olmadıklarını itiraf etmek zorundayım, sadece mükemmel hale getirmek için zamanım olmadı. Temelde i (çoğunlukla kadar) aşağıdaki linki

http://www.webdesignerdepot.com/2012/01/how-to-make-your-own-icon-webfont/

sürecine genel bakış kullanılan

Adım 1 - bireysel gylphs oluşturun (kaçınmak için özel karakterleri kullanmalıdır birisi "yazarak" yazı tipi kullanılarak

Adım 2 -.. SVG yazı tipi olarak gylphs seçimi kaydet

Adım 3 - (ücretsiz çevrimiçi dönüştürücüler bol vardır) web yazı SVG yazı dönüştürme

adım 4 - tüm bireysel glifler için olası sınıflarının tüm (kullanmak oluşturmak için CSS sınıfları oluşturmak) - sonuç şöyle olmalıdır: "icon icon-lg icon-blue icon-hand" - (bu bölüm için LESS/SCSS kullanarak daha iyi - neden sonra elde edersiniz) Burada, tüm simgeler için genel ayarlar bulunur. diğer kontroller boyut-overrides, biri renk kontrol eder ve en önemlisi aşağıdakileri kullanır: sonra -> simgesini çıkarır.

adım 5 - CSS tarafından kontrol edilen çalışan bir web yazı tipine sahip olduğunuza göre, kullanılabilir tek tek glifleri seçmek için bir kullanıcı arayüzü oluşturun. Büyük olasılıkla LESS kullanmalısınız, bu şekilde sadece kullanıcı tarafından seçilen sınıfları "açığa çıkarırsınız" (EG.- ikon-1, 2, 5, 8 vb. diğer tüm simgeler hala yazı tipine dahil edilmiştir, ancak ilgili CSS sınıfları nihai CSS'de üretilmez.

Bunu yapmanın daha gelişmiş yolları olabilir, ancak bu genel bakış ve öğretici, temel bilgileri edinmenize yardımcı olmalıdır.

Answer 3

Kendi yazı tipi simge kümeleriyle derinlemesine kazmadım, ancak kullanımda bazı svg verilerinin olduğunu varsayalım.

Sadece bile set sınıfları üzerinde background-img kullanabilirsiniz git-için farklı bir yol bir fikir olarak:

yararlı bir kaynak sonrası:/önce bulmak http://iconizr.com/ kendi veri-url nesil yararlıdır (daha iyi svg'ait fontello, icoMoon) 'dan daha fazla dönüşüm