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 σχετικοί πόροι
- Μέγεθος εικονιδίων
- Εικονίδιο
- Συχνές Ερωτήσεις
Η γραμματοσειρά Awesome είναι μια συλλογή από κλιμακωτά εικονίδια διανυσμάτων. Τα εικονίδια μπορούν να μορφοποιηθούν χρησιμοποιώντας τις ιδιότητες CSS, να ρυθμίσουν το χρώμα, το μέγεθος, τη σκιά και πολλά άλλα. Η έκδοση γραμματοσειράς 5.5.0 περιλαμβάνει 605 εικονίδια.
1 Πώς να εγκαταστήσετε τη γραμματοσειρά φοβερό
Μέθοδος 1.
Χρησιμοποιήστε την έκδοση γραμματοσειρά-awesome.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-οικογένεια: fontawesome; color: #aaaaa, περιθώριο-δεξιά: 10px;}1 τυποποιημένα εικονίδια
Το Font Awesome έχει σχεδιαστεί για να χρησιμοποιείται με στοιχεία inline. Για να προσθέσετε εικονίδια, πρέπει πρώτα να ρυθμίσετε την κλάση 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 για να αντικαταστήσετε τις προεπιλεγμένες σφαίρες σε ένα<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, Porta Sapien. Στο SED Elit Lectus. Sed Lacus Elit, Semper Vitae Felis Id, Sodales Congue Sapien.</p>6 κινούμενα εικονίδια
Προσθέστε τα μαθήματα FA-Spin, FA-Pulse, FA-Refresh, FA-COG για να ρυθμίσετε εικονίδια περιστροφής. Το Animation δεν υποστηρίζεται στο 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 -anchor - \ f13d;
FA -Archive - \ F187;
FA -Arrows - \ F047;
FA -ASISTISK - \ F069;
Faat - \ f1fa;
Κλίμακα FA-Balance-\ F24E;
Fa -ban - \ f05e;
FA -BANK - \ F19C;
FA -BARCODE - \ F02A;
FA-Battery-Empty-\ F244;
FA-Battery-Half-\ F242;
FA-Battery-Quarter-\ F243;
FA-Battery-Three-Quarters-\ F241;
FA-Battery-Full-\ F240;
FA -BED - \ F236;
Fa -beer - \ f0fc;
FA -Bell - \ F0F3;
Fa-bell-slash-\ f1f6;
FA -Banoculars - \ F1E5;
FA-Birthday-Cake-\ F1FD;
FA -BOLT - \ F0E7;
FA -βόμβα - \ F1E2;
FA -βιβλίο - \ f02d;
Για να περιστρέψετε ή να αναστρέψετε τα εικονίδια, χρησιμοποιήστε τις κλάσεις FA-ROTATE-* και FA-FLIP-*.
4 σχετικοί πόροι
Εκτός από τη συλλογή Font Awesome, μπορείτε να χρησιμοποιήσετε και άλλες γραμματοσειρές εικονιδίων.
Fontello.Fontello έχει μια μεγάλη συλλογή από διάφορες γραμματοσειρές εικονιδίων. Μπορείτε να επιλέξετε τα εικονίδια που σας αρέσουν και να τα κατεβάσετε στον υπολογιστή σας.
Εικονίδιο θεμελίωσης.Εικονίδιο Ιδρύματος είναι μια άλλη συλλογή γραμματοσειρών εικονιδίων από τους προγραμματιστές του πλαισίου του Ιδρύματος. Εκτός από τα τυποποιημένα εικονίδια, ο ιστότοπος διαθέτει εικονίδια στρογγυλά, εικονίδια κοινωνικών μέσων και πολλά άλλα.
εικονίδια υλικού.Τα εικονίδια υλικών είναι τα ενοποιημένα επίπεδα εικονίδια της Google που ενσωματώνουν την ευκολία αντίληψης. Τα εικονίδια βελτιστοποιούνται για όμορφη εμφάνιση σε όλες τις κοινές πλατφόρμες και για όλες τις αναλύσεις οθόνης.
Η συλλογή γραμματοσειρών εικονιδίων περιέχει 750+ εικονίδια. Ο ευκολότερος τρόπος για να εγκαταστήσετε μια συλλογή στον ιστότοπό σας είναι να χρησιμοποιήσετε εικονίδια όπως οι γραμματοσειρές του Google Web. Για να γίνει αυτό, ο παρακάτω κωδικός περιλαμβάνεται στη σήμανση σελίδας:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Για να εμφανίσετε σωστά τη γραμματοσειρά στα προγράμματα περιήγησης, το στοιχείο που θα χρησιμοποιήσει τη γραμματοσειρά εικονιδίων δίνεται στην κλάση Material-Icons:
.material-εικονίδια { font-family: 'Material Icons'; Γραμματοσειρά: Κανονική γραμματοσειρά: Κανονική γραμματοσειρά: 24px; / * Προτιμώμενο μέγεθος εικονιδίου */ οθόνη: inline-block; Πλάτος: 1em; Ύψος: 1em; Γραμμή ύψους: 1; Κείμενο-μετασχηματισμό: Κανένα. Επιστολή: Κανονική λέξη-wrap: Κανονική; Λευκό διάστημα: Nowrap; κατεύθυνση: LTR; -webkit-font-smoothing: αντιαναριωμένο. / * Υποστηριζόμενη από όλα τα προγράμματα περιήγησης webkit */ απόδοση κειμένου: Optimizelegibility; / * Safari και Chrome Support */ -moz-osx-font-smoothing: Grayscale; /* Υποστήριξη Firefox. */-seting-settings: 'liga'; /* IE υποστήριξη. */}Τα ίδια τα εικονίδια προστίθενται χρησιμοποιώντας το<I class=''material-εικονίδια''>σύνδεσμος ή κώδικας HTML του εικονιδίου</i> ετικέτα, για παράδειγμα:
<i class="material-εικονίδια">account_balance_wallet</i><i class="material-εικονίδια"></i>Η σύνδεση γίνεται κατανοητή από όλα τα σύγχρονα προγράμματα περιήγησης, δηλαδή - ξεκινώντας από την έκδοση 10. Ο κωδικός εικονιδίων παράγεται αυτόματα, γιατί αυτό πρέπει να κάνετε αριστερό κλικ στην εικόνα εικονιδίων και να αντιγράψετε την προτεινόμενη εμφάνιση.
Μέγεθος εικονιδίων
Μέγεθος εικονιδίων is controlled by additional classes:
.Material-ICONS.MD-18 {FONT-SIZE: 18px;} /* για<i class="material-εικονίδια md-18"></i> */.Material-ICONS.MD-24 {FONT-SIZE: 24PX;} /* για<i class="material-εικονίδια md-24"></i> */.Material-ICONS.MD-36 {FONT-SIZE: 36PX;} /* για<i class="material-εικονίδια md-36"></i> */.Material-ICONS.MD-48 {FONT-SIZE: 48px;} /* για<i class="material-εικονίδια md-48"></i> */Εικονίδιο
Το χρώμα των εικονιδίων έχει επίσης ρυθμιστεί χρησιμοποιώντας πρόσθετες κατηγορίες:
.Material-ICONS.MD-DARK {COLOR: RGBA (0, 0, 0, 0.54);} /*<i class="material-εικονίδια md-dark"></i> */.Material-Icons.Md-Light {Color: RGBA (255, 255, 255, 1);} /*<i class="material-εικονίδια md-light"></i> */.Material-ICONS.MD-DARK.MD-INACTION {COLOR: RGBA (0, 0, 0, 0.26);} /*<i class="material-εικονίδια md-dark md-inactive"></i> * /.Material-Icons.Md-Light.md-Inactive {Color: RGBA (255, 255, 255, 0,3);} /*<i class="material-εικονίδια md-light md-inactive">πρόσωπο</i> */Για να ορίσετε ένα προσαρμοσμένο χρώμα, πρέπει να προσθέσετε μια κλάση που ορίζει το χρώμα του εικονιδίου, για παράδειγμα:
.material-εικονίδια.indigo {color: #1A237E;} /*<i class="material-εικονίδια indigo"></i> */Συχνές Ερωτήσεις
- Τι είναι η Font Awesome με απλούς όρους;
- Στην ουσία, είναι μια γραμματοσειρά με εικονίδια που μπορούν να προστεθούν σε οποιοδήποτε στοιχείο ιστοσελίδας για να βελτιώσουν την ορατότητα και το σχεδιασμό του. Η συλλογή αποτελείται από αρκετές εκατοντάδες εικονίδια κατάλληλα για οποιαδήποτε εργασία και σκοπό.Περισσότερες πληροφορίες σχετικά με αυτόν τον σύνδεσμο
Ο Michel Pinson είναι ένας λάτρης ταξιδιού και δημιουργός περιεχομένου. Συγχώνευση του πάθους για την εκπαίδευση και την εξερεύνηση, είναι δεσμευμένη για να μοιραστεί τη γνώση και να εμπνεύσει τους άλλους μέσω του μαγευτικού εκπαιδευτικού περιεχομένου. Φέρνοντας τον κόσμο πιο κοντά, ενδυναμώντας άτομα με παγκόσμια τεχνογνωσία και αίσθηση περιπλανώμενου.
