Creazione di font-icone fantastiche

Question

Vorrei creare il mio font-set di icone fantastiche. In particolare, vorrei creare qualcosa che sia una copia di font-fantastico con tutte le sue funzionalità, ma usando solo un sottoinsieme di icone.

Inoltre, sono davvero interessato a come vengono creati i file all'interno delle cartelle . Su github ho trovato questo repo, che contiene tutte le icone svg. Su ubuntu, usando Font Custom, sono stato in grado di generare i file svg come input, il file dei font, anche se non sono veramente soddisfatto. Ma oltre a questo, non capisco come unire quei file con font-fantastico.

Quindi riassumendo, come posso creare il mio set di font fantastico, usando i miei file SVG?

Per favore, non dire di usare fontello, icoMoon o simili, perché mi piacerebbe farlo sul mio computer locale, senza servizi di terze parti.

Answer 1

io credo che si possa utilizzare FontLab Studio per questo: http://store.fontlab.com/

Tuttavia, probabilmente si dovrà scrivere il proprio CSS, personalmente penso che genera con icomoon o generatore di web based simile è molto più facile e più veloce, perché è stato creato appositamente per la generazione di caratteri web, prima che FontLab Studio o simili applicazioni desktop venissero create per disegnare font desktop e non venissero forniti con il compilatore/generatore css prebuilt.

Mi piacerebbe vedere un generatore anche per desktop.

Answer 2

In realtà ho fatto qualcosa di simile ma devo ammettere che non è mai stato perfetto, molto probabilmente a causa di una cattiva conversione dei font, ma non ho mai avuto il tempo di renderlo perfetto. Fondamentalmente ho usato il seguente link (per la maggior parte)

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

Una panoramica del processo di

Fase 1 - Creare i singoli gylphs (si consiglia di utilizzare i caratteri speciali per evitare qualcuno "tipizzazione" utilizzando il tipo di carattere

Fase 2 -.. Salva selezione gylphs come un font SVG

Fase 3 - Convertire carattere SVG al web-font (ci sono un sacco di convertitori in linea liberi)

fase 4 - generare le classi CSS da utilizzare (creare tutte le possibili classi per tutti i singoli glifi) - l'esito dovrebbe essere qualcosa del tipo: "icona icona-icona-blu-icona-mano" - (meglio usando LESS/SCSS per questa parte - si otterrà il motivo dopo) dove si trovano le impostazioni generali per tutte le icone, la altri controlli sovrascrivono le dimensioni, uno controlla il colore e il più importante che utilizza: after -> emette l'icona.

passaggio 5 - ora che si dispone di un carattere Web funzionante controllato da CSS, creare un'interfaccia utente per la selezione dei singoli glifi da rendere disponibili. molto probabilmente dovresti usare MENO, in questo modo stai "esponendo" solo le classi che sono selezionate dall'utente (EG.- icon-1, 2, 5, 8 ecc.) tutte le altre icone sono ancora incluse nel font, ma le relative classi CSS non vengono emesse nel CSS finale.

Ci potrebbero essere modi più avanzati per farlo, ma questa panoramica e tutorial dovrebbe aiutarti a ottenere le basi.

Answer 3

Non ho scavato a fondo con i propri set di font-icon, ma presumo che ci siano alcuni dati svg in uso.

Così come l'idea di un modo diverso di andare- Si potrebbe anche usare background-img sulle classi set: prima /: dopo

risorsa utile: http://iconizr.com/ Trovo loro generazione dei dati-url è utile (meglio svg conversione di fontello, icoMoon)