Exportgids

Klik op de knop Exporteren in het linkerzijbalkmenu. Het exportdialoogvenster opent als een modaal venster waarmee u de uitvoerdirectory kunt configureren, kunt selecteren welke icoongroepen u wilt opnemen en uitvoerformaten en begeleidende bestanden kunt kiezen. Alle instellingen worden onthouden tussen sessies, zodat volgende exports na de eerste configuratie slechts één klik kosten.

De eerste stap is het selecteren waar de geëxporteerde bestanden worden opgeslagen. Standaard gebruikt Bobcorn uw Bureaublad. Klik op de mapknop naast het pad om een andere locatie te kiezen.

U kunt kiezen welke icoongroepen in de export worden opgenomen. Standaard zijn alle groepen geselecteerd. Schakel groepen die u niet in het font wilt, uit — u kunt bijvoorbeeld een groep "concepten" uitsluiten die werk-in-uitvoering-iconen bevat.

Elke groep toont het aantal iconen naast de naam. Het totale aantal iconen onderaan de lijst wordt in realtime bijgewerkt terwijl u groepen in- en uitschakelt, zodat u altijd precies weet hoeveel glyphs het geëxporteerde font zal bevatten.

Bobcorn kan vijf fontformaten genereren. Kies de formaten die overeenkomen met de browserondersteuningsvereisten van uw project:

WOFF2 is altijd inbegrepen omdat het het essentiële webfontformaat is — er is geen scenario denkbaar waarbij u een webfontexport zonder zou willen. Alle andere formaten zijn opt-in op basis van uw specifieke vereisten.

Naast de fontbestanden zelf kan Bobcorn verschillende begeleidende bestanden genereren die integratie en samenwerking eenvoudiger maken:

CSS (icons.css)

Bevat de @font-face-declaratie en .icon-* CSS-klassen voor elk icoon in de set. Voeg dit bestand toe aan uw project en u bent klaar om iconen te gebruiken met eenvoudige klassenamen. Zie de CSS @font-face gids voor details over hoe de gegenereerde CSS werkt.

JS (icons-symbol.js)

Een SVG symbol sprite die alle iconen registreert als inline SVG-symbolen wanneer het script laadt. Gebruik dit wanneer u meerkleurige iconen of SVG-specifieke functies naast uw fonticons nodig heeft. Zie de SVG Symbol gids voor gebruikspatronen.

HTML (demo.html)

Een interactieve voorbeeldpagina die alle geëxporteerde iconen toont met hun namen, CSS-klassenamen en Unicode-codepunten. Open het in een browser om door de volledige iconenset te bladeren. Handig voor ontwerpers die de icoonbibliotheek beoordelen en ontwikkelaars die klassenamen opzoeken tijdens integratie.

ICP (project.icp)

Het projectbestand van Bobcorn. Exporteer dit om uw icoonproject te delen met teamleden of als back-up. Het openen van een ICP-bestand in Bobcorn herstelt de volledige projectstatus — alle iconen, groepen, metadata en instellingen — precies zoals ze waren bij de export.

Schakel de optie ZIP in om alle geëxporteerde bestanden samen te bundelen in één .zip-archief. Dit is handig bij het delen van het icoonfont met teamleden, uploaden naar een CDN of bijvoegen aan een design handoff-document. De ZIP bevat dezelfde directorystructuur als een losse export — geen nesting of reorganisatie.

Hier zijn drie praktische voorinstellingen voor veelvoorkomende projecttypen:

Modern webproject

• WOFF2 (altijd aan) + CSS + HTML-demo
• Minimale footprint, dekt 97%+ van de browsers

Volledig compatibiliteitsproject

• WOFF2 + WOFF + CSS + HTML-demo
• Dekt IE 11+ en alle moderne browsers

Ontwerpsysteem / componentenbibliotheek

• WOFF2 + TTF + CSS + JS-symbool + HTML-demo + ICP
• Fonts voor CSS-gebruik, TTF voor desktoptools, JS-symbolen voor meerkleurige varianten, ICP voor projectback-up

Wanneer alle opties zijn ingeschakeld, genereert Bobcorn de volgende bestandsstructuur:

output/
├── MyIcons.woff2        # Fontbestanden
├── MyIcons.woff
├── MyIcons.ttf
├── MyIcons.css          # @font-face + icoonklassen
├── MyIcons-symbol.js    # SVG symbol sprite
├── demo.html            # Interactief voorbeeld
└── MyIcons.icp          # Projectback-up

De fontfamilienaam (bijv. "MyIcons") is afgeleid van uw projectnaam in Bobcorn. Alle gegenereerde bestanden gebruiken deze naam als prefix voor consistentie.

Nadat Bobcorn uw bestanden heeft gegenereerd, volgt u deze stappen om het icoonfont in uw project te integreren:

1. Kopieer fontbestanden + CSS naar de assets- of fontsmap van uw project
2. Koppel de CSS in uw HTML: <link rel="stylesheet" href="MyIcons.css">
3. Gebruik iconen overal in uw opmaak: <i class="icon icon-home"></i>
4. Laad optioneel het WOFF2-bestand voor voor snellere initiële rendering

Hier is een volledig integratievoorbeeld:

<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> Opslaan</button>
</body>

De hint rel="preload" vertelt de browser het fontbestand te beginnen downloaden voordat het de @font-face-regel in de CSS tegenkomt. Dit elimineert de vertraging tussen het parsen van CSS en het downloaden van het font, wat resulteert in een snellere eerste weergave met zichtbare iconen. Het attribuut crossorigin is vereist voor fontpreloads, zelfs wanneer het font van dezelfde oorsprong is.