Hướng Dẫn Xuất File
Hướng dẫn đầy đủ về quy trình xuất file của Bobcorn — từ chọn icon đến tạo file font sẵn sàng cho môi trường sản xuất.
Mở Hộp Thoại Xuất File
Nhấn nút Xuất trong menu thanh bên trái. Hộp thoại xuất file mở ra dưới dạng modal cho phép bạn cấu hình thư mục đầu ra, chọn nhóm icon cần đưa vào, và chọn định dạng đầu ra cùng các file đi kèm. Tất cả cài đặt đều được ghi nhớ giữa các phiên làm việc, vì vậy sau khi đã cấu hình xong thiết lập xuất file ưa thích, các lần xuất tiếp theo chỉ cần một cú nhấp chuột.
Chọn Thư Mục Đầu Ra
Bước đầu tiên là chọn nơi lưu các file đã xuất. Theo mặc định, Bobcorn sử dụng Desktop của bạn. Nhấn nút thư mục bên cạnh đường dẫn để chọn vị trí khác.
fonts/ hoặc assets/ của dự án để tránh phải sao chép file thủ công sau mỗi lần xuất. Điều này đặc biệt hữu ích trong quá trình phát triển tích cực khi bạn đang lặp lại nhiều lần trên bộ icon.
Chọn Nhóm Icon
Bạn có thể chọn nhóm icon nào sẽ được đưa vào file xuất. Theo mặc định, tất cả các nhóm đều được chọn. Bỏ chọn các nhóm bạn không muốn đưa vào font — ví dụ, bạn có thể loại trừ nhóm "bản nháp" chứa các icon đang trong quá trình thiết kế.
Mỗi nhóm hiển thị số lượng icon bên cạnh tên của nó. Tổng số icon ở cuối danh sách cập nhật theo thời gian thực khi bạn bật/tắt các nhóm, vì vậy bạn luôn biết chính xác font xuất ra sẽ chứa bao nhiêu ký tự đồ họa.
Định Dạng Font
Bobcorn có thể tạo ra năm định dạng font. Hãy chọn những định dạng phù hợp với yêu cầu hỗ trợ trình duyệt của dự án:
| Định dạng | Mặc định | Khi nào bật | Tìm hiểu thêm |
|---|---|---|---|
| .woff2 | Luôn bật | Luôn luôn — định dạng web thiết yếu | WOFF2 → |
| .woff | Tùy chọn | Cần hỗ trợ IE 11 | WOFF → |
| .ttf | Tùy chọn | Ứng dụng desktop, cài đặt font hệ điều hành | TTF → |
| .svg | Tùy chọn | Gỡ lỗi, iOS cũ | SVG Font → |
| .eot | Tùy chọn | Chỉ dành cho IE 6-8 cũ | EOT → |
WOFF2 luôn được bao gồm vì đây là định dạng font web thiết yếu — không có trường hợp nào bạn muốn xuất font web mà không có nó. Tất cả các định dạng khác là tùy chọn dựa trên yêu cầu cụ thể của bạn.
Các File Đi Kèm
Ngoài các file font chính, Bobcorn có thể tạo thêm một số file đi kèm giúp tích hợp và cộng tác dễ dàng hơn:
CSS (icons.css)
Chứa khai báo @font-face và các lớp CSS .icon-* cho mỗi icon trong bộ. Thêm file này vào dự án và bạn đã sẵn sàng sử dụng icon bằng tên lớp đơn giản. Xem hướng dẫn CSS @font-face để biết chi tiết về cách CSS được tạo ra hoạt động.
JS (icons-symbol.js)
Sprite SVG symbol đăng ký tất cả icon dưới dạng SVG symbol nội tuyến khi script tải. Sử dụng khi bạn cần icon nhiều màu hoặc các tính năng SVG cụ thể bên cạnh icon font. Xem hướng dẫn SVG Symbol để biết các cách sử dụng.
HTML (demo.html)
Trang xem trước tương tác hiển thị tất cả icon đã xuất với tên, tên lớp CSS và điểm mã Unicode. Mở trong trình duyệt để duyệt toàn bộ bộ icon. Hữu ích cho designer xem xét thư viện icon và developer tra cứu tên lớp khi tích hợp.
ICP (project.icp)
File dự án của Bobcorn. Xuất file này để chia sẻ dự án icon với đồng nghiệp hoặc làm bản sao lưu. Mở file ICP trong Bobcorn sẽ khôi phục toàn bộ trạng thái dự án — tất cả icon, nhóm, siêu dữ liệu và cài đặt — chính xác như khi xuất.
Đóng Gói ZIP
Bật tùy chọn ZIP để đóng gói tất cả file đã xuất vào một kho lưu trữ .zip duy nhất. Điều này hữu ích khi chia sẻ font icon với đồng nghiệp, tải lên CDN, hoặc đính kèm vào tài liệu bàn giao thiết kế. File ZIP chứa cùng cấu trúc thư mục như xuất file thông thường — không có lồng nhau hay tổ chức lại.
Cấu Hình Khuyến Nghị
Dưới đây là ba cài đặt sẵn thực tế cho các loại dự án phổ biến:
Dự án web hiện đại
- WOFF2 (luôn bật) + CSS + HTML demo
- Dung lượng tối thiểu, hỗ trợ 97%+ trình duyệt
Dự án tương thích toàn diện
- WOFF2 + WOFF + CSS + HTML demo
- Hỗ trợ IE 11+ và tất cả trình duyệt hiện đại
Hệ thống thiết kế / thư viện component
- WOFF2 + TTF + CSS + JS symbol + HTML demo + ICP
- Font cho CSS, TTF cho công cụ desktop, JS symbol cho biến thể nhiều màu, ICP để sao lưu dự án
Cấu Trúc File Đầu Ra
Khi tất cả các tùy chọn được bật, Bobcorn tạo ra cấu trúc file sau:
Kết quả xuất fileoutput/
├── 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 backupTên bộ font (ví dụ: "MyIcons") được lấy từ tên dự án trong Bobcorn. Tất cả các file được tạo đều sử dụng tên này làm tiền tố để nhất quán.
Sau Khi Xuất File
Sau khi Bobcorn đã tạo xong file, hãy làm theo các bước sau để tích hợp font icon vào dự án:
- Sao chép file font + CSS vào thư mục assets hoặc fonts của dự án
- Liên kết CSS trong HTML:
<link rel="stylesheet" href="MyIcons.css"> - Sử dụng icon ở bất kỳ đâu trong markup:
<i class="icon icon-home"></i> - Tùy chọn preload file WOFF2 để render nhanh hơn lần đầu
Dưới đây là ví dụ tích hợp hoàn chỉnh:
Tích hợp hoàn chỉnh<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>Gợi ý rel="preload" yêu cầu trình duyệt bắt đầu tải file font trước khi gặp quy tắc @font-face trong CSS. Điều này loại bỏ độ trễ giữa quá trình phân tích CSS và tải font, dẫn đến lần hiển thị đầu tiên nhanh hơn với icon hiển thị ngay. Thuộc tính crossorigin là bắt buộc cho preload font, ngay cả khi font ở cùng origin.
demo.html đã tạo trong trình duyệt để duyệt tất cả icon đã xuất. Bạn có thể nhấp vào bất kỳ icon nào để sao chép tên lớp CSS — tiện dụng trong quá trình phát triển khi bạn cần tra cứu lớp chính xác cho một icon cụ thể.