Πώς να προσθέσετε εικονίδια γραμματοσειράς Awesome στα κουμπιά σας

Το Font Awesome είναι μια βολική βιβλιοθήκη εικονιδίων. Αυτά τα εικονίδια μπορούν να είναι διανυσματικά γραφικά αποθηκευμένα σε .svgμορφή αρχείου ή γραμματοσειρές ιστού.

Αυτά τα εικονίδια αντιμετωπίζονται όπως γραμματοσειρές. Μπορείτε να καθορίσετε το μέγεθός τους χρησιμοποιώντας εικονοστοιχεία και θα υποθέσουν το μέγεθος γραμματοσειράς των γονικών τους στοιχείων HTML.

Βασική χρήση

Για να συμπεριλάβετε το Font Awesome στην εφαρμογή ή τη σελίδα σας, απλώς προσθέστε τον ακόλουθο κώδικα στο στοιχείο στην κορυφή του HTML σας:

Το iστοιχείο χρησιμοποιήθηκε αρχικά για να κάνει άλλα στοιχεία πλάγια, αλλά χρησιμοποιείται συνήθως για εικονίδια. Μπορείτε να προσθέσετε τα μαθήματα Font Awesome στο iστοιχείο για να το μετατρέψετε σε εικονίδιο, για παράδειγμα:

Σημειώστε ότι το spanστοιχείο είναι επίσης αποδεκτό για χρήση με εικονίδια.

Δείτε πώς προσθέτετε ένα εικονίδιο:

Αυτό θα δημιουργήσει ένα απλό εικονίδιο αντίχειρας επάνω:

Και πώς θα εισαγάγατε αυτό το εικονίδιο σε ένα κουμπί:

 Like 

Σημειώστε ότι υπάρχουν δύο μέρη για τη χρήση ενός εικονιδίου, το πρόθεμα στυλ και το όνομα εικονιδίου . Στο παραπάνω παράδειγμα, το πρόθεμα στυλ και το όνομα εικονιδίου είναι fasκαι fa-thumbs-up, αντίστοιχα.

Το Font Awesome προσφέρει τα ακόλουθα προθέματα στυλ:

Στυλ Πρόθεμα στυλ Τύπος σχεδίου
Στερεός fas Ελεύθερος
Τακτικός far Υπέρ
Φως fal Υπέρ
Duotone fad Υπέρ
Μάρκες fab Ελεύθερος

Τα εικονίδια επωνυμίας υποβάλλονται συχνά από την ίδια την εταιρεία και είναι χρήσιμα για την κατασκευή πραγμάτων, όπως κουμπιά για κοινωνικό έλεγχο ταυτότητας ή πληρωμής. Αυτά τα εικονίδια περιλαμβάνουν Twitter, Facebook, Spotify, Apple και ακόμη και δωρεάνCodeCamp:

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

Styling εικονίδια γραμματοσειράς Awesome

Για απλές εφαρμογές, μπορείτε να χρησιμοποιήσετε ενσωματωμένα στυλ:

Για το μέγεθος, θα μπορούσατε επίσης να χρησιμοποιήσετε τις ενσωματωμένες λέξεις-κλειδιά του Font Awesome:

Ένα σημαντικό πράγμα που πρέπει να θυμάστε είναι ότι τα εικονίδια FA κληρονομούν font-sizeτο γονικό κοντέινερ. Αυτό σημαίνει ότι τα εικονίδια κλιμακώνονται με οποιοδήποτε κείμενο μπορεί να χρησιμοποιηθεί μαζί τους, γεγονός που διατηρεί τη σχεδίαση συνεπή.

Για παράδειγμα, ας υποθέσουμε ότι θέλετε να δημιουργήσετε πολλά κουμπιά. Το προεπιλεγμένο μέγεθος για τα κουμπιά είναι αρκετά μικρό, οπότε γράφετε κάποιο CSS για να αυξήσετε το μέγεθος των κουμπιών, μαζί με το κείμενο και τα εικονίδια μέσα σε αυτά:

 Like    Dislike    Share 
button { font-size: 1.5em; margin: 5px; }

Μπορείτε επίσης να προσαρμόσετε το μέγεθος ενός εικονιδίου απευθείας στοχεύοντας το ίδιο το εικονίδιο και προσαρμόζοντας το font-size.

Η γραμματοσειρά Awesome είναι, λοιπόν, φοβερό! Ως τα πιο δημοφιλή εργαλεία εργαλείων εικονιδίων, είναι εύκολο να συμπεριληφθούν και να χρησιμοποιηθούν σε όλα τα έργα σας. Τώρα πηγαίνετε στο εικονίδιο πάνω σε όλα τα πράγματα.

Περισσότερες πληροφορίες

  • Έγγραφα γραμματοσειράς Awesome
  • Όλα τα διαθέσιμα εικονίδια Font Awesome