Προηγουμένως, κατά τη δημιουργία ιστότοπων, έπρεπε να χρησιμοποιήσετε εικονίδια bitmap. Ήταν όμορφο, αλλά άβολο για διάφορους λόγους. Σήμερα, τα διανυσματικά εικονίδια έχουν αντικαταστήσει τα εικονίδια ράστερ. Πρόκειται για μια πρωτότυπη και κομψή λύση που θα διακοσμήσει και θα ανανεώσει τον ιστότοπό σας.
Οδηγίες
Βήμα 1
Υπάρχει μια καλή υπηρεσία ιστού για τη δημιουργία γραμματοσειρών από εικονίδια. Ονομάζεται Fontastic. Είναι εντελώς δωρεάν και χωρίς διαφημίσεις. Το πρώτο βήμα είναι να εγγραφείτε στον ιστότοπο της υπηρεσίας. Μεταβείτε στον ιστότοπο fontastic.me, εισαγάγετε τη διεύθυνση email σας στα πεδία εισαγωγής και δημιουργήστε έναν κωδικό πρόσβασης και, στη συνέχεια, κάντε κλικ στο μεγάλο κίτρινο κουμπί "Δημιουργία γραμματοσειράς εικονιδίου". Μερικές φορές συμβαίνει ότι δεν εμφανίζονται πληροφορίες που να επιβεβαιώνουν την επιτυχή εγγραφή. Μην ανησυχείτε για αυτό, προχωρήστε στο επόμενο βήμα.
Βήμα 2
Τώρα κάντε κλικ στο κουμπί "Σύνδεση" που βρίσκεται στην επάνω δεξιά γωνία. Στη σελίδα που ανοίγει, εισαγάγετε ξανά το e-mail και τον κωδικό πρόσβασής σας, πατήστε το κουμπί "Σύνδεση".
Αφού περιμένετε λίγα δευτερόλεπτα, θα ανοίξει το πλαίσιο για τη δημιουργία γραμματοσειρών από εικονίδια.
Βήμα 3
Εδώ είναι μια μεγάλη ποικιλία εικονιδίων. Κάνοντας κλικ στα εικονίδια που σας αρέσουν με το ποντίκι, επιλέξτε όσα εικονίδια χρειάζεστε. Στην κορυφή, μετά τη λέξη "PUBLISH", εμφανίζεται ο αριθμός των επιλεγμένων εικονιδίων.
Βήμα 4
Εάν δεν έχετε αρκετά εικονίδια από τον αριθμό που εμφανίζεται, μετακινηθείτε προς τα κάτω στο κάτω μέρος της σελίδας και βρείτε το κουμπί με την ένδειξη "Προσθήκη περισσότερων εικονιδίων". Κάντε κλικ σε αυτό.
Βήμα 5
Θα ανοίξει μια σελίδα με πρόσθετα πακέτα εικονιδίων. Ορισμένα από αυτά πληρώνονται (με την ένδειξη "Premium"), μερικά είναι δωρεάν. Για να ενεργοποιήσετε επιπλέον εικονίδια, πατήστε το κουμπί "ΕΝΕΡΓΟΠΟΙΗΣΗ" στα επιλεγμένα πακέτα. Τώρα θα εμφανιστούν στη γενική λίστα των διαθέσιμων εικονιδίων όταν ξεκινήσετε με τον πίνακα ελέγχου κάνοντας κλικ στο κουμπί "Αρχική σελίδα" στο επάνω μενού.
Βήμα 6
Εάν πρέπει να προσθέσετε τα δικά σας εικονίδια, τότε στην ίδια σελίδα επάνω δεξιά, κάντε κλικ στο κουμπί "ΕΙΣΑΓΩΓΗ ΕΙΚΟΝΩΝ". Τώρα μπορείτε να ανεβάσετε τα δικά σας εικονίδια. Λάβετε υπόψη ότι υποστηρίζεται μόνο η διανυσματική μορφή SVG.
Βήμα 7
Αφού επιλέξετε τον απαιτούμενο αριθμό εικονιδίων, πατήστε το κουμπί "ΕΞΑΤΟΜΙΚΕΥΣΗ". Εδώ θα δείτε όλα τα επιλεγμένα εικονίδια και μπορείτε να τους εκχωρήσετε αυθαίρετα ονόματα τάξεων, με τα οποία θα τα αναφέρετε σε στυλ CSS. Ή μπορείτε να αφήσετε τα προεπιλεγμένα ονόματα που έχει εκχωρήσει το σύστημα στα εικονίδια.
Βήμα 8
Πατήστε το κουμπί "PUBLISH". Εδώ μπορείτε να κατεβάσετε τη γραμματοσειρά εικονιδίου του φορέα που δημιουργήθηκε (κουμπί "ΛΗΨΗ"). Πραγματοποιήστε λήψη του αρχείου γραμματοσειρών που δημιουργήθηκε από την υπηρεσία στον υπολογιστή σας.
Βήμα 9
Το αρχείο λήψης περιέχει το αρχείο τύπου CSS, το αρχείο HTML με τα ονόματα των κλάσεων εικονιδίων και το φάκελο "γραμματοσειρές" με τις γραμματοσειρές. Αυτή η γραμματοσειρά εικονιδίων μπορεί να χρησιμοποιηθεί στον ιστότοπό σας.
Βήμα 10
Για να χρησιμοποιήσετε τη γραμματοσειρά εικονιδίου που δημιουργήθηκε, πρέπει να κάνετε τα εξής:
- αποσυσκευάστε τα περιεχόμενα του αρχείου και ανεβάστε στον ιστότοπό σας στον κατάλογο με στυλ.
- εισαγάγετε έναν σύνδεσμο σε ένα αρχείο CSS στην ενότητα HEAD όλων των σελίδων του ιστότοπου που θα λειτουργούν με αυτήν τη γραμματοσειρά εικονιδίου.
- στον κώδικα σελίδας, χρησιμοποιούμε το όνομα των τάξεων που δημιουργήθηκαν προηγουμένως για να χρησιμοποιήσουμε τη γραμματοσειρά εικονιδίων που δημιουργήθηκε πρόσφατα
