Οι βιβλιοθήκες εικονιδίων είναι συλλογές προ-σχεδιασμένων εικονιδίων που μπορούν εύκολα να ενσωματωθούν στη σελίδα HTML σας. Αυτές οι βιβλιοθήκες προσφέρουν μια μεγάλη ποικιλία εικονιδίων για διάφορες χρήσεις, όπως συμβολικές αναπαραστάσεις για κοινά στοιχεία και ενέργειες.
Για να χρησιμοποιήσετε ένα εικονίδιο από μια βιβλιοθήκη, πρέπει να προσθέσετε τον κατάλληλο κώδικα HTML και CSS. Συνήθως, ο κώδικας HTML περιλαμβάνει ένα στοιχείο ή με μια κλάση που αντιστοιχεί στο συγκεκριμένο εικονίδιο. Ο κώδικας CSS προσθέτει την απαραίτητη μορφοποίηση και την πηγή του εικονιδίου.
Από την χρήση βιβλιοθηκών εικονιδίων, μπορείτε να ενισχύσετε την αισθητική και την ευανάγνωστητα της σελίδας σας, προσφέροντας έναν ευδιάκριτο και συμβολικό τρόπο παρουσίασης πληροφοριών και λειτουργιών.
Μερικές δημοφιλείς βιβλιοθήκες εικονιδίων περιλαμβάνουν το Font Awesome, το Material Icons και το Ionicons. Για να χρησιμοποιήσετε μια βιβλιοθήκη εικονιδίων, ακολουθήστε τα παρακάτω βήματα:
- Εισαγάγετε τη βιβλιοθήκη εικονιδίων στο αρχείο HTML σας. Αυτό μπορεί να γίνει με τη χρήση ενός συνδέσμου
<link>ή ενσωματώνοντας τη βιβλιοθήκη απευθείας στο αρχείο CSS σας. Για παράδειγμα, αν χρησιμοποιείτε το Font Awesome, μπορείτε να προσθέσετε τον παρακάτω σύνδεσμο<link>στο<head>της σελίδας σας:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha384-9R6GzAE2LTvx3S5+SpkAc1oIjvFqi+HsuUIvblFj27qB+Lcj2dCFU+WQDp/qPhgj" crossorigin="anonymous">
- Αφού εισάγετε τη βιβλιοθήκη, μπορείτε να χρησιμοποιήσετε τα εικονίδια που παρέχει. Για παράδειγμα, αν θέλετε να προσθέσετε ένα εικονίδιο από το Font Awesome, μπορείτε να χρησιμοποιήσετε την ετικέτα
<i>με την κατάλληλη κλάση εικονιδίου. Παράδειγμα:
<i class="fas fa-heart"></i>
Αντικαταστήστε την κλάση "fas fa-heart" με την κατάλληλη κλάση για το εικονίδιο που θέλετε να χρησιμοποιήσετε.
Με αυτόν τον τρόπο, μπορείτε να προσθέσετε εικονίδια στη σελίδα σας, χρησιμοποιώντας μια βιβλιοθήκη εικονιδίων.
Ο πιο απλός τρόπος για να προσθέσετε ένα εικονίδιο στη σελίδα HTML σας είναι με τη χρήση μιας βιβλιοθήκης εικονιδίων, όπως η Font Awesome.
Προσθέστε το όνομα της συγκεκριμένης κλάσης εικονιδίου σε οποιοδήποτε ενσωματωμένο στοιχείο HTML (όπως ή ).
Όλα τα εικονίδια στις βιβλιοθήκες εικονιδίων που ακολουθούν είναι κλιμακούμενα διανύσματα που μπορούν να προσαρμοστούν με CSS (μέγεθος, χρώμα, σκιά κ.λπ.)
[adinserter block=”2″]
Αναφέρω μερικές από τις δημοφιλείς βιβλιοθήκες εικονιδίων:
- Font Awesome:
<!-- Εισάγετε το Font Awesome στοιχείο <script> --> <script src="https://kit.fontawesome.com/your-font-awesome-kit.js" crossorigin="anonymous"></script> <!-- Προσθέστε ένα εικονίδιο με τη χρήση της κατάλληλης κλάσης εικονιδίου --> <i class="fas fa-heart"></i>
- Material Icons:
<!-- Εισάγετε τη βιβλιοθήκη Material Icons --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Προσθέστε ένα εικονίδιο με τη χρήση της κατάλληλης κλάσης εικονιδίου --> <i class="material-icons">favorite</i>
- Ionicons:
<!-- Εισάγετε τη βιβλιοθήκη Ionicons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/5.5.3/css/ionicons.min.css" integrity="sha512-Z6YK1yM7DplFuJm0xhQ3UhHv3fCpy4c4NcWdqtwhrG98rj6/8bP6zjMehN3Rd/Cv0tLzVXg0qSWxzxJ9sHTsyg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <!-- Προσθέστε ένα εικονίδιο με τη χρήση της κατάλληλης κλάσης εικονιδίου --> <i class="ion ion-heart"></i>
Αντικαταστήστε τις κατάλληλες κλάσεις εικονιδίου με αυτές που αντιστοιχούν στο εικονίδιο που θέλετε να χρησιμοποιήσετε.
Με αυτόν τον τρόπο, μπορείτε να προσθέσετε εικονίδια στη σελίδα σας, χρησιμοποιώντας μια βιβλιοθήκη εικονιδίων.
Για να χρησιμοποιήσετε τα εικονίδια του Font Awesome, μεταβείτε στο fontawesome.com, συνδεθείτε και λάβετε έναν κωδικό που πρέπει να προσθέσετε στην ενότητα της σελίδας HTML σας:
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
Μπορείτε να διαβάσετε περισσότερα σχετικά με το πώς να ξεκινήσετε με το Font Awesome στον οδηγό μας για το Font Awesome 5.
Σημείωση: Δεν απαιτείται λήψη ή εγκατάσταση!
Για να χρησιμοποιήσετε τα εικονίδια Bootstrap, προσθέστε την παρακάτω γραμμή εντός της ενότητας της σελίδας HTML σας:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Σημείωση: Δεν απαιτείται λήψη ή εγκατάσταση!
Ας δούμε ένα παράδειγμα χρήσης εικονίδιων από τη βιβλιοθήκη Bootstrap:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα Bootstrap Icons</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<h1>Παράδειγμα Bootstrap Icons</h1>
<!-- Προσθέστε ένα εικονίδιο στη σελίδα σας -->
<i class="glyphicon glyphicon-search"></i>
<!-- Προσθέστε ένα διαφορετικό εικονίδιο -->
<i class="glyphicon glyphicon-heart"></i>
<!-- Προσθέστε άλλο ένα εικονίδιο -->
<i class="glyphicon glyphicon-star"></i>
<!-- Προσθέστε εικονίδιο με κείμενο -->
<button class="btn btn-default">
<i class="glyphicon glyphicon-ok"></i> Αποδοχή
</button>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Στο παραπάνω παράδειγμα, έχουμε προσθέσει τρία εικονίδια από τη βιβλιοθήκη Bootstrap. Τα εικονίδια αναπαρίστανται με τη χρήση της κλάσης “glyphicon” και μιας ειδικής κλάσης για κάθε εικονίδιο, όπως “glyphicon-search”, “glyphicon-heart” και “glyphicon-star”. Επίσης, προσθέσαμε ένα κουμπί με ένα εικονίδιο και κείμενο μέσα σε αυτό.
[adinserter block=”3″]
Μπορείτε να εκτελέσετε τον παραπάνω κώδικα HTML σε έναν φυλλομετρητή για να δείτε τα εικονίδια Bootstrap στην πράξη.
Για να χρησιμοποιήσετε τα εικονίδια της Google, προσθέστε την παρακάτω γραμμή εντός της ενότητας της σελίδας HTML σας:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Σημείωση: Δεν απαιτείται λήψη ή εγκατάσταση!
Ας δούμε ένα παράδειγμα χρήσης εικονιδίων από τη βιβλιοθήκη Google Icons:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα Google Icons</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h1>Παράδειγμα Google Icons</h1>
<!-- Προσθέστε ένα εικονίδιο στη σελίδα σας -->
<i class="material-icons">search</i>
<!-- Προσθέστε ένα διαφορετικό εικονίδιο -->
<i class="material-icons">favorite</i>
<!-- Προσθέστε άλλο ένα εικονίδιο -->
<i class="material-icons">star</i>
<!-- Προσθέστε εικονίδιο με κείμενο -->
<button class="btn btn-default">
<i class="material-icons">check</i> Αποδοχή
</button>
</body>
</html>
Στο παραπάνω παράδειγμα, έχουμε προσθέσει τρία εικονίδια από τη βιβλιοθήκη Google Icons. Τα εικονίδια αναπαρίστανται με τη χρήση της κλάσης “material-icons” και του ονόματος του εικονιδίου μέσα στην ετικέτα . Επίσης, προσθέσαμε ένα κουμπί με ένα εικονίδιο και κείμενο μέσα σε αυτό.
Μπορείτε να εκτελέσετε τον παραπάνω κώδικα HTML σε έναν φυλλομετρητή για να δείτε τα εικονίδια Google στην πράξη.