Font Awesome 6: ביקורת מלאה
- 1 כיצד להתקין גופן מדהים
- שיטה 1.
- שיטה 2.
- 2 כיצד להשתמש בפונט סמלים מדהימים
- 1 סמלים סטנדרטיים
- 2 סמלים גדולים
- 3 סמלי רוחב קבועים
- 4 סמלים לרשימה כדורים
- 5 סמלים וציטוטים ממוסגרים
- 6 סמלים מונפשים
- 7 סמלים טרנספורמציה
- 8 סמלי שילוב
- 3 Font Awesome 4.5.0 collection, classes וcss code to insert using the content property
- 4 משאבים קשורים
- גודל אייקון
- צבע אייקון
- שאלות נפוצות
Font Awesome הוא אוסף של סמלי וקטורים הניתנים להרחבה. ניתן לעצב סמלים באמצעות מאפייני CSS, להגדיר את צבעם, גודלם, צל ועוד. גופן גרסה 5.5.0 כולל 605 סמלים.
1 כיצד להתקין גופן מדהים
שיטה 1.
השתמש בגרסת font-awiouly.css של הקובץ על ידי הוספת הקוד הבא ל-<head> סָעִיף:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">ברגע שהגופן מחובר, אתה יכול להשתמש בסמלים באתר שלך.
שיטה 2.
הורד את הגופן מ- font Awesome . פרוק את הארכיון והעלה שתי תיקיות מהארכיון לשרת האתר - CSS וגופנים. אם כבר יש לך תיקיות עם שמות כאלה באתר שלך, אתה רק צריך להוסיף קבצים מהתיקיות שהורדו אליהם.
באפשרותך להשתמש בגרסה המלאה או המיטה של הקובץ:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 כיצד להשתמש בפונט סמלים מדהימים
ניתן להוסיף סמלים לדף אינטרנט בשתי דרכים: על ידי הגדרת הכיתות המתאימות עבור<i> ו<span> elements, אוֹby adding them to the desired element using the :before, :after pseudo-elements וthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li: לפני {תוכן: "\ f015";/ * הוסף אייקון ביתי */font-family: fontawesue; צבע: #aaaaa; שוליים-ימין: 10px;}1 סמלים סטנדרטיים
Font Awesome מיועד לשימוש עם אלמנטים מוטבעת. על מנת להוסיף סמלים, ראשית עליך להגדיר את מחלקת ה- FA ל<i> אוֹ<span> אֵלֵמֶנט.
כדי להוסיף את הסמל שנבחר לפני או אחרי האלמנט, ריק<i></i> אוֹ<span></span> אלמנט מתווסף לאלמנט, המוקצה לשיעור אייקונים, כמו גם כיתה נוספת המרחיבה את הסטיילינג.
<i class="fa fa-camera-retro"></i>2 סמלים גדולים
כדי להגדיל את גודל האייקון ביחס למיכלו, השתמש בכיתות FA-LG (עלייה של 33%), FA-2X, FA-3X, FA-4X, FA-5X.
<i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera- retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>3 סמלי רוחב קבועים
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation אוֹlists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> בית</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> סִפְרִיָה</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> יישומים</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> הגדרות</a ></li></ul>4 סמלים לרשימה כדורים
השתמש בשיעורי FA-UL ו- FA-Li כדי להחליף את כדורי ברירת המחדל ב- A<ul>...</ul> רשימה כדורים.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>פריט רשימה</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>פריט רשימה</li> <li><i class="fa-li fa fa-square"></i>פריט רשימה</li></ul>5 סמלים וציטוטים ממוסגרים
Use the fa-border class to set the border for the icon. The pull-right וpull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Lorem ipsum dolor sit amet, Consectetur adipiscing elit. Donec Nec Purus Congue, Posuere Libero in, פורטה ספיין. ב- SED ELIT LECTUS. SED LACUS ELIT, SEMPER VITAE FELIS ID, SODALES CONGUE SAPIEN.</p>6 סמלים מונפשים
הוסף את שיעורי ה- FA-Spin, FA-Pulse, FA-refresh, FA-Cog כדי להגדיר סמלי ספינינג. האנימציה אינה נתמכת ב- IE8 - IE9.
<i class="fa fa-spinner fa-spin"></i><i class="fa fa-circle-o-notch fa-spin"></i><i class="fa fa-refresh fa -spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-spinner fa-pulse"></i>7 סמלים טרנספורמציה
כדי לסובב או להעיף סמלים, השתמש בכיתות FA-Rotate-* ו- FA-FLIP-*.
<i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180" ></i><i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class=" fa fa-shield fa-flip-vertical"></i>8 סמלי שילוב
You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, וfa-stack-2x for the enlarged size.
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x" ></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger "></i></span>3 Font Awesome 4.5.0 collection, classes וcss code to insert using the content property
סמלים ליישומי אינטרנט Fa -adjust - \ f042;FA -Canple - \ F13D;
Fa -Archive - \ f187;
FA -AROWS - \ F047;
Fa -asterisk - \ f069;
Faat - \ f1fa;
סולם FA-BALANCE-\ F24E;
Fa -ban - \ f05e;
FA -BANK - \ F19C;
Fa -barcode - \ f02a;
FA-Battery-Pecty-\ F244;
FA-Battery-Half-\ F242;
FA-Battery-Quarter-\ F243;
FA-Battery-For- RATERS-\ F241;
Fa-battery-full-\ f240;
FA -BED - \ F236;
Fa -beer - \ f0fc;
Fa -bell - \ f0f3;
Fa-bell-slash-\ f1f6;
Fa -Binoculars - \ f1e5;
עוגת Fa-Birthday-\ f1fd;
Fa -bolt - \ f0e7;
Fa -bomb - \ f1e2;
FA -Book - \ F02D;
כדי לסובב או להעיף סמלים, השתמש בכיתות FA-Rotate-* ו- FA-FLIP-*.
4 משאבים קשורים
בנוסף לקולקציית Font Awesome, תוכלו להשתמש גם בגופני אייקונים אחרים.
פונטלו.fontello יש אוסף גדול של גופני אייקונים שונים. אתה יכול לבחור את הסמלים שאתה אוהב ולהוריד אותם למחשב שלך.
אייקון קרן.סמל יסוד הוא אוסף גופן אייקונים נוסף ממפתחי מסגרת היסוד. בנוסף לסמלים סטנדרטיים, האתר כולל אייקונים עגולים, סמלי מדיה חברתית ועוד.
סמלים חומריים.סמלי חומר הם הסמלים השטוחים המאוחדים של גוגל המגלמים את קלות התפיסה. סמלים מותאמים לתצוגה יפה בכל הפלטפורמות הנפוצות ולכל רזולוציות המסך.
אוסף גופן האייקון מכיל 750+ סמלים. הדרך הקלה ביותר להתקין אוסף באתר האינטרנט שלך היא להשתמש בסמלים כמו גופני אינטרנט של גוגל. לשם כך, הקוד הבא נכלל בסימון העמוד:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">כדי להציג נכון את הגופן בדפדפנים, האלמנט שישתמש בגופן האייקון מקבל כיתת איזונים חומרים:
. משקל גופן: סגנון גופן רגיל: גודל גופן רגיל: 24 פיקסלים; / * גודל סמל מועדף */ תצוגה: inline-block; רוחב: 1em; גובה: 1em; גובה קו: 1; טרנספורמציה טקסט: אין; מרווח אותיות: עטוף מילים רגיל: רגיל; מרחב לבן: norap; כיוון: ltr; -webkit-font-smoction: אנטי-מידה; / * נתמך על ידי כל דפדפני WebKit */ Text-Textring: OptimizElegimity; / * Safari ו- Chrome תמיכה */ -moz-osx-font-smopting: grayscale; /* תמיכה בפיירפוקס. */ פונט-תואם-הגדרות: 'ליגה'; /* IE תמיכה. */}הסמלים עצמם מתווספים באמצעות<I class=''material-סמלים''>קוד Ligature או HTML של הסמל</i> תג, למשל:
<i class="material-סמלים">RACTION_BALANCE_WALLET</i><i class="material-סמלים"></i>הרצועה מובנת על ידי כל הדפדפנים המודרניים, כלומר החל מגרסה 10. קוד הסמל נוצר אוטומטית, לשם כך אתה צריך ללחוץ על תמונת הסמל ולהעתיק את המראה המוצע.
גודל אייקון
גודל אייקון is controlled by additional classes:
.material-סמלים.md-18 {font-size: 18px;} /* עבור<i class="material-סמלים md-18"></i> */.material-סמלים.md-24 {font-size: 24px;} /* עבור<i class="material-סמלים md-24"></i> */.material-סמלים.md-36 {font-size: 36px;} /* עבור<i class="material-סמלים md-36"></i> */.material-סמלים.md-48 {font-size: 48px;} /* עבור<i class="material-סמלים md-48"></i> */צבע אייקון
צבע הסמלים מוגדר גם באמצעות שיעורים נוספים:
.material-סמלים.md-dark {צבע: rgba (0, 0, 0, 0.54);} /*<i class="material-סמלים md-dark"></i> */.material-סמלים.mdlight {צבע: rgba (255, 255, 255, 1);} /*<i class="material-סמלים md-light"></i> */.material-icon<i class="material-סמלים md-dark md-inactive"></i> * /.material-icon<i class="material-סמלים md-light md-inactive">פָּנִים</i> */כדי להגדיר צבע בהתאמה אישית, עליך להוסיף כיתה המגדירה את צבע הסמל, למשל:
.material-סמלים.indigo {צבע: #1a237e;} /*<i class="material-סמלים indigo"></i> */שאלות נפוצות
- מה גופן מדהים במונחים פשוטים?
- בעיקרו של דבר, זהו גופן עם סמלים שניתן להוסיף לכל אלמנט של דף אינטרנט כדי לשפר את הנראות והעיצוב שלו. האוסף מורכב מכמה מאות סמלים המתאימים לכל משימה ומטרה.מידע נוסף על קישור זה
מישל פינסון הוא חובב נסיעות ויוצר תוכן. מיזוג תשוקה לחינוך וחקירה, הוא מחויב לשתף ידע ולהעניק השראה לאחרים באמצעות שובה לב תוכן חינוכי. קירוב את העולם על ידי העצמת אנשים עם מומחיות גלובלית ותחושת נדנדה.
