Εικονίδια CSS

Πώς να προσθέσετε εικονίδια

Ο απλούστερος τρόπος για να προσθέσετε εικονίδια σε σελίδα HTML είναι χρησιμοποιώντας τη βιβλιοθήκη των εικονιδίων, όπως το Font Awesome.

Προσθέστε το όνομα της κλάσης του καθορισμένου εικονιδίου σε οποιοδήποτε στοιχείο HTML (π.χ. <i> ή <span>).

Όλα τα εικονίδια από τη βιβλιοθήκη των εικονιδίων είναι κλιμακώσιμα βελτιστοποιημένα, μπορούν να προσαρμοστούν με CSS (μέγεθος, χρώμα, σκιά κ.λπ.).

Font Awesome εικονίδια

Αν θέλετε να χρησιμοποιήσετε τα εικονίδια της Font Awesome, επισκεφθείτε το fontawesome.com, συνδεθείτε και αποκτήστε τον κώδικα για να προσθέσετε στο τμήμα <head> της σελίδας HTML σας:

<script src="https://kit.fontawesome.com/yourcode.js"></script>

Στο έγγραφό μας για την Font Awesome 5, διαβάστε περισσότερα για το πώς να ξεκινήσετε να χρησιμοποιείτε την Font Awesome.

συμβουλή:μη χρειάζεται λήψη ή εγκατάσταση!

παράδειγμα

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></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>

Αποτελέσματα:

Δοκιμάστε το Μέσα σας

Bootstrap εικονίδια

Αν θέλετε να χρησιμοποιήσετε τα glyphicons του 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>

Αποτελέσματα:

Δοκιμάστε το Μέσα σας

Google εικονίδια

Αν θέλετε να χρησιμοποιήσετε τα εικονίδια του Google, προσθέστε την παρακάτω γραμμή στο τμήμα <head> της σελίδας HTML σας:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

συμβουλή:μη χρειάζεται λήψη ή εγκατάσταση!

παράδειγμα

<!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>

Αποτελέσματα:

Δοκιμάστε το Μέσα σας