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

פרסומת

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

מהם גופני אייקון?

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

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

מתחילים

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

הנה ה- HTML המתנע:

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

הקו החשוב ביותר הוא הבא:

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

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

הנה השימוש הבסיסי. שים את זה בתוך שלך גוף תגיות:

 האייקון הראשון שלי

כך נראה:

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

נסה לשנות את הסמל מהגלגל לכל אחד אחר.

הולך עמוק יותר

ברגע שאתה יודע את היסודות, הגיע הזמן לכמה טריקים מתקדמים.

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

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

הנה התוצאה:

קל לסובב סמלים - השתמש בסמל לסובב מעמד:

המספר בסוף מגדיר את דרגות הסיבוב של הסמל, אך אל תיסחף. אתה מוגבל ל 90, 180, או 270.

טריק אחרון שאפשר לעשות הוא לערום. ה fa-stack כיתה מאפשרת לך לשלב שני סמלים או יותר יחד. הנה הקוד:

כך נראה:

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

CSS מותאם אישית

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

להלן ה- HTML עבור אותו סמל:

הנה ה- CSS:

@keyframes נעה {מ- {margin-left: 0; } עד {margin-left: 400px; } }. אופניים {שם אנימציה: מעבר; משך האנימציה: 4s; }

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

אתה יכול לעשות כמה דברים מיוחדים אם אתה באמת רוצה:

זה מגמגם מעט כדי לצמצם את גודל הקובץ באינטרנט. הנה ה- HTML:

הנה ה- CSS:

@keyframes דוהים {מ {אטימות: 0; } ל {אטימות: 1; } } .person {אטימות: 0; שם אנימציה: דהייה; } # p1 {צבע: אדום; משך האנימציה: 2s; } # p2 {צבע: כתום; משך האנימציה: 4s; } # p3 {צבע: ירוק; משך האנימציה: 6s; } # p4 {משך האנימציה: 8s; }

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

זה הכל להיום. כעת אתה אמור להיות מסוגל להשתמש בגופני אייקון כדי להחיות את האתר שלך! אם עדיין אינך בטוח בכישוריך, בדוק את אלה אתרי תבניות CSS 11 אתרי תבנית CSS: אל תתחיל מגרד!יש אלפי תבניות CSS בחינם הזמינות ברשת, וכולן חובקות מגמות וטכנולוגיות עיצוב מודרניות. אתה יכול להשתמש בהם בצורתם המקורית, או להתאים אותם כדי להפוך אותם משלך. קרא עוד , או אלה ערוצי YouTube כדי להתחיל רוצים ללמוד עיצוב אתרים? 7 ערוצי YouTube כדי להתחילל- YouTube אלפי סרטונים וערוצים למתחילים בעיצוב אתרים. כאן אנו בודקים כמה מהטובים ביותר לתחילת העבודה. קרא עוד עם עיצוב אתרים.

האם למדת היום משהו חדש? מה הגופן האייקוני המועדף עליך? ספר לנו בתגובות למטה!