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

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

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

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

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

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

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

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

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

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

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

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

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

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

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

<i class="fa fa-flag"></i>

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

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

<i class="fa fa-flag"></i>

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

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

.fa-flag
{
color:#ff6666;
font-size:36px;
}

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

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

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

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

.fa-flag:before
{
content: "\f024";
}

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