W3.CSS- Symbole
Symbolbibliotheken
Mit W3.CSS können Sie die Symbolbibliothek verwenden, die Sie mögen, wie zum Beispiel:
- Schriftart Fantastische Symbole
- Google Materialdesign-Symbole
- Bootstrap-Symbole
Verwenden einer Symbolbibliothek
So fügen Sie ein Symbol ein:
- Fügen Sie die Symbolbibliothek aus einem CDN (Content Delivery Network) in den Abschnitt <head> ein.
- Fügen Sie den Namen der Symbolklasse zu einem beliebigen Inline-HTML-Element hinzu.
Tipp: Die Elemente <i> und <span> werden häufig zum Hinzufügen von Symbolen verwendet.
Um die Größe des Symbols zu steuern, ändern Sie die Eigenschaft font-size des Symbols oder verwenden Sie eine der Klassen w3- size :
- w3-winzig
- w3-klein
- w3-groß
- w3-xxlarge
- w3-xxxgroß
- w3-jumbo
Einige großartige Symbole für Schriftarten
fa fa-Zuhause
Fa-Bars
fa fa-Pfeil-links
fa fa-Pfeil-rechts
fa fa-Suche
fa fa-nah
fa fa-erfrischen
fa fa-Müll
tut weh
fa fa-Auto
fa fa-LKW
fa fa-Flugzeug
Beispiel
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-trash"></i>
</body>
</html>
Eine vollständige Liste der Symbole finden Sie in unserer Symbolreferenz
Einige Google Material Design-Icons
Heimat
Heimat
Heimat
Speisekarte
Speisekarte
Speisekarte
Pfeil_zurück
Pfeil_zurück
Pfeil_zurück
Pfeil_vorwärts
Pfeil_vorwärts
Pfeil_vorwärts
Suche
Suche
Suche
nah dran
nah dran
nah dran
Aktualisierung
Aktualisierung
Aktualisierung
löschen
löschen
löschen
Person
Person
Person
Wegbeschreibung_Auto
Wegbeschreibung_Auto
Wegbeschreibung_Auto
lokaler_versand
lokaler_versand
lokaler_versand
lokaler_flughafen
lokaler_flughafen
lokaler_flughafen
Beispiel
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">cloud</i>
<i class="material-icons">delete</i>
</body>
</html>
Einige Bootstrap-Icons
Heimat
menü hamburger
Pfeil_zurück
Pfeil_vorwärts
Suche
Löschen
Aktualisierung
Müll
Nutzer
Datei
Flugzeug
Beispiel
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-trash"></i>
</body>
</html>