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

ואז אחרי כמה נסיונות הבנתי כמה זה גאוני!

4 יתרונות לשימוש באייקונים שהם פונטים:

• אפשר להגדיר גודל אייקון לפי font-size ב-CSS וגם עוד הגדרות-CSS רבות.
• ניתן להגדיל את האייקון ולשמור על האיכות.
• חוסכים במשקל, כל האייקונים לא מאוחסנים אצלכם והם אינם תמונות.
• אפשר להכניס אייקונים תוך כדי פסקה בין אותיות, לפני משפט או אחרי מבלי להסתבך.

אוקי אז איך משתמשים?
יש כמה דרכים, אפשר להוריד את הקובץ מהאתר ולהשתמש בו בתוך תיקיית הפרויקט שלכם בשרת:

http://fortawesome.github.io/Font-Awesome/get-started

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

אז העתיקו את שורת הקוד הזו:

ותשימו אותה בחלק של ה-Header.

* שימו לב שכדי להשתמש בספרייה חייבים להשתמש בשרת או שרת וירטואלי.

לאחר מכן ניכנס לספריית הפונטים עצמה ונבחר אייקון שאנחנו אוהבים:

נניח ובחרנו באייקון של הדגל הזה

http://fortawesome.github.io/Font-Awesome/icon/flag

עכשיו נראה בתחתית את השורה הזו

שבעצם בעזרת Pseudo Element של before & after, שעליו הסברתי באחד הפוסטים כאן, מוסיפה את האייקון שנרצה בתוך התגית <i> בעזרת CSS.

כל מה שצריך לעשות הוא להעתיק את התגית הזו

ולהדביק אותה איפה שנרצה, כמו כאן:

נוכל להגדיר ב-CSS שהאייקון יהיה בצבע #ff6666 וגם להגדיל אותו לגודל 36 פיקסלים בצורה הזו:

זהו זה, ממש קל, תוכלו לבחור איזה אייקון שתרצו ולתת לו הגדרות משלכם.

יש עוד מגוון אפשרויות כמו סיבוב האייקון ואפילו אנימציה בעמוד הדוגמאות:

http://fortawesome.github.io/Font-Awesome/examples

קצת מאחורי הקלעים
כל ספריית הפונטים היא בעצם פונט שבמקום אותיות מורכב מסמלים/אייקונים ובעזרת Pseudo Element הם מגדירים את התו הספציפי שמייצג את האייקון:

אה והכי חשוב – הכל חינם!