Υποενότητα 3.3: Εφαρμογή CSS

Εικονίδια - Icons

Τα εικονίδια είναι ένας έξυπνος τρόπος για να απεικονίσετε περιεχόμενο χωρίς τη χρήση εικόνων.

Υπάρχουν πολλές βιβλιοθήκες με εικονίδια.

Εδώ θα χρησιμοποιήσουμε τη βιβλιοθήκη Font Awesome .

Είναι εύκολο να εισαγάγετε τα εικονίδια Font Awesome στον κώδικα σας και υπάρχουν λεπτομερείς οδηγίες γι 'αυτό.

Για να χρησιμοποιήσετε τα εικονίδια Font Awesome, προσθέστε την ακόλουθη γραμμή μέσα στο <head> της HTML σελίδας:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Σημειώστε ότι μπορείτε να αλλάξετε το χρώμα τους χρησιμοποιώντας τους κοινούς κανόνες CSS.

Παράδειγμα
Οι κανόνες CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <h3> <i class="fa fa-info-circle" aria-hidden="true"></i> Information icon</h3>
  </body>
</html>

θα δημιουργήσουν μια σελίδα που εμφανίζεται ως:

Font Awesome

Περισσότερες πληροφορίες για τα εικονίδια: https://www.w3schools.com/icons/

Άσκηση

Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice03.3.04.html στον φάκελο "Exercises".
Επεξεργαστείτε το αρχείο. Στον browser θα πρέπει να εμφανίζεται η επόμενη εικόνα:

Λύση:

RGB (245, 130, 32)