Πώς να εγκαταστήσετε και να χρησιμοποιήσετε το Font Awesome

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Πήγαινε κάτω

Πώς να εγκαταστήσετε και να χρησιμοποιήσετε το Font Awesome Empty Πώς να εγκαταστήσετε και να χρησιμοποιήσετε το Font Awesome

Δημοσίευση από Nemo Κυρ Απρ 19, 2015 10:01 pm

Πώς να εγκαταστήσετε και να χρησιμοποιήσετε το Font Awesome


Πώς να εγκαταστήσετε και να χρησιμοποιήσετε το Font Awesome 09615110Τί είναι το Font Awesome





To Font Awesome αποτελεί μία εικονική διαδικτυακή γραμματοσειρά που σας επιτρέπει να εμφανίζετε εικονίδιο με τη χρήση CSS Classnames, η απλώς κάνοντας αντιγραφή και επικόλληση το εικονίδιο. Τα εικονίδια έχουν μία ευρεία χρήση, όπως για παράδειγμα εικονίδια loading. Χρησιμοποιεταί από ένα μεγάλο ποσοστό ιστοσελίδων, όπως η ForumGreek, επομένως γιατί δεν το χρησιμοποιείτε και εσείς;

Πώς να εγκαταστήσετε και να χρησιμοποιήσετε το Font Awesome 09615110Εγκατάσταση του Font Awesome





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

[1η Μέθοδος]Εγκατάσταση με τα templates





Αν είστε ο δημιουργός ή αν έχετε πρόσβαση στον λογαριασμό του δημιουργού, μπορείτε να τροποποιήσετε τα πρότυπα για να εγκαταστήσετε το Font Awesome. Αλλιώς, αν είστε ένας απλός Διαχειριστής και δεν έχετε πρόσβαση στον λογαριασμό του δημιουργού, παρακαλώ να δείτε την 2η Μέθοδο.
Για να το εγκαταστήσετε μέσω των προτύπων πρέπει να πάτε στον Πίνακας Διαχείρισης > Εμφάνιση  > Πρότυπα > Γενικά και να ανοίξετε το πρότυπο με τον τίτλο overall_header edit
Πριν ξεκινήσετε την επεξεργασία των προτύπων, κάντε κλικ εδώ και αντιγράψτε τον κώδικα που δίνεται κάτω από την ευκολότερη μέθοδο από MaxCDN. Αυτός ο κώδικας θα εισάγει το Font Awesome στο φόρουμ σας.

Πώς να εγκαταστήσετε και να χρησιμοποιήσετε το Font Awesome Fa210

Βρείτε το {T_HEAD_STYLESHEET} στο overall_header πρότυπο, και ακριβώς πριν από αυτό, επικολλήστε τον κώδικα που δίνεται από MaxCDN για να υπάρχει κάτι παρόμοιο με το παρακάτω:
Κώδικας:
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    {T_HEAD_STYLESHEET}
Μόλις τελειώσετε, αποθηκεύστε το και μετά δημοσιεύστε το πρότυπο και το Font Awesome θα έχει εγκατασταθεί.

[2η Μέθοδος]Εγκατάσταση μέσω Javascript





Αυτή η μέθοδος είναι πιο απλή και σας επιτρέπει να εγκαταστήσετε το Font Awesome προσαρτώντας το stylesheet στο <head> στοιχείο χωρίς να έχετε πρόσβαση στα πρότυπα. Για να το εγκαταστήσετε, πηγαίντε στο Πίνακας Διαχείρισης > Λειτουργικές Μονάδες > HTML & JAVASCRIPT > Διαχείριση κωδικών Javascript, βεβαιωθείτε ότι η διαχείριση των κωδικών Javascript είναι ενεργοποιημένη, και μετά δημιουργήστε ένα νέο script:
Title: FontAwesome
Placement: In all the pages
Επικολλήστε το παρακάτω script:
Κώδικας:
   (function() {
      var FA = '{FA_CSS}',
          a = document.createElement('LINK');
      a.rel = 'stylesheet';
      a.type = 'text/css';
      a.href = FA;
      document.getElementsByTagName('HEAD')[0].appendChild(a);
    })();
Τροποποιήσεις:
Πρέπει να κάνετε 1 τροποποίηση στο παραπάνω script. Κάντε κλικ εδώ και αντιγράψτε τον κώδικα που δίνεται κάτω από την ευκολότερη μέθοδο από MaxCDN. Αυτός ο κώδικας θα εισάγει το Font Awesome στο φόρουμ σας. Μετά, επικολλήστε το στη θέση του {FA_CSS} .

Πώς να εγκαταστήσετε και να χρησιμοποιήσετε το Font Awesome Fa10

Το αποτέλεσμα θα πρέπει να μοιάζει με το παρακάτω:    
Κώδικας:
'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css',
Κάντε το αποθήκευση και το FontAwesome θα έχει εγκατασταθεί!

Πώς να εγκαταστήσετε και να χρησιμοποιήσετε το Font Awesome 09615110Πληροφορίες για το Font Awesome





Τώρα που έχετε εγκαταστήσει το Font Awesome, θα θέλετε να μάθετε πως μπορείτε να το χρησιμοποιήσετε στο σχεδιασμό του φόρουμ σας. Για μια λίστα από παραδείγμα, ρίξτε μια ματιά σε αυτή τη σελίδα.  
Για μια μεγαλύτερη λίστα με τα εικονίδια του Font Awesome, χρησιμοποιήστε το cheatsheet. Μπορείτε να αντιγράψετε και να επικολλήσετε αυτά τα εικονίδια στο περιεχόμενο του CSS σας ή στο φόρουμ αν χρησιμοποιείτε μία FontAwesome γραμματοσειρά. Δείτε το επόμενο τμήμα του οδηγού για λίγα παραδείγμα σχετικά με τη χρήση του Font Awesome στη Forumotion.

Πώς να εγκαταστήσετε και να χρησιμοποιήσετε το Font Awesome 09615110Παραδείγματα χρήσης Font Awesome στη ForumGreek





1. CSS Ψευδοστοιχείο

Ας πούμε πως ήθελα να προσθέσω το fa-link εικονίδιο δίπλα από τους συνδέσμους της μπάρας πλοήγησης. Αυτό μπορεί να γίνει αντιγράφοντας το σύνδεσμο του εικονιδίου από το cheatsheet και επικολλώντας το ως τη τιμή του content. Τέλος, θα χρειαστεί να θέσουμε το font-family ως FontAwesome για να εμφανίζονται σωστά τα εικονίδια. Το αποτέλεσμα θα είναι αυτό:

Πώς να εγκαταστήσετε και να χρησιμοποιήσετε το Font Awesome Captur21

Κώδικας:
   a.mainmenu:before, a.mainmenu::before {
      content:"";
      font-family:FontAwesome;
    }

Σημείωση: Μπορείτε να προσθέσετε έως και δύο ψευδοστοιχεία σε ένα στοιχείο χρησιμοποιώντας : :before και : :after. Χρησιμοποιούμε τα : :before και : :after διότι στο CSS3 το :before άλλαξε σε : :before ( το ίδιο συνέβη και με το :after ) για καλύτερη διάκριση μεταξύ των ψευδωστοιχείων και των ψευδο classes. Είναι καλή εξάσκηση να χρησιμοποιείτε και τα δύο για καλύτερη υποστήριξη για τους παλαιότερους περιηγητές.
Ορίστε και ένα ακόμα παράδειγμα της χρήσης CSS ψευδοστοιχείων. Αυτή τη φορά θα χρησιμοποιήσουμε το : :before και το : :after για να "δέσουμε" δύο εικονίδια. Το δεύτερο εικονίδιο θα χρειαστεί να είναι σε απόλυτη θέση, επομένως βεβαιωθείτε πως το στοιχείο που θα εφαρμόσετε είναι σχετικό ή να έχει κάθε άλλη θέση άλλη από τη στατική!
Σε αυτό το παράδειγμα έχουμε τοποθετήσει το fa-user και το fa-circle-o εικονίδιο στα αριστερά του συνδέσμου της μπάρας. Αυτό θα μας δώσει το παρακάτω αποτέλεσμα:

Πώς να εγκαταστήσετε και να χρησιμοποιήσετε το Font Awesome Captur23

Κώδικας:
   a.mainmenu[href="/memberlist"] { position:relative }
    a.mainmenu[href="/memberlist"]:before, a.mainmenu[href="/memberlist"]::before {
      content:"";
      color:#666;
      font-family:FontAwesome;
      font-weight:normal;
      font-size:13px;
      margin:0 10px;
    }
    a.mainmenu[href="/memberlist"]:after, a.mainmenu[href="/memberlist"]::after {
      content:"";
      color:#999;
      font-family:FontAwesome;
      font-weight:normal;
      font-size:24px;
      position:absolute;
      left:5px;
      top:-6px;
    }

Για να θέσετε ένα εικονίδιο δίπλα ακριβώς από έναν σύνδεσμο, πρέπει να χρησιμοποιήσετε το 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
Επικολλήστε τον παρακάτω κώδικα και κάντε υποβολή:

Κώδικας:
$(function(){
  if (!$.sceditor) return;
  $.sceditor.defaultOptions.fonts += ',FontAwesome';
});
 

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

Πώς να εγκαταστήσετε και να χρησιμοποιήσετε το Font Awesome Fa310

Πώς να εγκαταστήσετε και να χρησιμοποιήσετε το Font Awesome Fa310

Κώδικας:
An [font=FontAwesome][color=#ff0000][/color][/font] for you.

3. Χρήση του Font Awesome στο HTML

Αν δεν έχετε ανοίξει το cheatsheet ακόμα, μπορείτε να το κάνετε από εδώ. Το cheatsheet σας προσφέρει το εικονίδιο, το classname και την οντότητα του Unicode. Στην HTML, μπορείτε να χρησιμοποιήσετε το classname και το στοιχείο <i>. Για παράδειγμα:
Προσοχή! Αν χρησιμοποιείτε μία HTML σελίδα χωρίς το φόρουμ header σας, πρέπει να ξανά εγκαταστήσετε το FontAwesome επικολλώντας το MaxCDN σύνδεσμο-στοιχείο στο <head> στοιχείο.
Ένα μικρό παράδειγμα χρήσης εικονιδίων με οχήματα:

Πώς να εγκαταστήσετε και να χρησιμοποιήσετε το Font Awesome Captur22

Αυτό μπορεί να εφαρμοστεί σε ένα widget ή οπουδήποτε αλλού με τη μορφή HTML.

Κώδικας:
    <style type="text/css">a.example-fa { font-size:12px; font-weight:bold; display:block; margin:3px 0; } a.example-fa i { width:30px; text-align:center; }</style>
    <a class="example-fa" href="#"><i class="fa fa-car"></i>Cars</a>
    <a class="example-fa" href="#"><i class="fa fa-truck"></i>Trucks</a>
    <a class="example-fa" href="#"><i class="fa fa-motorcycle"></i>Motorcycles</a>

Ορίστε ένα ακόμα παράδειγμα, χρησιμοποιώντας μία HTML σελίδα χωρίς forum header. Αυτό κάνει χρήση του fa-spinner και fa-spin classnames για να φτιαχτεί ένα loading εικονίδιο που περιστρέφεται.
Μπορείτε να δείτε μία προεπισκόπηση εδώ και να εφαρμόσετε τον κώδικα έτσι:
Πίνακας Διαχείρισης > Λειτουργικές Μονάδες > HTML & JAVASCRIPT > Διαχείριση κωδικών HTML και δημιουργήστε μία καινούρια HTML σελίδα με τις παρακάτω επιλογές:
Χρήση του forum header και footer: Όχι
Να τεθεί ως homepage: Όχι
Επικολλήστε τον παρακάτω κώδικα και μετά κάντε υποβολή:
Κώδικας:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  
  <head>
    <title>Loading...</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
    <link href="http://illiweb.com/fa/favicon/discussion.ico" rel="shortcut icon" type="image/x-icon"/>
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">body{color:#FFF;font-size:12px;font-family:"Trebuchet MS",Helvetica,Verdana,sans-serif;background:#39C}#loader{text-align:center;position:fixed;top:0;left:0;right:0;bottom:0;border-top:50px solid #333;border-bottom:50px solid #333}#content{height:100px;margin-top:-50px;position:absolute;top:50%;left:0;right:0}</style>
  </head>
  
  <body>
    <div id="loader">
      <div id="content">
        <i class="fa fa-spinner fa-spin fa-5x"></i>
        <p>Loading please wait...</p>
      </div>
    </div>
  </body>
  
</html>
 

Για περισσότερα σχετικά με το Font Awesome, μπορείτε να επισκεφθείτε την ιστοσελίδα τους για παραδείγματα, πληροφορίες και περισσότερα! Αν έχετε κάποια απορία, η ομάδα μας είναι πάντα διαθέσιμη.

Ο οδηγός γράφτηκε από Ange Tuteur του Αγγλικού Φόρουμ Υποστήριξης και μεταφράστηκε από Nemo. Το Font Awesome δημιουργήθηκε από τον Dave Gandy.
Nemo

Nemo
Υπεύθυνος Φόρουμ
Υπεύθυνος Φόρουμ

Άντρας
Τόπος : Αθήνα, Ελλάδα
Δημοσιεύσεις : 1206



Nemo ο/η συγγραφέας σας ευχαριστήσε για την απάντησή σας.

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Επιστροφή στην κορυφή

- Παρόμοια θέματα

Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης