Γραμματοσειρές εικονιδίων είναι φοβερό για την περιοχή σας: Εδώ είναι γιατί

Διαφήμιση

Έχετε ακούσει εικόνες, και σχεδόν σίγουρα έχετε ακούσει τις γραμματοσειρές, αλλά τι είναι ένα Εικονίδιο γραμματοσειράς? Σήμερα θα σας δείξω ποιες εικονικές γραμματοσειρές είναι και πώς μπορείτε να τις χρησιμοποιήσετε για να ζωντανέψετε τον ιστότοπό σας. Ας αρχίσουμε.

Τι είναι οι γραμματοσειρές Icon;

Οι γραμματοσειρές εικονιδίων είναι ακριβώς οι ίδιες με τις "κανονικές" γραμματοσειρές - ορίζουν την εμφάνιση και την αίσθηση ενός κομματιού κειμένου. Η μεγάλη διαφορά εδώ είναι ότι οι γραμματοσειρές εικονιδίων δεν περιέχουν γράμματα και αριθμούς, αλλά σύμβολα και εικονίδια. Μπορεί να σας μπερδεύεται από αυτό, καθώς το καλό είναι μια γραμματοσειρά εάν δεν μπορείτε να γράψετε επιστολές στη μαμά σας!

Οι γραμματοσειρές με εικονίδια χρησιμοποιούνται κυρίως για να σχεδιάσουν ιστότοπους. Δεδομένου ότι βασίζονται σε διανύσματα, μπορούν να αλλάξουν το μέγεθος, να μετακινηθούν, να στυλιστούν και να τροποποιηθούν χρησιμοποιώντας CSS 5 μωρά βήματα για να μάθουν CSS και να γίνουν ένα Kick-Ass CSS Μάγος

Το CSS είναι οι μοναδικές πιο σημαντικές ιστοσελίδες αλλαγών που έχουν δει την τελευταία δεκαετία και άνοιξε το δρόμο για τον διαχωρισμό του στυλ και του περιεχομένου. Με τον σύγχρονο τρόπο, το XHTML ορίζει τη σημασιολογική δομή ... Διαβάστε περισσότερα . Αυτό παρέχει ένα τεράστιο πλεονέκτημα έναντι των παραδοσιακών μεθόδων σχεδιασμού όπως οι εικόνες. Η εμφάνιση και η αίσθηση ενός μεγάλου αριθμού εικονιδίων μπορεί να αλλάξει με μερικές μόνο γραμμές κώδικα. Δεν χρειάζεται να επεξεργαστείτε εικόνες, να ανοίξετε το Photoshop ή να ανεβάσετε τα νέα αρχεία - απλά γράφετε κώδικα.

Ξεκινώντας

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

Εδώ είναι το αρχικό HTML:

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

Η πιο σημαντική γραμμή είναι τα εξής:

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

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

Εδώ είναι η βασική χρήση. Βάλτε αυτό μέσα σας σώμα ετικέτες:

 Η πρώτη μου εικόνα

Ακολουθεί το εξής παράδειγμα:

Πόσο εύκολο ήταν αυτό; Ας σπάσουμε. Υπάρχουν δύο κατηγορίες που χρειάζονται για να λειτουργήσει το Font Awesome. Ο πρώτος ονομάζεται φά, το οποίο αντιπροσωπεύει το Font Awesome. Αυτό είναι απαραίτητο για οποιοδήποτε εικονίδιο, ανεξάρτητα από το ποια είναι η εικόνα που χρησιμοποιείτε. Η δεύτερη τάξη καθορίζει το συγκεκριμένο εικονίδιο που θέλετε να χρησιμοποιήσετε - αυτό θα μπορούσε να είναι τίποτα, αεροπλάνο, πρόσωπο ή πιστωτική κάρτα. Αυτό είναι επίσης με πρόθεμα φά, και καθώς πρόκειται για ένα εικονίδιο οδόντων, το όνομά του είναι fa-cog. Μπορείτε να δείτε μια λίστα όλων των εικονίδια με το Font Awesome στην ιστοσελίδα τους.

Δοκιμάστε να αλλάξετε το εικονίδιο από το γρανάζι σε οποιοδήποτε άλλο.

Πηγαίνοντας βαθύτερα

Μόλις γνωρίσετε τα βασικά, ήρθε η ώρα για κάποια προχωρημένα κόλπα.

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

Μια άλλη χρήσιμη τάξη για χρήση είναι η fa-spin. Αυτό θα σας κάνει να κάνετε εικονίδια περιστροφή, και όταν συνδυάζεται με τις προηγούμενες τάξεις μεγέθους, μπορείτε να παράγετε μερικά ωραία αποτελέσματα. Εδώ είναι ο κώδικας:

Εδώ είναι το αποτέλεσμα:

Είναι εύκολο να περιστρέψετε τα εικονίδια - χρησιμοποιήστε το περιστρέφονται τάξη:

Ο αριθμός στο τέλος ορίζει τους βαθμούς περιστροφής για το εικονίδιο, αλλά μην παρασυρθείτε. Είστε περιορισμένοι 90, 180, ή 270.

Ένα τελευταίο τέχνασμα που μπορείτε να κάνετε είναι να στοιβάζετε. ο fa-stack Class σας επιτρέπει να συνδυάσετε δύο ή περισσότερα εικονίδια μαζί. Εδώ είναι ο κώδικας:

Ακολουθεί το εξής παράδειγμα:

Μόλις αρχίσετε να συνδυάζετε όλες αυτές τις διάφορες κατηγορίες, οι δυνατότητες είναι πραγματικά ατελείωτες.

Προσαρμοσμένο CSS

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

Εδώ είναι το HTML για αυτό το εικονίδιο:

Εδώ είναι το CSS:

Τα @keyframes μετακινούνται από {margin-left: 0; } στο {margin-left: 400px; } } .bike {animation-name: μετακίνηση; διάρκεια κινούμενων εικόνων: 4 δευτερόλεπτα. }

Αυτό το CSS είναι αρκετά βασικό, αλλά έχει μεγάλο αντίκτυπο. Αυτό όμως δεν είναι ένα σεμινάριο CSS, οπότε ίσως να θέλετε να το κάνετε μάθετε CSS 10 Απλά παραδείγματα κώδικα CSS μπορείτε να μάθετε σε 10 λεπτάΘέλετε να μάθετε περισσότερα σχετικά με τη χρήση του CSS; Δοκιμάστε αυτά τα βασικά παραδείγματα κώδικα CSS για να ξεκινήσετε και στη συνέχεια να τα εφαρμόσετε στις δικές σας ιστοσελίδες. Διαβάστε περισσότερα αν θέλετε να μάθετε περισσότερα για την εσωτερική λειτουργία.

Μπορείτε να κάνετε κάποια ειδικά πράγματα εάν θέλετε πραγματικά να:

Αυτό στοιχειώνει λίγο, προκειμένου να μειωθεί το μέγεθος του αρχείου για τον ιστό. Εδώ είναι το HTML:

Εδώ είναι το CSS:

Τα @keyframes ξεθωριάζουν {από {opacity: 0; } στο {opacity: 1; } }. άτομο {αδιαφάνεια: 0; όνομα κινούμενων εικόνων: ξεθωριάσει. } # p1 {χρώμα: κόκκινο; Διάρκεια κίνησης: 2 δευτερόλεπτα. } # p2 {χρώμα: πορτοκαλί; διάρκεια κινούμενων εικόνων: 4 δευτερόλεπτα. } # p3 {χρώμα: πράσινο; διάρκεια ζωής: 6 δευτερόλεπτα. } # p4 {διάρκεια-animation-duration: 8s; }

Όπως και στο προηγούμενο παράδειγμα, αυτό χρησιμοποιεί κινούμενα γραφικά CSS3. Μια κίνηση που ονομάζεται ξεθωριάζει δημιουργείται και το εικονίδιο κάθε ατόμου εφαρμόζει αυτό το κινούμενο σχέδιο με διαφορετικό χρονισμό. Υπάρχει μεγάλη πιθανότητα να πάμε άγρια ​​με αυτά τα εικονίδια και το CSS3.

Αυτά για σήμερα. Θα πρέπει τώρα να μπορείτε να χρησιμοποιήσετε τις γραμματοσειρές Icon για να ζωντανέψετε τον ιστοχώρο σας! Αν δεν είστε τόσο σίγουροι για τις ικανότητές σας ακόμα, ελέγξτε τις Τοποθεσίες προτύπων CSS 11 τοποθεσίες προτύπων CSS: Μην ξεκινάτε από το μηδέν!Υπάρχουν χιλιάδες ελεύθερα πρότυπα CSS διαθέσιμα στο διαδίκτυο, τα οποία ενσωματώνουν όλες τις σύγχρονες τάσεις και τεχνολογίες σχεδίασης. Μπορείτε να τα χρησιμοποιήσετε στην αρχική τους μορφή ή να τα προσαρμόσετε για να τα καταστήσετε δικά σας. Διαβάστε περισσότερα , ή αυτά Τα κανάλια YouTube για να ξεκινήσετε Θέλετε να μάθετε Web Design; 7 κανάλια YouTube για να ξεκινήσετεΤο YouTube έχει χιλιάδες βίντεο και κανάλια για αρχάριους σχεδιασμού ιστοσελίδων. Εδώ εξετάζουμε μερικά από τα καλύτερα για να ξεκινήσετε. Διαβάστε περισσότερα με σχεδιασμό ιστοσελίδων.

Μάθατε κάτι καινούργιο σήμερα; Ποια είναι η αγαπημένη σας γραμματοσειρά Icon; Ενημερώστε μας στα σχόλια παρακάτω!