FONT AWESOME: Ο πλήρης οδηγός βιβλιοθήκης

Δωρεάν εικονίδια Γραμματοσειρά Awesome: Τι είναι και τι χρησιμοποιείται για. Πώς να συνδέσετε τα εικονίδια στον ιστότοπο. Πλεονεκτήματα και μειονεκτήματα της βιβλιοθήκης.

FONT AWESOME SET: Ο τελευταίος οδηγός

Το Font Awesome είναι ένα σύνολο γραμματοσειρών και εικόνων που βασίζονται σε CSS και λιγότερο. Το εργαλείο σας επιτρέπει να συνδέσετε γρήγορα όλα τα είδη των εικονιδίων στον ιστότοπο, βελτιώνοντας σημαντικά το σχεδιασμό και τη χρηστικότητα του. Αρκεί να εισαγάγετε μερικές γραμμές κώδικα.

Η γραμματοσειρά Awesome σας δίνει κλιμακούμενα εικονίδια διανυσμάτων που μπορείτε εύκολα να εξατομικεύσετε - μέγεθος, χρώμα, σκιές και οτιδήποτε άλλο μπορεί να γίνει με το CSS.

Η Font Awesome Library έχει μια τεράστια συλλογή από τις καλύτερες προτάσεις για εσάς. Βελτιώνετε το έργο σας με μοναδικά εικονίδια. Στην πραγματικότητα, αυτό είναι ένα τεράστιο σύνολο όλων των ειδών εικονιδίων που μπορείτε να χρησιμοποιήσετε για τους δικούς σας σκοπούς.

Στο Fontawesome, όλα τα εικονίδια είναι απολύτως και εντελώς δωρεάν. Η βιβλιοθήκη έχει άδεια χρήσης βάσει της γενικής άδειας κοινής χρήσης GNU. Αυτό σημαίνει ότι μπορεί να χρησιμοποιηθεί ελεύθερα σε εμπορικά έργα και, κατ 'αρχήν, παντού.

Το σετ δημιουργήθηκε από τον Dave Gandhi. Περιλαμβάνει δωρεάν εικονίδια κοινωνικών μέσων, εικονίδια για τη βελτίωση της διεπαφής χρήστη και πολλά άλλα.

Συνήθως, η γραμματοσειρά Awesome Scripts χρησιμοποιούνται σε συνδυασμό με bootstrap και bootstrapcdn. Η γραμματοσειρά Awesome είναι η δεύτερη μόνο στις γραμματοσειρές της Google στη δημοτικότητα.

Πως δουλεύει

Το κύριο χαρακτηριστικό είναι ότι όλες οι φανταστικές εικόνες δεν είναι στατικές εικόνες. Βρίσκονται σε μορφή γραμματοσειράς. Με άλλα λόγια, αυτά είναι γραμματοσειρές εικονιδίων. Για παράδειγμα, ένα εικονίδιο αναζήτησης ή ένα λογότυπο κοινωνικού δικτύου είναι το ίδιο με τους απλούς χαρακτήρες A, B, C.

Γραμματοσειρά Awesome εικονίδια δημιουργούνται χρησιμοποιώντας κλιμακούμενα φορείς. Επομένως, μπορούν να αυξηθούν σε σχεδόν οποιοδήποτε μέγεθος.

Όλα τα διαθέσιμα εικονίδια περιλαμβάνονται σε ένα αρχείο γραμματοσειράς. Το μόνο που χρειάζεστε είναι να κάνετε λήψη αυτού του αρχείου από την επίσημη ιστοσελίδα και να το συνδέσετε σε στυλ.

Γιατί οι σχεδιαστές επιλέγουν font awesome

Font Awesome έχει πολλά πλεονεκτήματα:

• Γρήγορη σύνδεση. Απλά πρέπει να κατεβάσετε ένα ειδικό αρχείο από την επίσημη ιστοσελίδα και να το συνδέσετε καθορίζοντας τη διαδρομή σε αυτήν στον κώδικα CSS.
• Ευελιξία και επεκτασιμότητα. Τα εικονίδια μπορούν να διευρυνθούν σε οποιοδήποτε μέγεθος. Τα σύμβολα θα είναι τόσο σαφή όσο η συσκευή επιτρέπει. Στην ηλικία του ανταποκρινόμενου σχεδιασμού, αυτό είναι σημαντικό. Με τον τρόπο, για τον ίδιο λόγο, οι φανταστικές εικόνες είναι κατάλληλες για οθόνες αμφιβληστροειδούς.
• Λογοτεχνική συμμόρφωση. Τα εικονίδια μπορούν εύκολα να αλλάξουν σε χρώμα, μέγεθος, σκιά ή οποιεσδήποτε άλλες εξωτερικές παραμέτρους. Ο σχεδιαστής παίρνει όλα τα οφέλη του styling τακτικό κείμενο. Μπορείτε επίσης να περιστρέψετε τα εικονίδια. Για παράδειγμα, η εμφάνιση ανάποδα ή περιστρέψτε 90 μοίρες.
• Γρήγορη φόρτιση του ιστότοπου. Όλα τα εικονίδια περιλαμβάνονται σε ένα αρχείο γραμματοσειράς. Έτσι χρειάζεται μόνο ένα αίτημα HTTP για τη φόρτωση γραμματοσειράς φοβερό. Αυτό είναι ιδανικό για την απόδοση του ιστότοπου.
• Αγάπη των προγραμμάτων περιήγησης. Το FONT AWESOME είναι ένα εργαλείο διασταυρούμενου προγράμματος περιήγησης. Δεν χρειάζεται να ανησυχείτε για τη συμβατότητα του προγράμματος περιήγησης των γραμματοσειρών και των εικονιδίων. Υποστηρίζονται καλά από όλους τους. Ακόμη και παλιά IE8.
• Συμβατό με διαφορετικά πλαίσια. Η βιβλιοθήκη δημιουργήθηκε κυρίως για το bootstrap. Ωστόσο, θα λειτουργήσει καλά με άλλα πλαίσια.
• Διάφορες μορφές. Το εργαλείο είναι διαθέσιμο σε μορφές .ETT, .TF, .WOFF και SVG. Έτσι, το Font Awesome χειρίζεται με τον ίδιο τρόπο όπως και άλλες γραμματοσειρές Web.
• Δεν απαιτείται Javascript. Η γραμματοσειρά Awesome δεν απαιτεί Javascript να τρέξει.

Έτσι, το Font Awesome είναι ένα αποτελεσματικό και βολικό εργαλείο που εξοικονομεί σημαντικά χρόνο διάταξης και επιταχύνει τον ιστότοπό σας.

Μειονεκτήματα της γραμματοσειράς φοβερό

Το εργαλείο έχει επίσης μειονεκτήματα. Ευτυχώς, δεν υπάρχουν πολλοί από αυτούς.

Πρώτον, τα εικονίδια μπορούν να βαφτούν μόνο σε ένα χρώμα. Ωστόσο, αυτός ο περιορισμός μπορεί να καταστρατηγηθεί. Για παράδειγμα, συνδυάζοντας δωρεάν εικονίδια μεταξύ τους. Ή χρησιμοποιώντας τα εφέ CSS

Δεύτερον, η γραμματοσειρά Awesome βιβλιοθήκη περιέχει πάρα πολλά εικονίδια και όλα περιλαμβάνονται σε ένα αρχείο. Εάν ένας σχεδιαστής σχεδιαστής ή διάταξης χρειάζεται μόνο να συνδέσει μερικά εικονίδια, πρέπει ακόμα να φορτώσουν ολόκληρη τη βιβλιοθήκη εντελώς. Και αυτά είναι εκατοντάδες χιλιάδες επιπλέον εικόνες που θα πάρουν χώρο. Ωστόσο, υπάρχει μια λύση εδώ - δημιουργώντας τη δική σας συνέλευση, η οποία θα περιλαμβάνει μόνο τα απαραίτητα εικονίδια.

Γραμματοσειρές εκπληκτικές εκδόσεις: 5 και 6

Η γραμματοσειρά Awesome 5 κυκλοφόρησε στις 7 Δεκεμβρίου 2017 και αρχικά περιείχε 1278 εικονίδια. Η πέμπτη έκδοση έρχεται σε δύο πακέτα: δωρεάν (γραμματοσειρά Awesome δωρεάν) και πληρωμένο (γραμματοσειρά Awesome Pro). Το ελεύθερο σχέδιο περιέχει επίσης εικονίδια από όλες τις τέταρτες εκδόσεις. Τα εικονίδια είναι διαθέσιμα στο πλαίσιο της άδειας ανοικτής γραμματοσειράς SIL 1.1, Creative Commons Attribution 4.0 και MIT.

Η γραμματοσειρά Awesome 6 είναι μια νέα έκδοση που κυκλοφόρησε κατά το δεύτερο εξάμηνο του 2020. Περιλαμβάνει νέα εικονίδια και διατίθεται μόνο σε ένα αμειβόμενο σχέδιο.

Γραμματοσειρά Awesome 6 Alpha είναι επίσης στο δρόμο το 2021. Αυτή είναι μια άλλη νέα γενιά βιβλιοθήκης εικονιδίων. Εκτός από τα νέα εικονίδια, η έκδοση 6 Alpha προσθέτει επίσης νέα στυλ, νέες υπηρεσίες και βοηθητικά εργαλεία. Οι χρήστες μπορούν να προ-παραγγείλετε.

Δωρεάν και πληρωμένα σχέδια: Διαφορές και χαρακτηριστικά

Μπορείτε να κατεβάσετε εικονίδια για δωρεάν ή πληρωμένο τιμολόγιο.

Το ελεύθερο σχέδιο περιλαμβάνει πάνω από 1600 εικονίδια και 1 σετ. Ένα κιτ είναι μια συλλογή εικόνων, στυλ και ρυθμίσεων που σας επιτρέπει να κάνετε γρήγορα αλλαγές χωρίς προσθήκη κώδικα.

Αμειβόμενος τιμολόγιο:

• Περιλαμβάνει πάνω από 7800 εικονίδια και 20 σετ.
• Παρέχει πρόσβαση στη γραμματοσειρά Awesome Pro. Αυτό σημαίνει ότι τα εικονίδια μπορούν να χρησιμοποιηθούν σε εγγενείς εφαρμογές κινητής τηλεφωνίας και στον υπολογιστή σας (για παράδειγμα, σε ένα επεξεργαστή κειμένου λέξης ή κατά τη δημιουργία μιας παρουσίασης στο PowerPoint).
• Σας επιτρέπει να ανεβάσετε τα δικά σας εικονίδια. Μπορείτε να χρησιμοποιήσετε τα δικά σας εικονίδια δίπλα ή στη θέση των επίσημων φανταστικών εικόνων γραμματοσειράς. Για παράδειγμα, έτσι μπορείτε να ανεβάσετε ένα λογότυπο της εταιρείας. Μπορείτε να εκτελέσετε τις ίδιες ενέργειες με τα δικά σας εικονίδια όπως με τα βασικά - αλλάξτε το στυλ, το μέγεθος, το χρώμα, κλπ.

Και οι δύο εκδόσεις είναι διαρκή. Δηλαδή, παρέχονται μία φορά και για όλους.

Τρόπους σύνδεσης γραμματοσειράς φοβερό

Πρώτα απ 'όλα, πρέπει να πάτε στην επίσημη ιστοσελίδα και να κατεβάσετε τη βιβλιοθήκη. Το αρχείο που κατεβάσατε πρέπει να αποσυσκευαστεί και τα φακέλους CSS και Fonts να αντιγραφούν στον φάκελο του ιστότοπού σας.

Μετά από αυτό, η διαδρομή προς το αρχείο βιβλιοθήκης καθορίζεται μεταξύ των ετικετών κεφαλής. Για παράδειγμα:

Πώς να εμφανίσετε γραμματοσειρά Awesome εικονίδια σε έναν ιστότοπο. Οι πιο δημοφιλείς μέθοδοι:

1.sing html

Τον ευκολότερο τρόπο.

Πρέπει να πάτε στη συλλογή στην επίσημη ιστοσελίδα (Fontawesome.com/icons?d=gallery) και να επιλέξετε το εικονίδιο που σας αρέσει. Κάθε εικονίδιο έχει έναν προσωπικό κώδικα, για παράδειγμα :. Αρκεί να αντιγράψετε και να το επικολλήσετε στη σωστή θέση του κώδικα.

2. Μέσω του CSS

Για να το κάνετε αυτό, χρησιμοποιήστε τα ψευδο-στοιχεία μετά ή πριν, καθώς και το Unicode του απαιτούμενου εικονιδίου. Μπορείτε να τα πάρετε όλα στην ίδια γκαλερί. Ένα παράδειγμα αυτού του κώδικα: F209.

Ένα παράδειγμα καταχώρησης αρχείου στυλ:

DIV :: Μετά την {εμφάνιση: μπλοκ; Περιεχόμενο: 'F209'. Οικογένεια γραμματοσειράς: «γραμματοσειρά φοβερό 5 ελεύθερο»;}

Συμπερασματικά: Όλες οι γραμματοσειρές εκπληκτικές εικόνες

Έτσι, το Font Awesome είναι ένας γρήγορος και βολικός τρόπος για να προσθέσετε δωρεάν εικονίδια στον ιστότοπό σας. Όλα τα εικονίδια είναι εύκολα κλιμακωτά και δεν επιβραδύνουν τον ιστότοπο.