Font Awesome είναι ένα απίστευτα χρήσιμο εργαλείο κατά την ανάπτυξη μιας ιστοσελίδας. Είναι μια τεράστια βιβλιοθήκη με κλιμακούμενα διανυσματικά εικονίδια που επιτρέπει στους προγραμματιστές να εξατομικεύουν και να βελτιώνουν την αισθητική οποιασδήποτε ιστοσελίδας. Η προσθήκη του σε ένα έργο JavaScript όχι μόνο σάς δίνει τη δυνατότητα να κάνετε τον ιστότοπό σας πιο ελκυστικό οπτικά, αλλά επιτρέπει επίσης αυξημένη διαδραστική λειτουργικότητα. Αυτό το άρθρο θα σας καθοδηγήσει στη διαδικασία ενσωμάτωσης του Font Awesome στο έργο σας JavaScript.
Λύση για την ενσωμάτωση της γραμματοσειράς Awesome
Προκειμένου να ενσωματωθούν Font Awesome στον ιστότοπό σας, θα χρειαστεί να λάβετε τον σύνδεσμο CDN (Δίκτυο παράδοσης περιεχομένου) και να τον προσθέσετε στο αρχείο HTML. Ο σύνδεσμος CDN για το Font Awesome μπορεί να ληφθεί από τον επίσημο ιστότοπο του. Μόλις έχετε αυτόν τον σύνδεσμο, ενσωματώστε τον στην ενότητα κεφαλής του αρχείου HTML σας.
Κάθε τόσο, νέα εικονίδια προστίθενται στη βιβλιοθήκη Font Awesome. Για να διασφαλίσετε ότι έχετε πρόσβαση στα πιο πρόσφατα εικονίδια, είναι απαραίτητο να συνεχίσετε να ενημερώνετε τον σύνδεσμο CDN.
Ακολουθεί ένα παράδειγμα για τον τρόπο προσθήκης του συνδέσμου Font Awesome CDN:
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
Επεξήγηση του Ξεκινώντας με το Font Awesome
Αφού προσθέσετε το σύνδεσμο CDN στο αρχείο HTML, ήρθε η ώρα να εισαγάγετε τα εικονίδια Font Awesome. Τα εικονίδια εισάγονται ως
Υποθέτοντας ότι θέλετε να προσθέσετε ένα περιστρεφόμενο εικονίδιο φόρτωσης. Το όνομα της κλάσης για αυτό είναι "fa-spin fa-spinner". Έτσι, ο κώδικάς σας θα μοιάζει κάπως έτσι:
<i class="fas fa-spin fa-spinner"></i>
Λάβετε υπόψη ότι η κλάση "fas" είναι κοινή για όλα τα συμπαγή εικονίδια. Η κλάση "fa-spin" χρησιμοποιείται για να κάνει το εικονίδιο να περιστρέφεται και το "fa-spinner" είναι το όνομα της κλάσης για το πραγματικό εικονίδιο που θα εμφανιστεί - σε αυτήν την περίπτωση, το εικονίδιο φόρτωσης.
Επιπλέον, τα χρώματα, τα μεγέθη και οι ευθυγραμμίσεις των εικονιδίων μπορούν εύκολα να τροποποιηθούν χρησιμοποιώντας CSS. Μπορείτε να τροποποιήσετε το μέγεθος του εικονιδίου προσθέτοντας "fa-xs", "fa-sm", "fa-lg", "fa-2x", "fa-3x" ή "fa-4x" στο χαρακτηριστικό class .
