מכינים את הקבצים
- קובץ אחד לכל אייקון או אות, כולם על משטח עבודה באותו גודל, למשל 24 × 24. Fonterie מגדילה או מקטינה את כל הסט באותה מידה, לפי משטחי העבודה, כך שציור קטן נשאר קטן לצד ציור גדול.
- קווים זה בסדר: הם הופכים לקווי מתאר מלאים, עם רוחב הקו, הקצוות והחיבורים שלהם, כך שאייקונים של קו כמו Lucide, Feather ו־Tabler נכנסים כמו שהם נראים. קו מקווקו נכנס כקו רציף.
- טקסט ותמונות לא מיובאים, ובבדיקה כתוב באילו קבצים היו כאלה. מסכות ונתיבי חיתוך לא נלקחים בחשבון, כך שציור חתוך נכנס שלם. הפכו טקסט לקווי מתאר בתוכנה לפני הייצוא.
- קובץ בלי משטח עבודה (בלי
viewBox,widthאוheight) מקבל את הגודל שלו לפי הציור, ומסומן כדי שתבדקו אותו.
יוצרים פונט אייקונים
- מתחילים פונט חדש ובוחרים פונט אייקונים. נותנים לו שם ובוחרים יצירת פונט האייקונים. פונט אייקונים מתחיל ריק.
- בלשונית הוספת אייקונים בוחרים בחירת קובצי SVG או בחירת תיקייה, או גוררים את הקבצים לעמוד.
- בודקים את הרשת. כל אייקון מוצג בגודל שיהיה לו בפונט. אם כולם גדולים או קטנים מדי, משנים את הגודל; כדי להרים או להוריד את כל הסט, משתמשים בהזזה למעלה או למטה.
- מתקנים כל שם שמסומן באדום, או בוחרים השמטה בקובץ שלא רוצים. ואז מוסיפים.
כשמייבאים שוב home.svg אחרי עריכה, הוא מחליף את האייקון בשם home, ושומר על השם ועל התו שלו. Fonterie שואלת לפני כן, ואף פעם לא יוצרת home שני.
שמות ותווים
השם של כל אייקון בא משם הקובץ: Arrow Left.svg הופך ל־arrow-left. בשמות יש רק אותיות a–z, ספרות, מקפים וקווים תחתונים, ולפחות שני תווים. הקלדת השם בפונט מציגה את האייקון, כמו ב־Material Symbols וב־Font Awesome.
כל אייקון מקבל גם תו משלו באזור לשימוש פרטי של יוניקוד, החל מ־U+E000. אפליקציות שבוחרות אייקון לפי קוד משתמשות בו. אפשר לשנות שם או תו בבדיקה, או אחר כך בלשונית תווים.
משתמשים באייקונים
בתצוגה מקדימה, מקלידים שם של אייקון בהקלדת שם של אייקון ורואים אותו. מתחת מופיעים כל האייקונים עם השם והתו של כל אחד; לחיצה על אחד מהם מעתיקה אותו.
באתר, טוענים את הפונט בכלל @font-face ומציגים בו טקסט: <span class="icons">home</span> מציג את הבית. ליגטורות פועלות כברירת מחדל בכל הדפדפנים; אם העיצוב שלכם מכבה אותן, הוסיפו font-feature-settings: "liga". אפשר גם לכתוב את התו עצמו: .
אותיות לפונט כתב יד
בפונט כתב יד, ייבוא קובצי SVG נמצא בלשונית הוספת כתב יד. קוראים לכל קובץ בשם התו שלו:
- התו עצמו:
a.svg,א.svg,?.svg. - הקוד שלו:
uni05D0.svgאוu+0041.svg. - שם הגליף שלו:
alef.svg,finalkaf.svg,zero.svg. - לאותיות גדולות וקטנות, שרוב המחשבים לא מבדילים ביניהן בשם קובץ:
A_upper.svgו־a_lower.svg.
הגובה של משטח העבודה הופך למרחק מהקו העליון עד הקו התחתון, כך שאותיות שצוירו על אותו משטח שומרות על קו הבסיס ועל הגבהים שלהן. אם קו הבסיס שלכם לא נמצא במקום של קו הבסיס בפונט, מזיזים אותו בקו הבסיס. על קובץ ש־Fonterie לא מזהה כתוב לא זוהה: לוחצים עליו ומקלידים את התו. אות שכבר יש בפונט מתווספת כחלופה.