CSS -Icons
Symbole können einfach zu Ihrer HTML-Seite hinzugefügt werden, indem Sie eine Symbolbibliothek verwenden.
So fügen Sie Symbole hinzu
Der einfachste Weg, ein Symbol zu Ihrer HTML-Seite hinzuzufügen, ist mit einer Symbolbibliothek wie Font Awesome.
Fügen Sie den Namen der angegebenen Symbolklasse zu einem beliebigen Inline-HTML-Element (wie <i>oder
<span>) hinzu.
Alle Symbole in den folgenden Symbolbibliotheken sind skalierbare Vektoren, die mit CSS angepasst werden können (Größe, Farbe, Schatten usw.).
Schriftart Fantastische Symbole
Um die Font Awesome-Symbole zu verwenden, gehen Sie zu
fontawesome.com , melden Sie sich an und erhalten Sie einen Code, den Sie in den <head>Abschnitt Ihrer HTML-Seite einfügen können:
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
Lesen Sie mehr über die ersten Schritte mit Font Awesome in unserem Font Awesome 5-Tutorial .
Hinweis: Es ist kein Download oder Installation erforderlich!
Beispiel
<!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>
Ergebnis:
Eine vollständige Referenz aller Font Awesome-Symbole finden Sie in unserer Symbol-Referenz .
Bootstrap-Symbole
Um die Bootstrap-Glypicons zu verwenden, fügen Sie die folgende Zeile in den <head>Abschnitt Ihrer HTML-Seite ein:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Hinweis: Es ist kein Download oder Installation erforderlich!
Beispiel
<!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>
Ergebnis:
Google-Icons
Um die Google-Symbole zu verwenden, fügen Sie die folgende Zeile in den <head>Abschnitt Ihrer HTML-Seite ein:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Hinweis: Es ist kein Download oder Installation erforderlich!
Beispiel
<!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>
Ergebnis:
Eine vollständige Liste aller Symbole finden Sie in unserem Symbol-Tutorial .