סקירה מדהימה של גופן – מה זה? האם זה טוב? ואיך להשתמש בו באמצעות וורדפרס?

מבצעי וורדפרס


אם אתה מחפש סקירה של Font Awesome במשפט בודד, הנה זה: ‘זה נחמד … ופונקציונלי … וסוג מבריק בפשטותו העצומה’. זה בעצם מסכם את החוויה הראשונה שלי עם ערכת הכלים המדהימה הזו.

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

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

מה הגופן מדהים?

סקירה גופן מדהים

על קצה המזלג, Font Awesome הוא פונט אייקון.

חשוב על גופן רגיל, אבל במקום אותיות אתה מקבל סמלים.

זה החלק המבריק ומשנה המשחק באמת של כל העניין.

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

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

כאן נכנס לתמונה Font Awesome.

ברגע שתחבר את האתר שלך ל- Font Awesome, תוכל לגשת לכל סמל באמצעות תג HTML פשוט. לדוגמה, כדי להשיג את הסמל המגניב הזה:

סמל מכונית

… כל מה שאני צריך לעשות זה להשתמש בקטע קוד כזה:

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

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

סמל סטטי

… אתה יכול להשיג משהו כזה:

סיבוב סמל

ואת זה ניתן לעשות עם כל אייקון של Font Awesome.

לכן השאלה היא:

האם זה טוב?

לדעתי החוזקות העיקריות של Font Awesome הן:

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

למען האמת, Font Awesome עושה את מה שהוא עושה ממש טוב בצורה יוצאת דופן.

למען הכל, אין הרבה עקומת למידה. לאחר שתותקן Font Awesome באתר שלך, כל שעליך לעשות הוא:

  • דפדף בסמלים הזמינים כדי לקבל סקירה נאה של מה שיש
  • בדוק את הדוגמאות (התייחס אליהם כאל מדריך הוראות מהיר).

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

והכי חשוב, אייקונים של Font Awesome משיגים שלוש מטרות עיקריות מבחינה עיצובית:

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

אוקיי, נעבור לחלק ההוראות של הסקירה:

כיצד להשתמש בגופן מדהים עם וורדפרס?

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

ו … יש בעיה.

או ליתר דיוק, יש בעיה אם מעולם לא היית בקטע ‘מראה / עורך’ של wp-admin.

להלן כוונתי:

להתקנת Font Awesome באתר וורדפרס שלך, עומדות בפניך שתי אפשרויות:

  • התקנה ידנית
  • באמצעות תוספים

והנה הבועט: Font Awesome הוא אחד המקרים הבודדים שבהם ביצוע הדברים בדרך הידנית הוא למעשה טוב יותר מאשר שימוש בתוספים.

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

אם אתה מחפש תוסף Font Awesome, סביר להניח שתמנע משני אלה:

  • Better Font Awesome – הצג אייקונים של Font Awesome בכל מקום בתוכן הבלוג שלך.
  • תפריטי Font Awesome 4 – הצגת סמלי Font Awesome בתפריטים.

בעוד ששניהם מבחינה טכנית מבצעים את עבודתם, יש כמה בעיות.

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

לאחר ההתקנה, אתה מקבל תיבה זו במסך עריכת הפוסט שלך:

הכנס אייקון באמצעות תוסף

לחיצה עליו תאפשר לך לבחור אייקון Font Awesome ולכלול אותו כקודקוד. מגניב.

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

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

עכשיו לגבי התוסף האחר, Font Awesome 4 Menus. זה אכן עובד ונראה כי הוא מציג ביצועים טובים למדי. כל שעליך לעשות הוא להתקין אותו ואז תוכל להוסיף שיעורים בהתאמה אישית לפריטי התפריט שלך, כך:

הוסף כיתת אייקונים

השיעורים זהים למפורט בתיעוד הרשמי של Font Awesome. התוסף דואג לצבע של הסמל כך שיתאים לתפריט, למרווח, לכל דבר.

סמלי תפריט

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

סמל חסר

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

כיצד לשלב גופן מדהים עם וורדפרס

בעיקרון, כמפורט כאן, תוכלו לעשות זאת בשתי דרכים שונות:

  • קבל את קוד ההטמעה הישיר היישר מ- Font Awesome.
  • הורד את החבילה ואז העלה אותה לשרת שלך באמצעות FTP.

בתחילה, התפתיתי להוריד אותו והייתי מתארח בו, אבל אז הבנתי שזה רק אומר עבודה נוספת. אמנם, קבלת החבילה עצמה והעלאתה דרך FTP זה לא כל כך הרבה עבודה (#lazy), אבל אז אתה גם צריך לדאוג לשמור עליה מעודכנת.

כשאתה מתמודד עם מוטבע, לעומת זאת, הכל דואג לך. ולהגדיר את כל עבודות התחזוקה, אתה מקבל גם את החבילה המוגשת מ- CDN, שעדיף גם לביצועים.

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

התחל לעבוד עם Font Awesome

Font Awesome ישלח אליך דוא”ל ברוך הבא עם קוד ההטמעה שלך, בתוספת אפשרות לרשום קוד זה, אשר נותן לך מספר הטבות נוספות. (הערה: זה לא חובה, אינך צריך להירשם כדי לקבל את הפונקציונליות העיקרית של Font Awesome.)

אז ברגע שיש לך את הקוד שלך, פשוט לעבור לקטע ‘מראה / עורך’ במנהל ה- wp שלך (בצע תמיד גיבוי של כל האתר שלך ושל כל הקבצים האישיים לפני שתבצע שינויים) ולהוסיף את הקוד בקטע של העיצוב שלך. זה בדרך כלל בקובץ header.php, כך:

חלק ראש

הערה: זכור כי אם תעדכן אי פעם את הנושא שלך, האינטגרציה הזו של Font Awesome תיעלם ותצטרך לבצע אותה מחדש. עם זאת, משתמשים בערכת נושא לילד (כאמור במאמר קודם), אין בעיה כזו.

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

אופציונלי: רישום חשבון הגופן שלך מדהים

כפי שציינתי, כשאתה מקבל את קוד ההטמעה, מציעים לך גם את ההזדמנות לרשום את חשבונך ב- Font Awesome. זה לא נדרש, אבל אני ממליץ לך לעשות זאת. החשבון בחינם ותקבל כמה דברים בתמורה:

  • היכולת להגדיר את ההטבעה שלך.

התאמה אישית של הטמעת גופן מדהים

  • כמה נתונים סטטיסטיים נחמדים על הסמלים שבהם אתה משתמש.

האם זה שווה Going Premium?

משהו שלא ידעתי בהתחלה היה ש- Font Awesome הציעה גם גרסת פרימיום של המוצר שלהם בשם Fort Awesome.

הדברים העיקריים שיש לדעת על זה:

  • יש בו אלפי סמלים נוספים. עם Fort Awesome, אתה מקבל המון סמלים נוספים המחולקים לסטים נפרדים (סגנונות עיצוב שונים, נושאיים וכו ‘). זה מאפשר לך לספק את כל צרכי האייקון של האתר שלך באמצעות כלי אחד – במיוחד אם אתה זקוק לקבוצה מאוד ספציפית של דברים לייצוג באמצעות סמלים..
  • אתה יכול להעלות ולהשתמש בסמלים משלך. זה מגניב מכיוון שהוא מאפשר לך להעלות דברים כמו הלוגו שלך, אייקוני מוצר או כל דבר אחר הגיוני, ולהוסיף אותם לספריית Font Awesome שלך. הכוח כאן הוא שתתחיל להשתמש בסמלים האלה ממש כמו כל סמלים אחרים של Font Awesome – כל הסמלים שלך עובדים באופן עקבי לא משנה מה המקור.
  • אתה מקבל הגדרות מותאמות אישית. אתה יכול להגדיר את הדומיינים שבהם ניתן להשתמש בערכות הסמל שלך וכן הלאה.
  • אתה יכול לכלול ערכות typfaces בערכות שלך. אתה יכול לבחור מכמה מהגופנים החינמיים הטובים ביותר או להעלות משלך. זה שומר על נכסי הטיפוגרפיה שלך לאתר במקום אחד.
  • אתה צריך לטעון את כל זה באמצעות CDN אופטימלי המסופק באמצעות MaxCDN.

בסופו של דבר, ליבת ההנפקה של Font Awesome היא קלות השימוש, שיפורי ביצועים וניהול קל הכולל של כל הסמלים והגופנים שלך..

התוכניות מתחילות ב 49 $ לשנה (יש ניסיון חינם). הנה מה שיש בפנים:

תוכניות Fort Awesome

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

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

כמו כן, כדאי לציין שפרמיה של Font Awesome אינה חבילה מסוג ‘הכל כלול’. ישנן ערכות סמלים בתשלום נוספות (עד $ 50 לחתיכה), כך שתוכלו למצוא את עצמכם עדיין מושיטים את הארנק גם לאחר שתקבלו את הצעת הפרמיה.

מה שהכל מסתכם בכך ש- Fort Awesome (Premium Awesome premium) אינה בהכרח האפשרות הטובה ביותר עבור מרבית הבלוגים של WordPress. אני באמת מאמין שההצעה החופשית תמלא את צרכיך 99% מהזמן.

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

סיכום

אני באמת חושב ש- Font Awesome הוא מוצר נהדר. מעולם לא היה קל לשלב באתרך אייקונים מגניבים ומעוצבים יפה. אתה פשוט פשוט אחד תייגו את הסמל המושלם (כמעט?) עבור כל מה שתרצו לדמיין.

הגופן מדהים על קצה המזלג:

  • גופן מדהים בחינם: כן, כן, כן.
  • Font Awesome premium (Fort Awesome): Meh.
  • תוספי וורדפרס מדהימים לגופנים שונים: בסדר, אבל לא מהמם.

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map