בעבר, בעת יצירת אתרים, היית צריך להשתמש בסמלי מפת סיביות. זה היה יפה, אבל לא נוח ממגוון סיבות. כיום, אייקונים וקטוריים החליפו סמלי רסטר. זהו פתרון מקורי ואלגנטי שיקשט וירענן את האתר שלכם.
הוראות
שלב 1
יש שירות אינטרנט טוב ליצירת גופנים מסמלים. קוראים לזה פונטסטיק. זה לגמרי בחינם וללא מודעות. השלב הראשון הוא הרשמה באתר השירות. היכנס לאתר fontastic.me, הזן את כתובת הדוא"ל שלך בשדות הקלט וצור סיסמה, ואז לחץ על הכפתור הצהוב הגדול "צור גופן אייקון שלך". לפעמים קורה שלא מוצג מידע המאשר הרשמה מוצלחת. אל תדאג בקשר לזה, המשך לשלב הבא.
שלב 2
כעת לחץ על כפתור "התחברות" הממוקם בפינה השמאלית העליונה. בדף שנפתח, הזן את הדואר האלקטרוני והסיסמה שלך שוב, לחץ על כפתור "התחברות".
לאחר המתנה של מספר שניות, החלונית ליצירת גופנים מסמלים תיפתח.
שלב 3
הנה מבחר גדול של אייקונים. על ידי לחיצה על הסמלים שאתה אוהב בעזרת העכבר, בחר כמה סמלים שאתה צריך. בחלק העליון, אחרי המילה "PUBLISH", מצוין מספר הסמלים שנבחרו.
שלב 4
אם אין לך מספיק אייקונים מהמספר שהוצג, גלול מטה לתחתית הדף ומצא את הכפתור שאומר "הוסף אייקונים נוספים". לחץ על זה.
שלב 5
דף עם חבילות אייקונים נוספות ייפתח. חלקם בתשלום (שכותרתו "פרימיום"), חלקם בחינם. להפעלת סמלים נוספים, לחץ על כפתור "ACTIVATE" בחבילות שנבחרו. כעת הם יופיעו ברשימה הכללית של האייקונים הזמינים כשתעבור להתחיל בלוח הבקרה על ידי לחיצה על כפתור "הבית" בתפריט העליון.
שלב 6
אם אתה צריך להוסיף סמלים משלך, ואז באותו דף בפינה השמאלית העליונה, לחץ על כפתור "ייבוא סמלים". כעת תוכל להעלות סמלים משלך. שים לב שרק פורמט SVG וקטורי נתמך.
שלב 7
לאחר שבחרתם את מספר הסמלים הדרוש, לחצו על כפתור "התאמה אישית". כאן תראה את כל הסמלים שנבחרו ותוכל להקצות להם שמות מחלקות שרירותיים, באמצעותם תתייחס אליהם בסגנונות CSS. לחלופין, תוכל להשאיר את שמות ברירת המחדל שהמערכת הקצתה לסמלים.
שלב 8
לחץ על כפתור "PUBLISH". כאן תוכלו להוריד את גופן סמל הווקטור שנוצר (כפתור "הורד"). הורד את ארכיב הגופנים שנוצר על ידי השירות למחשב שלך.
שלב 9
הארכיון שהורדת מכיל את הקובץ בסגנון CSS, קובץ ה- HTML עם שמות מחלקות הסמלים ותיקיית "הגופנים" עם הגופנים. ניתן להשתמש בגופן אייקון זה באתר האינטרנט שלך.
שלב 10
כדי להשתמש בגופן הסמל שנוצר, עליך לבצע את הפעולות הבאות:
- פרוק את תוכן הארכיון והעלה לאתר שלך בספריה עם סגנונות;
- הכנס קישור לקובץ CSS בקטע HEAD בכל דפי האתר שיעבדו עם גופן סמל זה;
- בקוד העמוד, אנו משתמשים בשם המחלקות שנוצרו בעבר כדי להשתמש בגופן הסמל החדש שנוצר.