Export-Leitfaden

Klicken Sie auf die Schaltfläche Exportieren im linken Seitenleisten-Menü. Der Export-Dialog öffnet sich als Modal, das Ihnen ermöglicht, das Ausgabeverzeichnis zu konfigurieren, auszuwählen, welche Icon-Gruppen eingeschlossen werden sollen, und Ausgabeformate sowie Begleitdateien zu wählen. Alle Einstellungen werden zwischen Sitzungen gespeichert, sodass jeder Folgeexport nach der ersten Konfiguration ein einziger Klick ist.

Der erste Schritt ist die Auswahl, wo die exportierten Dateien gespeichert werden sollen. Standardmäßig verwendet Bobcorn Ihren Desktop. Klicken Sie auf die Ordner-Schaltfläche neben dem Pfad, um einen anderen Speicherort zu durchsuchen.

Sie können wählen, welche Icon-Gruppen in den Export einbezogen werden sollen. Standardmäßig sind alle Gruppen ausgewählt. Deaktivieren Sie Gruppen, die Sie nicht in der Schrift haben möchten — zum Beispiel könnten Sie eine „Entwürfe"-Gruppe ausschließen, die Icons in Arbeit enthält.

Jede Gruppe zeigt ihre Icon-Anzahl neben ihrem Namen. Die Gesamtzahl der Icons am unteren Ende der Liste aktualisiert sich in Echtzeit, wenn Sie Gruppen ein- und ausschalten, sodass Sie immer genau wissen, wie viele Glyphen die exportierte Schrift enthalten wird.

Bobcorn kann fünf Schriftformate generieren. Wählen Sie diejenigen, die den Browser-Unterstützungsanforderungen Ihres Projekts entsprechen:

WOFF2 ist immer enthalten, da es das wesentliche Web-Schriftformat ist — es gibt kein Szenario, in dem Sie einen Web-Schrift-Export ohne es möchten. Alle anderen Formate sind je nach Ihren spezifischen Anforderungen optional.

Über die Schriftdateien selbst hinaus kann Bobcorn mehrere Begleitdateien generieren, die Integration und Zusammenarbeit erleichtern:

CSS (icons.css)

Enthält die @font-face-Deklaration und .icon-*-CSS-Klassen für jedes Icon im Set. Legen Sie diese Datei in Ihr Projekt und Sie können Icons sofort mit einfachen Klassennamen verwenden. Weitere Details zur Funktionsweise des generierten CSS finden Sie im CSS @font-face-Leitfaden.

JS (icons-symbol.js)

Ein SVG-Symbol-Sprite, das alle Icons als Inline-SVG-Symbole registriert, wenn das Skript lädt. Verwenden Sie dies, wenn Sie mehrfarbige Icons oder SVG-spezifische Funktionen neben Ihren Font-Icons benötigen. Verwendungsmuster finden Sie im SVG-Symbol-Leitfaden.

HTML (demo.html)

Eine interaktive Vorschauseite, die alle exportierten Icons mit ihren Namen, CSS-Klassennamen und Unicode-Codepunkten anzeigt. Öffnen Sie sie in einem Browser, um das vollständige Icon-Set zu durchsuchen. Nützlich für Designer, die die Icon-Bibliothek prüfen, und Entwickler, die Klassennamen bei der Integration nachschlagen.

ICP (project.icp)

Bobcorns Projektdatei. Exportieren Sie sie, um Ihr Icon-Projekt mit Teammitgliedern zu teilen oder als Backup. Das Öffnen einer ICP-Datei in Bobcorn stellt den vollständigen Projektstatus wieder her — alle Icons, Gruppen, Metadaten und Einstellungen — genau wie sie beim Export waren.

Aktivieren Sie die ZIP-Option, um alle exportierten Dateien in ein einzelnes .zip-Archiv zu bündeln. Das ist nützlich, wenn Sie die Icon-Font mit Teammitgliedern teilen, auf ein CDN hochladen oder einem Design-Übergabedokument beifügen. Das ZIP enthält dieselbe Verzeichnisstruktur wie ein loser Export — keine Verschachtelung oder Umorganisation.

Hier sind drei praktische Voreinstellungen für gängige Projekttypen:

Modernes Web-Projekt

• WOFF2 (immer an) + CSS + HTML-Demo
• Minimaler Footprint, deckt 97 %+ der Browser ab

Vollständiges Kompatibilitätsprojekt

• WOFF2 + WOFF + CSS + HTML-Demo
• Deckt IE 11+ und alle modernen Browser ab

Design-System / Komponentenbibliothek

• WOFF2 + TTF + CSS + JS-Symbol + HTML-Demo + ICP
• Schriften für CSS-Nutzung, TTF für Desktop-Tools, JS-Symbole für mehrfarbige Varianten, ICP als Projekt-Backup

Wenn alle Optionen aktiviert sind, generiert Bobcorn folgende Dateistruktur:

output/
├── MyIcons.woff2        # Font files
├── MyIcons.woff
├── MyIcons.ttf
├── MyIcons.css          # @font-face + icon classes
├── MyIcons-symbol.js    # SVG symbol sprite
├── demo.html            # Interactive preview
└── MyIcons.icp          # Project backup

Der Schriftfamilienname (z. B. „MyIcons") leitet sich von Ihrem Projektnamen in Bobcorn ab. Alle generierten Dateien verwenden diesen Namen als Präfix für Konsistenz.

Nachdem Bobcorn Ihre Dateien generiert hat, führen Sie diese Schritte aus, um die Icon-Font in Ihr Projekt zu integrieren:

1. Schriftdateien + CSS kopieren in das Assets- oder Fonts-Verzeichnis Ihres Projekts
2. CSS verlinken in Ihrem HTML: <link rel="stylesheet" href="MyIcons.css">
3. Icons verwenden überall in Ihrem Markup: <i class="icon icon-home"></i>
4. Optional vorausladen der WOFF2-Datei für schnelleres erstes Rendering

Hier ist ein vollständiges Integrationsbeispiel:

<head>
  <link rel="preload" href="MyIcons.woff2" as="font"
        type="font/woff2" crossorigin>
  <link rel="stylesheet" href="MyIcons.css">
</head>
<body>
  <button><i class="icon icon-save"></i> Speichern</button>
</body>

Der rel="preload"-Hinweis teilt dem Browser mit, die Schriftdatei herunterzuladen, bevor er die @font-face-Regel im CSS findet. Das eliminiert die Verzögerung zwischen CSS-Parsing und Schrift-Download und ergibt ein schnelleres First-Paint mit sichtbaren Icons. Das crossorigin-Attribut ist für Schrift-Preloads erforderlich, auch wenn die Schrift vom selben Ursprung stammt.