Eine eigene Icon Schrift generieren mit Node

Der icon-font-generator macht es möglich. Das kleine Programm ist in sekundenschnelle installiert und ebenso schnell ausführbar. Man gibt nur einen Ordner mit SVG-Dateien und einen Ausgabe-Ordner an und der Rest passiert automatisch.

icon-font-generator my-icons/*.svg -o icon-dist

Das Programm erzeugt:

  • eine CSS Datei
  • eine HTML Datei mit einer übersichtlichen namentlichen und bildlichen Darstellung der Icons
  • json File
  • svg,eot,ttf,woff Font

Im Zusammenspiel mit Node.js können Sie Ihre SVG-Icon-Dateien zu einer flexiblen Webfont zusammenfassen, um schließlich die Vorteile einer Webfont zu nutzen:

NPM Icon Font Generator unter Windows mit Node.js Easy-to-use, pre-configured cli tool to generate webfont icon kits from a bunch of .svg files
NPM Icon Font Generator unter Windows mit Node.js
Easy-to-use, pre-configured cli tool to generate webfont icon kits from a bunch of .svg files
  1. eine Webfont kann über CSS individuell angepasst werden
    1. Schrift/Icon-Größe
    2. Farbe
    3. Schatten
    4. Transparenz
  2. Schriftart wird einmal zentral eingebunden und kann dann im ganzen Projekt über Klassen eingesetzt werden
  3. Schrift kann einfach verschickt werden
  4. ist übersichtlich

 

Wie die Icons bestenfalls aufgebaut sein sollten ist hier beschrieben, inklusive einer Alternative für die Generierung (habe ich selbst nicht getestet, da ich lieber auf Internet-unabhängige, lokale Lösungen zurückgreife) :

Create an Icon Font Using Illustrator

Frontend Dev Workflow Schritte

…von NULL an…

 

  1. Editoren einrichten
    1. z.B Adobe Brackets (brackets.io/)
    2. oder Netbeans
    3. oder Notepad ++
    4. oder PHPStorm
  2. install node.js (nodejs.org/en/)
  3. install git (git-scm.com/)
  4. install ruby (rubyinstaller.org/)
  5. install SASS (sass-lang.com/install)
  6. WINDOWS Rechts-Klick „git bash here“
  7. install grunt
  8. install compass (compass-style.org/install/)
  9. Frontend Framework vorbereiten
    1. z.B. Bootstrap (www.npmjs.com/package/bootstrap-sass#b-compass-without-rails)
      $ compass create my-new-project -r bootstrap-sass –using bootstrap
    2. Foundation
    3. ……………oder oder (usablica.github.io/front-end-frameworks/compare.html)

live.js – entwickeln ohne „F5“-Refresh der Seite

livejs.com

Say goodbye to Alt-Tab. Live.js makes sure you’re always looking at the latest version of the page you’re working on, whether you’re writing HTML, CSS or Javascript.

will monitor the current page including local CSS and Javascript by sending consecutive HEAD requests to the server.

Quelle: http://livejs.com/ von Martin Kool