Dışa Aktarma Kılavuzu

Sol kenar çubuğu menüsündeki Dışa Aktar düğmesine tıklayın. Dışa aktarma iletişim kutusu; çıktı dizinini yapılandırmanıza, hangi simge gruplarının dahil edileceğini seçmenize ve çıktı biçimleriyle birlikte gelen dosyaları belirlemenize olanak tanıyan bir modal olarak açılır. Tüm ayarlar oturumlar arasında hatırlanır; bu nedenle tercih ettiğiniz dışa aktarma yapılandırmasını bir kez ayarladıktan sonra sonraki dışa aktarmalar tek bir tıklamayla gerçekleşir.

İlk adım, dışa aktarılan dosyaların nereye kaydedileceğini seçmektir. Bobcorn varsayılan olarak Masaüstü'nüzü kullanır. Farklı bir konum seçmek için yolun yanındaki klasör düğmesine tıklayın.

Dışa aktarmaya hangi simge gruplarının dahil edileceğini seçebilirsiniz. Varsayılan olarak tüm gruplar seçilidir. Fonta dahil etmek istemediğiniz grupların işaretini kaldırın — örneğin, devam eden çalışma simgeleri içeren bir "taslaklar" grubunu hariç tutabilirsiniz.

Her grubun yanında simge sayısı gösterilir. Listenin alt kısmındaki toplam simge sayısı, grupları açıp kapattıkça gerçek zamanlı olarak güncellenir; böylece dışa aktarılan fontun tam olarak kaç glif içereceğini her zaman bilirsiniz.

Bobcorn beş font biçimi oluşturabilir. Projenizin tarayıcı destek gereksinimlerine uygun olanları seçin:

WOFF2 her zaman dahildir; çünkü temel web font biçimidir — onsuz bir web font dışa aktarması isteyeceğiniz herhangi bir senaryo yoktur. Diğer tüm biçimler, özel gereksinimlerinize göre isteğe bağlı olarak etkinleştirilir.

Font dosyalarının yanı sıra Bobcorn, entegrasyonu ve iş birliğini kolaylaştıran çeşitli birlikte gelen dosyalar oluşturabilir:

CSS (icons.css)

Setteki her simge için @font-face bildirimi ve .icon-* CSS sınıflarını içerir. Bu dosyayı projenize ekleyin; basit sınıf adlarıyla simgeleri kullanmaya hazır olursunuz. Oluşturulan CSS'in nasıl çalıştığına ilişkin ayrıntılar için CSS @font-face kılavuzuna bakın.

JS (icons-symbol.js)

Script yüklendiğinde tüm simgeleri satır içi SVG sembolleri olarak kaydeden bir SVG sembol sprite'ı. Font simgelerinin yanı sıra çok renkli simgelere veya SVG'ye özgü özelliklere ihtiyaç duyduğunuzda bunu kullanın. Kullanım kalıpları için SVG Symbol kılavuzuna bakın.

HTML (demo.html)

Dışa aktarılan tüm simgeleri adları, CSS sınıf adları ve Unicode kod noktalarıyla birlikte gösteren etkileşimli bir önizleme sayfası. Tam simge setine göz atmak için tarayıcıda açın. Simge kitaplığını inceleyen tasarımcılar ve entegrasyon sırasında sınıf adlarını arayan geliştiriciler için kullanışlıdır.

ICP (project.icp)

Bobcorn'un proje dosyası. Simge projenizi ekip arkadaşlarınızla paylaşmak veya yedek olarak saklamak için dışa aktarın. Bir ICP dosyasını Bobcorn'da açmak, projenin tam durumunu — tüm simgeler, gruplar, meta veriler ve ayarlar — dışa aktarıldığı andaki haliyle geri yükler.

Dışa aktarılan tüm dosyaları tek bir .zip arşivinde paketlemek için ZIP seçeneğini etkinleştirin. Bu, simge fontunu ekip arkadaşlarıyla paylaşırken, CDN'e yüklerken veya tasarım teslim belgesine eklerken kullanışlıdır. ZIP, gevşek dışa aktarmayla aynı dizin yapısını içerir — iç içe yerleştirme veya yeniden düzenleme yapılmaz.

Yaygın proje türleri için üç pratik ön ayar:

Modern web projesi

• WOFF2 (her zaman açık) + CSS + HTML demosu
• Minimum boyut, tarayıcıların %97+'sini kapsar

Tam uyumluluk projesi

• WOFF2 + WOFF + CSS + HTML demosu
• IE 11+ ve tüm modern tarayıcıları kapsar

Tasarım sistemi / bileşen kütüphanesi

• WOFF2 + TTF + CSS + JS sembol + HTML demosu + ICP
• CSS kullanımı için fontlar, masaüstü araçları için TTF, çok renkli varyantlar için JS sembolleri, proje yedeği için ICP

Tüm seçenekler etkinleştirildiğinde Bobcorn aşağıdaki dosya yapısını oluşturur:

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

Font ailesi adı (örneğin "MyIcons"), Bobcorn'daki proje adınızdan türetilir. Oluşturulan tüm dosyalar tutarlılık amacıyla bu adı ön ek olarak kullanır.

Bobcorn dosyalarınızı oluşturduktan sonra simge fontunu projenize entegre etmek için şu adımları izleyin:

1. Font dosyalarını ve CSS'i projenizin assets veya fonts dizinine kopyalayın
2. CSS'i HTML'inizde bağlayın: <link rel="stylesheet" href="MyIcons.css">
3. Simgeleri işaretlemenizin herhangi bir yerinde kullanın: <i class="icon icon-home"></i>
4. İsteğe bağlı olarak daha hızlı ilk işleme için WOFF2 dosyasını önceden yükleyin

Eksiksiz bir entegrasyon örneği:

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

rel="preload" ipucu, tarayıcıya CSS'deki @font-face kuralıyla karşılaşmadan önce font dosyasını indirmeye başlamasını söyler. Bu, CSS ayrıştırması ile font indirmesi arasındaki gecikmeyi ortadan kaldırır ve simgeler görünür şekilde daha hızlı ilk boyama sağlar. crossorigin niteliği, font aynı kaynaktan sunulsa bile font ön yüklemeleri için zorunludur.