Τρόπος χρήσης της γραμματοσειράς Awesome v5.7.2 με HTML

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

Ακολουθούν μερικά πράγματα που πρέπει να θυμάστε όταν προσθέτετε το Font Awesome στο επόμενο έργο σας.

Προσθέστε το σύνδεσμο στο κεφάλι

Φανταστείτε ότι έχετε το ακόλουθο HTML:

Όπως και άλλα CDN, πρέπει να προσθέσετε ένα στοιχείο στο . Για το Font Awesome 5.7.2, θα μοιάζει με αυτό:

Διαδικτυακά έναντι τοπικών

Εάν εκτελείτε τον ακόλουθο κώδικα σε έναν επεξεργαστή που βασίζεται στον ιστό, όπως CodePen ή CodeSandbox, ο ακόλουθος κώδικας αποδίδει σωστά τα εικονίδια:

Αλλά αν προσπαθήσετε να ανοίξετε τη σελίδα τοπικά σε ένα πρόγραμμα περιήγησης, θα εξακολουθείτε να βλέπετε τα μαύρα ορθογώνια αντί για τα εικονίδια:

Ρίξτε μια άλλη ματιά το hrefστο στοιχείο παραπάνω. Το βλέπεις?

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

Για να λειτουργήσετε τα πράγματα στο διαδίκτυο και τοπικά, φροντίστε να προσθέσετε το σχήμα URL (HTTP ή καλύτερα HTTPS) στο href:

Τι συμβαίνει εδώ?

Όταν αφήνετε το σχήμα URL ( href="//use.fontawesome..."), τότε το πρόγραμμα περιήγησης χρησιμοποιεί το ίδιο σχήμα διεύθυνσης URL με το οποίο φορτώθηκε η σελίδα.

Έτσι, εάν εκτελείτε τη σελίδα τοπικά εκτελώντας το αρχείο HTML σε ένα πρόγραμμα περιήγησης, hrefυποτίθεται ότι το Font Awesome CSS είναι επίσης ένα αρχείο που αποθηκεύεται επίσης τοπικά ( file:).

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