Πώς να εγκαταστήσετε και να χρησιμοποιήσετε το Font Awesome
Σελίδα 1 από 1 • Μοιραστείτε
Πώς να εγκαταστήσετε και να χρησιμοποιήσετε το Font Awesome
Πώς να εγκαταστήσετε και να χρησιμοποιήσετε το Font Awesome |
Τί είναι το Font AwesomeTo Font Awesome αποτελεί μία εικονική διαδικτυακή γραμματοσειρά που σας επιτρέπει να εμφανίζετε εικονίδιο με τη χρήση CSS Classnames, η απλώς κάνοντας αντιγραφή και επικόλληση το εικονίδιο. Τα εικονίδια έχουν μία ευρεία χρήση, όπως για παράδειγμα εικονίδια loading. Χρησιμοποιεταί από ένα μεγάλο ποσοστό ιστοσελίδων, όπως η ForumGreek, επομένως γιατί δεν το χρησιμοποιείτε και εσείς; Εγκατάσταση του Font AwesomeΑνάλογα με το βαθμό που έχετε, υπάρχουν δύο μέθοδοι για να εγκαταστήσετε το Font Awesome στο φόρουμ σας. Παρακαλούμε επιλέξτε τη μέθοδο η οποία ταιριάζει στην περίπτωσή σας. [1η Μέθοδος]Εγκατάσταση με τα templatesΑν είστε ο δημιουργός ή αν έχετε πρόσβαση στον λογαριασμό του δημιουργού, μπορείτε να τροποποιήσετε τα πρότυπα για να εγκαταστήσετε το Font Awesome. Αλλιώς, αν είστε ένας απλός Διαχειριστής και δεν έχετε πρόσβαση στον λογαριασμό του δημιουργού, παρακαλώ να δείτε την 2η Μέθοδο. Για να το εγκαταστήσετε μέσω των προτύπων πρέπει να πάτε στον Πίνακας Διαχείρισης > Εμφάνιση > Πρότυπα > Γενικά και να ανοίξετε το πρότυπο με τον τίτλο overall_header Πριν ξεκινήσετε την επεξεργασία των προτύπων, κάντε κλικ εδώ και αντιγράψτε τον κώδικα που δίνεται κάτω από την ευκολότερη μέθοδο από MaxCDN. Αυτός ο κώδικας θα εισάγει το Font Awesome στο φόρουμ σας. Βρείτε το {T_HEAD_STYLESHEET} στο overall_header πρότυπο, και ακριβώς πριν από αυτό, επικολλήστε τον κώδικα που δίνεται από MaxCDN για να υπάρχει κάτι παρόμοιο με το παρακάτω:
[2η Μέθοδος]Εγκατάσταση μέσω JavascriptΑυτή η μέθοδος είναι πιο απλή και σας επιτρέπει να εγκαταστήσετε το Font Awesome προσαρτώντας το stylesheet στο <head> στοιχείο χωρίς να έχετε πρόσβαση στα πρότυπα. Για να το εγκαταστήσετε, πηγαίντε στο Πίνακας Διαχείρισης > Λειτουργικές Μονάδες > HTML & JAVASCRIPT > Διαχείριση κωδικών Javascript, βεβαιωθείτε ότι η διαχείριση των κωδικών Javascript είναι ενεργοποιημένη, και μετά δημιουργήστε ένα νέο script: Title: FontAwesome Placement: In all the pages Επικολλήστε το παρακάτω script:
Πρέπει να κάνετε 1 τροποποίηση στο παραπάνω script. Κάντε κλικ εδώ και αντιγράψτε τον κώδικα που δίνεται κάτω από την ευκολότερη μέθοδο από MaxCDN. Αυτός ο κώδικας θα εισάγει το Font Awesome στο φόρουμ σας. Μετά, επικολλήστε το στη θέση του {FA_CSS} . Το αποτέλεσμα θα πρέπει να μοιάζει με το παρακάτω:
Πληροφορίες για το Font AwesomeΤώρα που έχετε εγκαταστήσει το Font Awesome, θα θέλετε να μάθετε πως μπορείτε να το χρησιμοποιήσετε στο σχεδιασμό του φόρουμ σας. Για μια λίστα από παραδείγμα, ρίξτε μια ματιά σε αυτή τη σελίδα. Για μια μεγαλύτερη λίστα με τα εικονίδια του Font Awesome, χρησιμοποιήστε το cheatsheet. Μπορείτε να αντιγράψετε και να επικολλήσετε αυτά τα εικονίδια στο περιεχόμενο του CSS σας ή στο φόρουμ αν χρησιμοποιείτε μία FontAwesome γραμματοσειρά. Δείτε το επόμενο τμήμα του οδηγού για λίγα παραδείγμα σχετικά με τη χρήση του Font Awesome στη Forumotion. Παραδείγματα χρήσης Font Awesome στη ForumGreek1. CSS Ψευδοστοιχείο Ας πούμε πως ήθελα να προσθέσω το fa-link εικονίδιο δίπλα από τους συνδέσμους της μπάρας πλοήγησης. Αυτό μπορεί να γίνει αντιγράφοντας το σύνδεσμο του εικονιδίου από το cheatsheet και επικολλώντας το ως τη τιμή του content. Τέλος, θα χρειαστεί να θέσουμε το font-family ως FontAwesome για να εμφανίζονται σωστά τα εικονίδια. Το αποτέλεσμα θα είναι αυτό:
Σημείωση: Μπορείτε να προσθέσετε έως και δύο ψευδοστοιχεία σε ένα στοιχείο χρησιμοποιώντας : :before και : :after. Χρησιμοποιούμε τα : :before και : :after διότι στο CSS3 το :before άλλαξε σε : :before ( το ίδιο συνέβη και με το :after ) για καλύτερη διάκριση μεταξύ των ψευδωστοιχείων και των ψευδο classes. Είναι καλή εξάσκηση να χρησιμοποιείτε και τα δύο για καλύτερη υποστήριξη για τους παλαιότερους περιηγητές. Ορίστε και ένα ακόμα παράδειγμα της χρήσης CSS ψευδοστοιχείων. Αυτή τη φορά θα χρησιμοποιήσουμε το : :before και το : :after για να "δέσουμε" δύο εικονίδια. Το δεύτερο εικονίδιο θα χρειαστεί να είναι σε απόλυτη θέση, επομένως βεβαιωθείτε πως το στοιχείο που θα εφαρμόσετε είναι σχετικό ή να έχει κάθε άλλη θέση άλλη από τη στατική! Σε αυτό το παράδειγμα έχουμε τοποθετήσει το fa-user και το fa-circle-o εικονίδιο στα αριστερά του συνδέσμου της μπάρας. Αυτό θα μας δώσει το παρακάτω αποτέλεσμα:
Για να θέσετε ένα εικονίδιο δίπλα ακριβώς από έναν σύνδεσμο, πρέπει να χρησιμοποιήσετε το URL Attribute Selector. Για παράδειγμα, επιλέγουμε το a.mainmenu μόνο με τη href τιμή του /memberlist. ( [href="/memberlist"]) 2. Χρήση του Font Awesome στα μηνύματα Τα εικονίδια του Font Awesome μπορούν να χρησιμοποιηθούν στα μηνύματά σας χρησιμοποιώντας ετικέτες γραμματοσειράς. Για να το κάνετε πιο απλό, μπορείτε να προσθέσετε το Font Awesome στον editor πηγαίνοντας στο Πίνακας Διαχείρισης > Λειτουργικές Μονάδες > HTML & JAVASCRIPT > Διαχείριση κωδικών Javascript και δημιουργήστε ένα νέο scrpt. Title: SCEditor FontAwesome Placement: In all the pages Επικολλήστε τον παρακάτω κώδικα και κάντε υποβολή:
Αυτό θα προσθέσει το Font Awesome στη λίστα των γραμματοσειρών για να μπορείτε να προσθέσετε υπέροχα εικονίδια στις δημοσιεύσεις σας. Απλώς πατήστε στη γραμματοσειρά, επιλέξτε ένα εικονίδιο από το cheatsheet και επικολλήστε το ανάμεσα στις ετικέτες. Μόλις κάνετε προεπισκόπηση ή δημοσιεύσετε ένα μήνυμα, το εικονίδιο πρέπει να εμφανιστεί.
3. Χρήση του Font Awesome στο HTML Αν δεν έχετε ανοίξει το cheatsheet ακόμα, μπορείτε να το κάνετε από εδώ. Το cheatsheet σας προσφέρει το εικονίδιο, το classname και την οντότητα του Unicode. Στην HTML, μπορείτε να χρησιμοποιήσετε το classname και το στοιχείο <i>. Για παράδειγμα: Προσοχή! Αν χρησιμοποιείτε μία HTML σελίδα χωρίς το φόρουμ header σας, πρέπει να ξανά εγκαταστήσετε το FontAwesome επικολλώντας το MaxCDN σύνδεσμο-στοιχείο στο <head> στοιχείο. Ένα μικρό παράδειγμα χρήσης εικονιδίων με οχήματα: Αυτό μπορεί να εφαρμοστεί σε ένα widget ή οπουδήποτε αλλού με τη μορφή HTML.
Ορίστε ένα ακόμα παράδειγμα, χρησιμοποιώντας μία HTML σελίδα χωρίς forum header. Αυτό κάνει χρήση του fa-spinner και fa-spin classnames για να φτιαχτεί ένα loading εικονίδιο που περιστρέφεται. Μπορείτε να δείτε μία προεπισκόπηση εδώ και να εφαρμόσετε τον κώδικα έτσι: Πίνακας Διαχείρισης > Λειτουργικές Μονάδες > HTML & JAVASCRIPT > Διαχείριση κωδικών HTML και δημιουργήστε μία καινούρια HTML σελίδα με τις παρακάτω επιλογές: Χρήση του forum header και footer: Όχι Να τεθεί ως homepage: Όχι Επικολλήστε τον παρακάτω κώδικα και μετά κάντε υποβολή:
Για περισσότερα σχετικά με το Font Awesome, μπορείτε να επισκεφθείτε την ιστοσελίδα τους για παραδείγματα, πληροφορίες και περισσότερα! Αν έχετε κάποια απορία, η ομάδα μας είναι πάντα διαθέσιμη. |
Ο οδηγός γράφτηκε από Ange Tuteur του Αγγλικού Φόρουμ Υποστήριξης και μεταφράστηκε από Nemo. Το Font Awesome δημιουργήθηκε από τον Dave Gandy. | |
Nemo- Υπεύθυνος Φόρουμ
-
Τόπος : Αθήνα, Ελλάδα
Δημοσιεύσεις : 1206
Παρόμοια θέματα
» Font Awesome - Λάθος logo
» Πώς να προσθέσετε ένα Font Awesome κουμπί στον editor
» Πως να χρησιμοποιήσετε το Hitskin
» Πώς να εγκαταστήσετε τα Google Webmaster Tools (Search Console)
» Font Sizes
» Πώς να προσθέσετε ένα Font Awesome κουμπί στον editor
» Πως να χρησιμοποιήσετε το Hitskin
» Πώς να εγκαταστήσετε τα Google Webmaster Tools (Search Console)
» Font Sizes
Σελίδα 1 από 1
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης
|
|