שימוש בפונט להצגת אייקונים באתר שלכם

בשנים האחרונות הפך הטרנד של "עיצוב שטוח" (flat design) לנפוץ במיוחד. אחד המאפיינים הבולטים של גישה עיצובית זו, בעיקר באפליקציות web, הוא השימוש באייקונים מונוכרומטיים (בעלי צבע אחד). דוגמה שכרגע נמצאת לי מול העיניים היא מערכת הניהול של wordpress:

Flat icons
אייקונים מונוכרומטיים

עד לא מזמן, כדי להציג אייקונים כאלו באתר שלנו, היינו משתמשים בתמונה נפרדת לכל אייקון, ולעתים גם בתמונה נוספת עבור מצב hover בו העכבר נמצא על האייקון. לשיטה זאת חסרונות רבים, אך למזלנו כיום קיימות שיטות מתקדמות יותר למימוש אייקונים.

אחת השיטות האהובות עליי, וזאת שאציג בפוסט זה, היא שימוש בפונטים. אך לפני שאסביר איך עובדת השיטה, נתחיל עם קצת רקע.

SVG – תמונה וקטורית

Smart Vector Graphics, או SVG הוא פורמט תמונה וקטורי (vector) מבוסס XML. לא ארחיב עליו כאן, אך אקצר ואסביר שבשונה מפורמטים כמו Bitmap או JPEG, קובץ SVG לא מכיל מידע אודות הפיקסלים שבתמונה, אלא מתאר את האלמנטים השונים המרכיבים את התמונה כגון קווים, צורות, טקסט וכד'. הנה דוגמה לקובץ SVG.

לשימוש ב-SVG ישנם מספר יתרונות על שימוש בפורמטים שאינם וקטורים:

  • ניתן לשנות את גודל התמונה ללא פגיעה באיכות
  • קובץ התמונה הוא לרוב קטן יותר, במיוחד עבור תמונות פשוטות
  • ניתן לשנות את העיצוב באמצעות CSS
  • הקובץ הוא בפורמט טקסטואלי וניתן לייצר אותו דינאמית ואף להטמיע אותו ישירות ב-HTML

ניתן להשתמש ב-SVG יחסית בחופשיות, מכיוון שפורמט זה נתמך על ידי הרוב המוחלט של הדפדפנים הנפוצים.

אך למרות גודל הקובץ הקטן, טעינת קובץ SVG עדיין מצריכה בקשת HTTP. במידה והעמוד שלנו מכיל הרבה אייקונים, טעינתם עלולה לפגוע בביצועי האפליקציה שלנו. אמנם ניתן לייצר sprite אחד מכל הקבצים, אך התחזוקה והשימוש בקובץ כזה היא לא נוחה בלשון המעטה.

למזלנו, קיים פתרון שימושי ביותר לבעייה זו:

פונט אייקונים

הרבה לפני שהומצא ה-SVG, כולנו הכרנו והשתמשנו בפורמט וקטורי אחר – פונט (גופן). בדומה ל-SVG, הייתרון המשמעותי של פונטים הוא שניתן לשנות את גודל האותיות ללא פגיעה באיכות. למעשה, אחד הסוגים של קובץ פונט מכיל קובץ SVG של ממש עבור כל אות.

קם חכם ואמר – מדוע צריכים הפונטים להכיל אותיות בלבד? למה שלא נייצר פונט המכיל, במקום אותיות, אייקונים? ואכן קיימים מספר פונטים שהם למעשה אוסף של אייקונים, ביניהם Font Awesome ו-Ionicons.

לפונט אייקונים יתרונות רבים:

  • בקשת HTTP אחת, ללא תלות במספר האייקונים אותם אנו צריכים.
  • תמיכה לאחור גם בדפדפנים ישנים מאוד (IE6).
  • ניתן לשנות את עיצוב האייקונים בנקל ע"י מאפייני CSS לעיצוב טקסט: font-size, color וכד'
  • השימוש בפונטים אלו הוא פשוט מאוד, ומצריך 2 שורות קוד בלבד:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<i class="fa fa-camera-retro"></i>

השורה הראשונה מייבאת את קובץ ה-CSS של Font Awesome (שבתורו מייבא את הפונט עצמו), והשניה מייצרת תגית ריקה, שהחלק החשוב בה הוא המאפיין class, ה"ממלא" את התגית בתוכן המתאים מתוך הפונט (גם כאן לא נגלוש לפרטים).

וכך זה נראה:

JS Bin on jsbin.com

עבור אתרים ואפליקציות פשוטים – השימוש ב-Font Awesome ודומיו מספק בהחלט, בעיקר כי פונטים אלו מכילים אייקונים עבור רוב הפעולות הנפוצות. אך מה אם יש לנו אייקונים משלנו שנרצה לשלב בפונט? בדיוק בשביל משימה זאת קיים השירות המדהים הבא.

Fontello

פונטלו הוא שירות חינמי (קוד פתוח) המאפשר לנו לייצר פונט משלנו, המכיל בדיוק את האייקונים שאנחנו צריכים, ואותם בלבד. ניתן להוסיף אייקונים לפונט בשתי דרכים:

  • ע"י בחירה ממבחר קיים של מאות אייקונים מפונטים נפוצים כגון Font Awesome, Fontelico, Entypo ועוד.
  • ע"י העלאה של קבצי SVG משלנו.

לאחר בחירת האייקונים, ניתן להוריד את הפונט, שמגיע ב-4 פורמטים שונים ונתמך בכל הדפדפנים, ואיתו קבצי CSS המאפשרים שימוש באייקונים בקלות:

<link rel="stylesheet" href="path/to/fontello.css">
<i class="icon-like"></i>

רוצים להוסיף אייקון חדש? אין בעיה, פשוט כנסו מחדש לפונטלו (הוא כבר יזכור בשבילכם מה מכיל הפונט שלכם), בחרו את האייקון החדש, והורידו את הפונט המעודכן.

ואם בא לכם לייצר אייקון חדש מאפס או מקובץ וקטורי שאינו SVG, אני ממליץ על תוכנת Inkscape החינמית.