Τα εικονίδια μπορούν εύκολα να προστεθούν στη σελίδα HTML σας, χρησιμοποιώντας μια βιβλιοθήκη εικονιδίων.
Ο απλούστερος τρόπος για να προσθέσετε ένα εικονίδιο στη σελίδα HTML σας, είναι με μια βιβλιοθήκη εικονιδίων, όπως το Font Awesome.
Προσθέστε το όνομα της καθορισμένης κατηγορίας εικονιδίων σε οποιοδήποτε ενσωματωμένο στοιχείο HTML (όπως <i> ή <span>).
Όλα τα εικονίδια στις παρακάτω βιβλιοθήκες εικονιδίων είναι κλιμακούμενα διανύσματα που μπορούν να προσαρμοστεί με CSS (μέγεθος, χρώμα, σκιά, κ.λπ.)
Για να χρησιμοποιήσετε τα εικονίδια Font Awesome, μεταβείτε στο fontawesome.com, συνδεθείτε και λάβετε έναν κωδικό για προσθήκη στην ενότητα <head> της σελίδας σας HTML:
<script; src="https://kit.fontawesome.com/ο κωδικός σας.js" crossorigin="anonymous"></script>
Διαβάστε περισσότερα για το πώς να ξεκινήσετε με το Font Awesome στο μας Γραμματοσειρά Καταπληκτικό 5 σεμινάριο.
Σημείωση: Δεν απαιτείται λήψη ή εγκατάσταση!
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>Αποτέλεσμα:
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>
<h1>Font Awesome icon library</h1>
<p>Some Font Awesome icons:</p>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
<p>Styled Font Awesome icons (size and color):</p>
<i class="fas fa-cloud" style="font-size:24px;"></i>
<i class="fas fa-cloud" style="font-size:36px;"></i>
<i class="fas fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fas fa-cloud" style="font-size:60px;color:lightblue;"></i>
</body>
</html>
Για μια πλήρη αναφορά όλων των εικονιδίων Font Awesome, επισκεφτείτε την Αναφορά εικονιδίων.
Για να χρησιμοποιήσετε τα γλυφικά Bootstrap, προσθέστε την ακόλουθη γραμμή μέσα στην ενότητα <head> της σελίδας σας HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Σημείωση: Δεν απαιτείται λήψη ή εγκατάσταση!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html>Αποτέλεσμα:
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body class="container">
<h1>Bootstrap icon library</h1>
<p>Some Bootstrap icons:</p>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
<br><br>
<p>Styled Bootstrap icons (size and color):</p>
<i class="glyphicon glyphicon-cloud" style="font-size:24px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:36px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:60px;color:lightblue;"></i>
</body>
</html>
Για να χρησιμοποιήσετε τα εικονίδια Google, προσθέστε την ακόλουθη γραμμή μέσα στην ενότητα <head> της σελίδας σας HTML:
Σημείωση: Δεν απαιτείται λήψη ή εγκατάσταση!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>Αποτέλεσμα:
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<title>Google Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h1>Google icon library</h1>
<p>Some Google icons:</p>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
<br><br>
<p>Styled Google icons (size and color):</p>
<i class="material-icons" style="font-size:24px;">cloud</i>
<i class="material-icons" style="font-size:36px;">cloud</i>
<i class="material-icons" style="font-size:48px;color:red;">cloud</i>
<i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i>
</body>
</html>
Για μια πλήρη λίστα με όλα τα εικονίδια, επισκεφτείτε τη σελίδα μας Εκμάθηση εικονιδίων.