CSS-Icon

Wie füge ich Symbole hinzu

Die einfachste Methode, Symbole zu einer HTML-Seite hinzuzufügen, ist die Verwendung einer Symbolbibliothek, wie z.B. Font Awesome.

Fügen Sie den Namen der angegebenen Symbolklasse zu jedem inline HTML-Element hinzu (z.B. <i> oder <span>).

Alle Symbole in der folgenden Symbolbibliothek sind skalierbare Vektorbilder und können mit CSS angepasst werden (Größe, Farbe, Schatten usw.).

Font Awesome Symbole

Besuchen Sie fontawesome.com, melden Sie sich an und erhalten Sie den Code, um ihn im <head>-Teil der HTML-Seite hinzuzufügen, um Font Awesome-Symbole zu verwenden:

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

Lesen Sie mehr über den Start mit Font Awesome in unserem Font Awesome 5-Tutorial.

Hinweis:Kein Herunterladen oder Installieren erforderlich!

Beispiel

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

Ergebnis:

Versuchen Sie es selbst

Bootstrap-Symbole

Fügen Sie, um Bootstrap-Glyphos zu verwenden, die folgende Zeile im <head>-Teil der HTML-Seite hinzu:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Hinweis:Kein Herunterladen oder Installieren 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:

Versuchen Sie es selbst

Google-Symbole

Fügen Sie, um Google-Symbole zu verwenden, die folgenden Zeilen im <head>-Teil der HTML-Seite hinzu:

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

Hinweis:Kein Herunterladen oder Installieren erforderlich!

Beispiel

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">wolk</i>
<i class="material-icons">liebling</i>
<i class="material-icons">anhängen</i>
<i class="material-icons">computer</i>
<i class="material-icons">verkehr</i>
</body>
</html>

Ergebnis:

Versuchen Sie es selbst