Web Icons - Kurzanleitung

Ein Symbol ist ein Symbol, das eine bestimmte Aktion oder Funktion auf einer Webseite darstellt. Symbole werden sowohl in Dokumenten als auch in Anwendungen verwendet und können entweder auswählbar oder nicht auswählbar sein. Beispielsweise sind die Bilder, die wir auf den Schaltflächen einer Anwendung sehen, alle Symbole, und diese Schaltflächen können ausgewählt werden. Wenn wir ein Symbol als Firmenlogo verwenden, kann es normalerweise nicht ausgewählt werden.

Wenn Sie in einer Windows-Umgebung das Systemvolume stummschalten, wird es mithilfe eines Symbols dargestellt (siehe Abbildung unten).

Mithilfe von Web-Symbolen können wir eine Ladeseite, eine deaktivierte Option, einen Link, eine Umleitung usw. darstellen. Diese Symbole können gespiegelt, gedreht, in der Größe geändert, umrandet, invertiert und farbig dargestellt werden.

Symbol Schriftarten

Symbolschriftarten enthalten Symbole und Glyphen. Sobald Sie eine gewünschte Schriftart geladen haben, können Sie jedes der von dieser Schriftart bereitgestellten Symbole unter Verwendung des Klassennamens des Symbols verwenden. Wir können den Symbolen auch verschiedene Farben zuweisen und ihre Größe mithilfe der CSS-Eigenschaften ändern. Es gibt mehrere Symbolbibliotheken (Schriftarten), die Symbole bereitstellen. Dieses Tutorial konzentriert sich auf drei Hauptschriftarten, nämlich -

Font Awesome
Bootstrap Glyphicons
Googles Materialsymbole

Font Awesome

Diese Schriftart bietet 519 frei skalierbare Vektorsymbole. Diese Bibliothek ist sowohl für den persönlichen als auch für den kommerziellen Gebrauch völlig kostenlos. Diese Symbole können einfach angepasst werden. Ursprünglich wurden sie für Bootstrap entwickelt.

Bootstrap Glyphicons

Dies ist eine Bibliothek monochromatischer Symbole, die in Rasterbildformaten, Vektorbildformaten und als Schriftarten verfügbar sind. Es bietet über 250 Glyphen im Schriftformat. Sie können diese Schriftarten in Ihren Webprojekten verwenden. Diese Symbole sind nicht kostenlos, Sie können sie jedoch in Bootstrap-basierten Projekten verwenden, ohne sie kaufen zu müssen.

Googles Materialsymbole

Google stellt ungefähr 750 Symbole zur Verfügung, die unter "Richtlinien für Materialdesign" erstellt wurden. Diese werden als bezeichnet Material DesignSymbole. Diese Symbole sind einfach und unterstützen alle modernen Webbrowser. Da diese Symbole vektorbasiert sind, sind sie auch skalierbar. Um diese Symbole zu verwenden, müssen wir die Schriftart (Bibliothek) laden.material-icons.

Die Bibliothek "Font Awesome Icons" bietet 519 kostenlose skalierbare Vektorsymbole. Diese Bibliothek ist sowohl für den persönlichen als auch für den kommerziellen Gebrauch völlig kostenlos. Ursprünglich für Bootstrap entwickelt, können diese Symbole einfach angepasst werden.

Laden der Schriftbibliothek

Um die Font Awesome-Bibliothek zu laden, kopieren Sie die folgende Zeile und fügen Sie sie in den Abschnitt <head> der Webseite ein.

<head>
   <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

Verwenden des Symbols

Font Awesome bietet mehrere Symbole. Wählen Sie eine davon aus und fügen Sie den Namen der Symbolklasse zu einem beliebigen HTML-Element im <body> -Tag hinzu. Im folgenden Beispiel haben wir das Symbol der indischen Währung verwendet.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
   </head>
	
   <body>
      <i class = "fa fa-inr"></i>
   </body>
	
</html>

Es wird die folgende Ausgabe erzeugt -

Größe definieren

Sie können die Größe eines Symbols erhöhen oder verringern, indem Sie seine Größe mithilfe von CSS definieren und zusammen mit dem Klassennamen verwenden, wie unten gezeigt. Im angegebenen Beispiel haben wir die Größe als 6 em deklariert.

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.mysize {font-size: 10em;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr mysize"></i>
   </body>
	
</html>

Es wird die folgende Ausgabe erzeugt -

Farbe definieren

Genau wie bei der Größe können Sie die Farbe der Symbole mithilfe von CSS definieren. Das folgende Beispiel zeigt, wie Sie die Farbe des indischen Währungssymbols ändern.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.custom {font-size: 6em; color: red;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr custom"></i>
   </body>
	
</html>

Liste der Kategorien

Font Awesome bietet 519 Symbole in den folgenden Kategorien:

Webanwendungssymbole
Hand Icons
Transportsymbole
Geschlechtssymbole
Dateityp-Symbole
Spinner Icons
Formularsteuerungssymbole
Zahlungssymbole
Diagrammsymbole
Währungssymbole
Texteditor-Symbole
Richtungssymbole
Video-Player-Symbole
Markensymbole

Um eines dieser Symbole zu verwenden, müssen Sie den Klassennamen in den in diesem Kapitel angegebenen Programmen durch den Klassennamen des gewünschten Symbols ersetzen. In den kommenden Kapiteln dieser Einheit (Font Awesome) haben wir die Verwendung und die jeweiligen Ausgaben verschiedener Font Awesome-Symbole in Kategorien erläutert.

In diesem Kapitel wird die Verwendung von Font Awesome-Webanwendungssymbolen erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Die folgende Tabelle zeigt die Verwendung und die Ergebnisse der Symbole für Font Awesome-Webanwendungen. Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Ergebnis
<i class = "fa fa-adjust custom"> </ i>
<i class = "fa fa-anchor custom"> </ i>
<i class = "fa fa-archive custom"> </ i>
<i class = "fa fa-area-chart custom"> </ i>
<i class = "fa fa-arrows custom"> </ i>
<i class = "fa fa-arrows-h custom"> </ i>
<i class = "fa fa-arrows-v custom"> </ i>
<i class = "fa fa-asterisk custom"> </ i>
<i class = "fa fa-at custom"> </ i>
<i class = "fa fa-automobile custom"> </ i>
<i class = "fa fa-balance-scale custom"> </ i>
<i class = "fa fa-ban custom"> </ i>
<i class = "fa fa-bank custom"> </ i>
<i class = "fa fa-bar-chart custom"> </ i>
<i class = "fa fa-Balkendiagramm-o benutzerdefiniert"> </ i>
<i class = "fa fa-barcode custom"> </ i>
<i class = "fa fa-bar custom"> </ i>
<i class = "fa fa-bed custom"> </ i>
<i class = "fa fa-bier custom"> </ i>
<i class = "fa fa-bell custom"> </ i>
<i class = "fa fa-wrench custom"> </ i>
<i class = "fa fa-bell-o custom"> </ i>
<i class = "fa fa-bell-slash custom"> </ i>
<i class = "fa fa-bell-slash-o custom"> </ i>
<i class = "fa fa-bicycle custom"> </ i>
<i class = "fa fa-batterie-0 custom"> </ i>
<i class = "fa fa-batterie-1 custom"> </ i>
<i class = "fa fa-batterie-2 custom"> </ i>
<i class = "fa fa-batterie-3 custom"> </ i>
<i class = "fa fa-batterie-4 custom"> </ i>
<i class = "fa fa-batterie-leer custom"> </ i>
<i class = "fa fa-batterie-viertel benutzerdefiniert"> </ i>
<i class = "fa fa-batterie-halb benutzerdefiniert"> </ i>
<i class = "fa fa-batterie-drei viertel custom"> </ i>
<i class = "fa fa-batterie-voll benutzerdefiniert"> </ i>
<i class = "fa fa-geburtstagstorte custom"> </ i>
<i class = "fa fa-bolzen custom"> </ i>
<i class = "fa fa-bomb custom"> </ i>
<i class = "fa fa-book custom"> </ i>
<i class = "fa fa-bookmark custom"> </ i>
<i class = "fa fa-bookmark-o custom"> </ i>
<i class = "fa fa-briefcase custom"> </ i>
<i class = "fa fa-bug custom"> </ i>
<i class = "fa fa-building custom"> </ i>
<i class = "fa fa-building-o custom"> </ i>
<i class = "fa fa-bullhorn custom"> </ i>
<i class = "fa fa-bullseye custom"> </ i>
<i class = "fa fa-bus custom"> </ i>
<i class = "fa fa-cab custom"> </ i>
<i class = "fa fa-video-camera custom"> </ i>
<i class = "fa fa-calendar custom"> </ i>
<i class = "fa fa-calendar-check-o custom"> </ i>
<i class = "fa fa-calendar-minus-o custom"> </ i>
<i class = "fa fa-calendar-o custom"> </ i>
<i class = "fa fa-calendar-plus-o custom"> </ i>
<i class = "fa fa-calendar-times-o custom"> </ i>
<i class = "fa fa-camera custom"> </ i>
<i class = "fa fa-camera-retro custom"> </ i>
<i class = "fa fa-car custom"> </ i>
<i class = "fa fa-cc custom"> </ i>
<i class = "fa fa-caret-square-o-down custom"> </ i>
<i class = "fa fa-caret-square-o-left custom"> </ i>
<i class = "fa fa-caret-square-o-right custom"> </ i>
<i class = "fa fa-caret-square-o-up custom"> </ i>
<i class = "fa fa-cart-Pfeil nach unten benutzerdefiniert"> </ i>
<i class = "fa fa-cart-plus custom"> </ i>
<i class = "fa fa-Zertifikat benutzerdefiniert"> </ i>
<i class = "fa fa-child custom"> </ i>
<i class = "fa fa-check custom"> </ i>
<i class = "fa fa-check-circle custom"> </ i>
<i class = "fa fa-check-circle-o custom"> </ i>
<i class = "fa fa-check-square custom"> </ i>
<i class = "fa fa-check-square-o custom"> </ i>
<i class = "fa fa-circle custom"> </ i>
<i class = "fa fa-circle-o custom"> </ i>
<i class = "fa fa-circle-o-notch custom"> </ i>
<i class = "fa fa-circle-thin custom"> </ i>
<i class = "fa fa-clock-o custom"> </ i>
<i class = "fa fa-clone custom"> </ i>
<i class = "fa fa-close custom"> </ i>
<i class = "fa fa-anchor custom"> </ i>
<i class = "fa fa-cloud-download custom"> </ i>
<i class = "fa fa-cloud-upload custom"> </ i>
<i class = "fa fa-code custom"> </ i>
<i class = "fa fa-code-fork custom"> </ i>
<i class = "fa fa-kaffee custom"> </ i>
<i class = "fa fa-cog custom"> </ i>
<i class = "fa fa-cogs custom"> </ i>
<i class = "fa fa-comment custom"> </ i>
<i class = "fa fa-comment-o custom"> </ i>
<i class = "fa fa-commenting custom"> </ i>
<i class = "fa fa-commenting-o custom"> </ i>
<i class = "fa fa-Kommentare benutzerdefiniert"> </ i>
<i class = "fa fa-comment-o custom"> </ i>
<i class = "fa fa-kompass custom"> </ i>
<i class = "fa fa-copyright custom"> </ i>
<i class = "fa fa-creative-commons custom"> </ i>
<i class = "fa fa-Kreditkarte benutzerdefiniert"> </ i>
<i class = "fa fa-crop custom"> </ i>
<i class = "fa fa-crosshairs custom"> </ i>
<i class = "fa fa-cube custom"> </ i>
<i class = "fa fa-cubes custom"> </ i>
<i class = "fa fa-Besteck benutzerdefiniert"> </ i>
<i class = "fa fa-dashboard custom"> </ i>
<i class = "fa fa-database custom"> </ i>
<i class = "fa fa-desktop custom"> </ i>
<i class = "fa fa-diamant custom"> </ i>
<i class = "fa fa-dot-circle-o custom"> </ i>
<i class = "fa fa-download custom"> </ i>
<i class = "fa fa-edit custom"> </ i>
<i class = "fa fa-ellipsis-h custom"> </ i>
<i class = "fa fa-ellipsis-v custom"> </ i>
<i class = "fa fa-umschlag benutzerdefiniert"> </ i>
<i class = "fa fa -velope-o custom"> </ i>
<i class = "fa fa-Envelope-Square Custom"> </ i>
<i class = "fa fa-eraser custom"> </ i>
<i class = "fa fa-exchange custom"> </ i>
<i class = "fa fa-exclamation custom"> </ i>
<i class = "fa fa-Ausrufezeichen-Kreis benutzerdefiniert"> </ i>
<i class = "fa fa-Ausrufezeichen-Dreieck benutzerdefiniert"> </ i>
<i class = "fa fa-external-link custom"> </ i>
<i class = "fa fa-external-link-square custom"> </ i>
<i class = "fa fa-eye custom"> </ i>
<i class = "fa fa-eye-slash custom"> </ i>
<i class = "fa fa-eyedropper custom"> </ i>
<i class = "fa fa-fax custom"> </ i>
<i class = "fa fa-feed custom"> </ i>
<i class = "fa fa-female custom"> </ i>
<i class = "fa fa-kämpferjet custom"> </ i>
<i class = "fa fa-Dateiarchiv-o benutzerdefiniert"> </ i>
<i class = "fa fa-file-audio-o custom"> </ i>
<i class = "fa fa-file-code-o custom"> </ i>
<i class = "fa fa-file-excel-o custom"> </ i>
<i class = "fa fa-volume-down custom"> </ i>
<i class = "fa fa-file-movie-o custom"> </ i>
<i class = "fa fa-file-pdf-o custom"> </ i>
<i class = "fa fa-file-photo-o custom"> </ i>
<i class = "fa fa-file-picture-o custom"> </ i>
<i class = "fa fa-file-powerpoint-o custom"> </ i>
<i class = "fa fa-file-sound-o custom"> </ i>
<i class = "fa fa-file-video-o custom"> </ i>
<i class = "fa fa-file-word-o custom"> </ i>
<i class = "fa fa-file-sound-o custom"> </ i>
<i class = "fa fa-file-video-o custom"> </ i>
<i class = "fa fa-file-word-o custom"> </ i>
<i class = "fa fa-file-zip-o custom"> </ i>
<i class = "fa fa-film custom"> </ i>
<i class = "fa fa-filter custom"> </ i>
<i class = "fa fa-fire custom"> </ i>
<i class = "fa fa-Feuerlöscher benutzerdefiniert"> </ i>
<i class = "fa fa-flag custom"> </ i>
<i class = "fa fa-flag-checkered custom"> </ i>
<i class = "fa fa-flag-o custom"> </ i>
<i class = "fa fa-flash custom"> </ i>
<i class = "fa fa-flask custom"> </ i>
<i class = "fa fa-flask custom"> </ i>
<i class = "fa fa-folder custom"> </ i>
<i class = "fa fa-folder-o custom"> </ i>
<i class = "fa fa-folder-open custom"> </ i>
<i class = "fa fa-folder-open-o custom"> </ i>
<i class = "fa fa-frown-o custom"> </ i>
<i class = "fa fa-volume-off custom"> </ i>
<i class = "fa fa-gamepad custom"> </ i>
<i class = "fa fa-gavel custom"> </ i>
<i class = "fa fa-gear custom"> </ i>
<i class = "fa fa-gears custom"> </ i>
<i class = "fa fa-gift custom"> </ i>
<i class = "fa fa-glass custom"> </ i>
<i class = "fa fa-globus custom"> </ i>
<i class = "fa fa-graduierungskappe benutzerdefiniert"> </ i>
<i class = "fa fa-group custom"> </ i>
<i class = "fa fa-hand-grab-o custom"> </ i>
<i class = "fa fa-hand-lizard-o custom"> </ i>
<i class = "fa fa-hand-paper-o custom"> </ i>
<i class = "fa fa-hand-peace-o custom"> </ i>
<i class = "fa fa-handzeiger-o benutzerdefiniert"> </ i>
<i class = "fa fa-hand-rock-o custom"> </ i>
<i class = "fa fa-handschere-o custom"> </ i>
<i class = "fa fa-hand-spock-o custom"> </ i>
<i class = "fa fa-hand-paper-o custom"> </ i>
<i class = "fa fa-hdd-o custom"> </ i>
<i class = "fa fa-headphones custom"> </ i>
<i class = "fa fa-heart custom"> </ i>
<i class = "fa fa-heart-o custom"> </ i>
<i class = "fa fa-heartbeat custom"> </ i>
<i class = "fa fa-history custom"> </ i>
<i class = "fa fa-home custom"> </ i>
<i class = "fa fa-hotel custom"> </ i>
<i class = "fa fa-sanduhr custom"> </ i>
<i class = "fa fa-Sanduhr-Start benutzerdefiniert"> </ i>
<i class = "fa fa-Sanduhr-halbe Gewohnheit"> </ i>
<i class = "fa fa-Sanduhr-Ende benutzerdefiniert"> </ i>
<i class = "fa fa-i-cursor custom"> </ i>
<i class = "fa fa-image custom"> </ i>
<i class = "fa fa-inbox custom"> </ i>
<i class = "fa fa-industrial custom"> </ i>
<i class = "fa fa-info custom"> </ i>
<i class = "fa fa-info-circle custom"> </ i>
<i class = "fa fa-institution custom"> </ i>
<i class = "fa fa-key custom"> </ i>
<i class = "fa fa-keyboard-o custom"> </ i>
<i class = "fa fa-language custom"> </ i>
<i class = "fa fa-Laptop custom"> </ i>
<i class = "fa fa-leaf custom"> </ i>
<i class = "fa fa-legal custom"> </ i>
<i class = "fa fa -itrone-o custom"> </ i>
<i class = "fa fa-level-down custom"> </ i>
<i class = "fa fa-level-up custom"> </ i>
<i class = "fa fa-life-bouy custom"> </ i>
<i class = "fa fa-life-ring custom"> </ i>
<i class = "fa fa-life-saver custom"> </ i>
<i class = "fa fa-glühbirne-o custom"> </ i>
<i class = "fa fa-Liniendiagramm benutzerdefiniert"> </ i>
<i class = "fa fa-location-arrow custom"> </ i>
<i class = "fa fa-lock custom"> </ i>
<i class = "fa fa-magic custom"> </ i>
<i class = "fa fa-magnet custom"> </ i>
<i class = "fa fa-mail-forward custom"> </ i>
<i class = "fa fa-mail-reply custom"> </ i>
<i class = "fa fa-mail-reply-all custom"> </ i>
<i class = "fa fa-male custom"> </ i>
<i class = "fa fa-map custom"> </ i>
<i class = "fa fa-map-marker custom"> </ i>
<i class = "fa fa-map-o custom"> </ i>
<i class = "fa fa-map-pin custom"> </ i>
<i class = "fa fa-map-sign benutzerdefiniert"> </ i>
<i class = "fa fa-meh-o custom"> </ i>
<i class = "fa fa-microphone custom"> </ i>
<i class = "fa fa-microphone-slash custom"> </ i>
<i class = "fa fa-minus custom"> </ i>
<i class = "fa fa-minus-circle custom"> </ i>
<i class = "fa fa-minus-square custom"> </ i>
<i class = "fa fa-minus-square-o custom"> </ i>
<i class = "fa fa-mobile custom"> </ i>
<i class = "fa fa-money custom"> </ i>
<i class = "fa fa-moon-o custom"> </ i>
<i class = "fa fa-mortar-board custom"> </ i>
<i class = "fa fa-motorrad custom"> </ i>
<i class = "fa fa-Mauszeiger benutzerdefiniert"> </ i>
<i class = "fa fa-music custom"> </ i>
<i class = "fa fa-users custom"> </ i>
<i class = "fa fa-object-group custom"> </ i>
<i class = "fa fa-object-ungroup custom"> </ i>
<i class = "fa fa-paint-pinsel custom"> </ i>
<i class = "fa fa-paper-plane custom"> </ i>
<i class = "fa fa-paper-plane-o custom"> </ i>
<i class = "fa fa-paw custom"> </ i>
<i class = "fa fa-penle custom"> </ i>
<i class = "fa fa-Bleistift-Quadrat Brauch"> </ i>
<i class = "fa fa-Bleistift-Quadrat-o Brauch"> </ i>
<i class = "fa fa-phone custom"> </ i>
<i class = "fa fa-phone custom"> </ i>
<i class = "fa fa-photo custom"> </ i>
<i class = "fa fa-picture-o custom"> </ i>
<i class = "fa fa-pie-chart custom"> </ i>
<i class = "fa fa-plane custom"> </ i>
<i class = "fa fa-volume-up custom"> </ i>
<i class = "fa fa-plus custom"> </ i>
<i class = "fa fa-plus-circle custom"> </ i>
<i class = "fa fa-plus-square custom"> </ i>
<i class = "fa fa-plus-square-o custom"> </ i>
<i class = "fa fa-power-off custom"> </ i>
<i class = "fa fa-print custom"> </ i>
<i class = "fa fa-Puzzleteil benutzerdefiniert"> </ i>
<i class = "fa fa-qrcode custom"> </ i>
<i class = "fa fa-question custom"> </ i>
<i class = "fa fa-question-circle custom"> </ i>
<i class = "fa fa-quote-left custom"> </ i>
<i class = "fa fa-quote-right custom"> </ i>
<i class = "fa fa-random custom"> </ i>
<i class = "fa fa-recycle custom"> </ i>
<i class = "fa fa-refresh custom"> </ i>
<i class = "fa fa-registrierter Brauch"> </ i>
<i class = "fa fa-custom entfernen"> </ i>
<i class = "fa fa-reorder custom"> </ i>
<i class = "fa fa-reply custom"> </ i>
<i class = "fa fa-reply-all custom"> </ i>
<i class = "fa fa-retweet custom"> </ i>
<i class = "fa fa-road custom"> </ i>
<i class = "fa fa-anchor custom"> </ i>
<i class = "fa fa-rss custom"> </ i>
<i class = "fa fa-rss-square custom"> </ i>
<i class = "fa fa-search custom"> </ i>
<i class = "fa fa-search-minus custom"> </ i>
<i class = "fa fa-search-plus custom"> </ i>
<i class = "fa fa-send custom"> </ i>
<i class = "fa fa-send-o custom"> </ i>
<i class = "fa fa-server custom"> </ i>
<i class = "fa fa-share custom"> </ i>
<i class = "fa fa-share-alt custom"> </ i>
<i class = "fa fa-share-alt-square custom"> </ i>
<i class = "fa fa-share-alt-o custom"> </ i>
<i class = "fa fa-schild benutzerdefiniert"> </ i>
<i class = "fa fa-ship custom"> </ i>
<i class = "fa fa-Warenkorb benutzerdefiniert"> </ i>
<i class = "fa fa-sign-in custom"> </ i>
<i class = "fa fa-abmelden benutzerdefiniert"> </ i>
<i class = "fa fa-signal custom"> </ i>
<i class = "fa fa-sitemap custom"> </ i>
<i class = "fa fa-sliders custom"> </ i>
<i class = "fa fa-smile-o custom"> </ i>
<i class = "fa fa-warning custom"> </ i>
<i class = "fa fa-sort custom"> </ i>
<i class = "fa fa-sort-alpha-asc custom"> </ i>
<i class = "fa fa-sort-alpha-desc custom"> </ i>
<i class = "fa fa-sort-asc custom"> </ i>
<i class = "fa fa-sort-desc custom"> </ i>
<i class = "fa fa-sort-down custom"> </ i>
<i class = "fa fa-sort-numeric-asc custom"> </ i>
<i class = "fa fa-sort-numeric-desc custom"> </ i>
<i class = "fa fa-sort-up custom"> </ i>
<i class = "fa fa-space-shuttle custom"> </ i>
<i class = "fa fa-spinner custom"> </ i>
<i class = "fa fa-löffel custom"> </ i>
<i class = "fa fa-square custom"> </ i>
<i class = "fa fa-square-o custom"> </ i>
<i class = "fa fa-star custom"> </ i>
<i class = "fa fa-star-half custom"> </ i>
<i class = "fa fa-star-half-empty custom"> </ i>
<i class = "fa fa-star-halb-voll benutzerdefiniert"> </ i>
<i class = "fa fa-star-half-o custom"> </ i>
<i class = "fa fa-star-o custom"> </ i>
<i class = "fa fa-Haftnotiz"> </ i>
<i class = "fa fa-sticky-note-o custom"> </ i>
<i class = "fa fa-street-view custom"> </ i>
<i class = "fa fa-Koffer benutzerdefiniert"> </ i>
<i class = "fa fa-sun-o custom"> </ i>
<i class = "fa fa-support custom"> </ i>
<i class = "fa fa-tablet custom"> </ i>
<i class = "fa fa-tachometer custom"> </ i>
<i class = "fa fa-tag custom"> </ i>
<i class = "fa fa-tags custom"> </ i>
<i class = "fa fa -asks custom"> </ i>
<i class = "fa fa-tax custom"> </ i>
<i class = "fa fa -elevision custom"> </ i>
<i class = "fa fa-terminal custom"> </ i>
<i class = "fa fa-thumb-stack custom"> </ i>
<i class = "fa fa-thumbs-down custom"> </ i>
<i class = "fa fa-ticket custom"> </ i>
<i class = "fa fa-times custom"> </ i>
<i class = "fa fa-times-circle custom"> </ i>
<i class = "fa fa-times-circle-o custom"> </ i>
<i class = "fa fa-tint custom"> </ i>
<i class = "fa fa-toggle-down custom"> </ i>
<i class = "fa fa-toggle-left custom"> </ i>
<i class = "fa fa-toggle-off custom"> </ i>
<i class = "fa fa-toggle-on custom"> </ i>
<i class = "fa fa-toggle-right custom"> </ i>
<i class = "fa fa-toggle-up custom"> </ i>
<i class = "fa fa-markengewohnheit"> </ i>
<i class = "fa fa-tras custom"> </ i>
<i class = "fa fa-trash-o custom"> </ i>
<i class = "fa fa-tree custom"> </ i>
<i class = "fa fa-trophy custom"> </ i>
<i class = "fa fa-Truck custom"> </ i>
<i class = "fa fa-rollstuhl custom"> </ i>
<i class = "fa fa-tv custom"> </ i>
<i class = "fa fa-umbrella custom"> </ i>
<i class = "fa fa-university custom"> </ i>
<i class = "fa fa-custom benutzerdefinieren"> </ i>
<i class = "fa fa-refresh-alt custom"> </ i>
<i class = "fa fa-unsortierte benutzerdefinierte"> </ i>
<i class = "fa fa-upload custom"> </ i>
<i class = "fa fa-user custom"> </ i>
<i class = "fa fa-user-plus custom"> </ i>
<i class = "fa fa-user-secret custom"> </ i>
<i class = "fa fa-user-times custom"> </ i>

In diesem Kapitel wird die Verwendung von Font Awesome Hand-Symbolen erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Die folgende Tabelle zeigt die Verwendung und die Ergebnisse der Font Awesome Hand-Symbole. Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Ergebnis
<i class = "fa fa-hand-rock-o custom"> </ i>
<i class = "fa fa-hand-o-left custom"> </ i>
<i class = "fa fa-hand-paper-o custom"> </ i>
<i class = "fa fa-hand-rock-o custom"> </ i>
<i class = "fa fa-hand-stop-o custom"> </ i>
<i class = "fa fa-thumbs-o-up custom"> </ i>
<i class = "fa fa-hand-lizard-o custom"> </ i>
<i class = "fa fa-hand-o-right custom"> </ i>
<i class = "fa fa-hand-peace-o custom"> </ i>
<i class = "fa fa-handschere-o custom"> </ i>
<i class = "fa fa-thumbs-down custom"> </ i>
<i class = "fa fa-thumbs-up custom"> </ i>
<i class = "fa fa-hand-o-up custom"> </ i>
<i class = "fa fa-handzeiger-o benutzerdefiniert"> </ i>
<i class = "fa fa-hand-spock-o custom"> </ i>
<i class = "fa fa-thumbs-o-down custom"> </ i>

In diesem Kapitel wird die Verwendung von Font Awesome Transportation-Symbolen erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Die folgende Tabelle zeigt die Verwendung und die Ergebnisse der Symbole für Font Awesome Transportation. Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Ergebnis
<i class = "fa fa-ambulance custom"> </ i>
<i class = "fa fa-automobile custom"> </ i>
<i class = "fa fa-bicycle custom"> </ i>
<i class = "fa fa-bus custom"> </ i>
<i class = "fa fa-cab custom"> </ i>
<i class = "fa fa-car custom"> </ i>
<i class = "fa fa-kämpferjet custom"> </ i>
<i class = "fa fa-motorrad custom"> </ i>
<i class = "fa fa-plane custom"> </ i>
<i class = "fa fa-rocket custom"> </ i>
<i class = "fa fa-ship custom"> </ i>
<i class = "fa fa-space-shuttle custom"> </ i>
<i class = "fa fa-subway custom"> </ i>
<i class = "fa fa-tax custom"> </ i>
<i class = "fa fa-train custom"> </ i>
<i class = "fa fa-Truck custom"> </ i>
<i class = "fa fa-rollstuhl custom"> </ i>

In diesem Kapitel wird die Verwendung von Font Awesome Gender-Symbolen erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Die folgende Tabelle zeigt die Verwendung und die Ergebnisse der Symbole für Font Awesome Gender. Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Ergebnis
<i class = "fa fa-genderless custom"> </ i>
<i class = "fa fa-intersex custom"> </ i>
<i class = "fa fa-mars custom"> </ i>
<i class = "fa fa-mars-double custom"> </ i>
<i class = "fa fa-mars-stroke custom"> </ i>
<i class = "fa fa-mars-stroke-h custom"> </ i>
<i class = "fa fa-mars-stroke-v custom"> </ i>
<i class = "fa fa-mercury custom"> </ i>
<i class = "fa fa-neuter custom"> </ i>
<i class = "fa fa-transgender custom"> </ i>
<i class = "fa fa-transgender-alt custom"> </ i>
<i class = "fa fa-venus custom"> </ i>
<i class = "fa fa-venus-double custom"> </ i>
<i class = "fa fa-venus-mars custom"> </ i>

In diesem Kapitel wird die Verwendung von Font Awesome-Dateitypsymbolen erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Die folgende Tabelle zeigt die Verwendung und die Ergebnisse von Font Awesome-Dateitypsymbolen. Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Ergebnis
<i class = "fa fa-file custom"> </ i>
<i class = "fa fa-Dateiarchiv-o benutzerdefiniert"> </ i>
<i class = "fa fa-file-audio-o custom"> </ i>
<i class = "fa fa-file-code-o custom"> </ i>
<i class = "fa fa-file-excel-o custom"> </ i>
<i class = "fa fa-file-image-o custom"> </ i>
<i class = "fa fa-file-movie-o custom"> </ i>
<i class = "fa fa-file-o custom"> </ i>
<i class = "fa fa-file-pdf-o custom"> </ i>
<i class = "fa fa-file-photo-o custom"> </ i>
<i class = "fa fa-file-picture-o custom"> </ i>
<i class = "fa fa-file-powerpoint-o custom"> </ i>
<i class = "fa fa-file-video-o custom"> </ i>
<i class = "fa fa-file-word-o custom"> </ i>
<i class = "fa fa-file-zip-o custom"> </ i>
<i class = "fa fa-file-sound-o custom"> </ i>
<i class = "fa fa-file-text custom"> </ i>
<i class = "fa fa-file-text-o custom"> </ i>

In diesem Kapitel wird die Verwendung von Font Awesome Spinner-Symbolen erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Die folgende Tabelle zeigt die Verwendung und die Ergebnisse der Font Awesome Spinner-Symbole. Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Ergebnis
<i class = "fa fa-circle-o-notch custom"> </ i>
<i class = "fa fa-cog custom"> </ i>
<i class = "fa fa-gear custom"> </ i>
<i class = "fa fa-refresh custom"> </ i>
<i class = "fa fa-spinner custom"> </ i>

In diesem Kapitel wird die Verwendung von Font Awesome Form Control-Symbolen erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Die folgende Tabelle zeigt die Verwendung und die Ergebnisse der Symbole für die großartige Formularsteuerung. Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Ergebnis
<i class = "fa fa-check-square custom"> </ i>
<i class = "fa fa-check-square-o custom"> </ i>
<i class = "fa fa-circle custom"> </ i>
<i class = "fa fa-circle-o custom"> </ i>
<i class = "fa fa-dot-circle-o custom"> </ i>
<i class = "fa fa-minus-square custom"> </ i>
<i class = "fa fa-minus-square-o custom"> </ i>
<i class = "fa fa-plus-square custom"> </ i>
<i class = "fa fa-plus-square-o custom"> </ i>
<i class = "fa fa-square custom"> </ i>
<i class = "fa fa-square-o custom"> </ i>

In diesem Kapitel wird die Verwendung von Font Awesome Payment-Symbolen erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Die folgende Tabelle zeigt die Verwendung und die Ergebnisse der Symbole für Font Awesome Payment. Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Ergebnis
<i class = "fa fa-cc-amex custom"> </ i>
<i class = "fa fa-cc-diners-club custom"> </ i>
<i class = "fa fa-cc-remove custom"> </ i>
<i class = "fa fa-cc-jcb custom"> </ i>
<i class = "fa fa-cc-mastercard custom"> </ i>
<i class = "fa fa-cc-paypal custom"> </ i>
<i class = "fa fa-cc-stripe custom"> </ i>
<i class = "fa fa-cc-visum custom"> </ i>
<i class = "fa fa-Kreditkarte benutzerdefiniert"> </ i>

In diesem Kapitel wird die Verwendung von Font Awesome Chart-Symbolen erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<html>
   <head>
      <link rel="stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Die folgende Tabelle zeigt die Verwendung und die Ergebnisse der Font Awesome Chart-Symbole. Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Ergebnis
<i class = "fa fa-area-chart custom"> </ i>
<i class = "fa fa-bar-chart custom"> </ i>
<i class = "fa fa-Balkendiagramm-o benutzerdefiniert"> </ i>
<i class = "fa fa-Liniendiagramm benutzerdefiniert"> </ i>
<i class = "fa fa-pie-chart custom"> </ i>

In diesem Kapitel wird die Verwendung von Font Awesome Currency-Symbolen erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Die folgende Tabelle zeigt die Verwendung und die Ergebnisse der Symbole für Font Awesome Currency. Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Ergebnis
<i class = "fa fa-bitcoin custom"> </ i>
<i class = "fa fa-btc custom"> </ i>
<i class = "fa fa-cny custom"> </ i>
<i class = "fa fa-dollar custom"> </ i>
<i class = "fa fa-eur custom"> </ i>
<i class = "fa fa-euro custom"> </ i>
<i class = "fa fa-gbp custom"> </ i>
<i class = "fa fa-gg custom"> </ i>
<i class = "fa fa-gg-circle custom"> </ i>
<i class = "fa fa-ils custom"> </ i>
<i class = "fa fa-inr custom"> </ i>
<i class = "fa fa-jpy custom"> </ i>
<i class = "fa fa-krw custom"> </ i>
<i class = "fa fa-money custom"> </ i>
<i class = "fa fa-rmb custom"> </ i>
<i class = "fa fa-ruble custom"> </ i>
<i class = "fa fa-rub custom"> </ i>
<i class = "fa fa-ruble custom"> </ i>
<i class = "fa fa-rupee custom"> </ i>
<i class = "fa fa-shekel custom"> </ i>
<i class = "fa fa-sheqel custom"> </ i>
<i class = "fa fa-try custom"> </ i>
<i class = "fa fa-turkish-lira custom"> </ i>
<i class = "fa fa-usd custom"> </ i>
<i class = "fa fa-won custom"> </ i>
<i class = "fa fa-yen custom"> </ i>

In diesem Kapitel wird die Verwendung von Font Awesome Text Editor-Symbolen erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Die folgende Tabelle zeigt die Verwendung und die Ergebnisse der Font Awesome Text Editor-Symbole. Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Ergebnis
<i class = "fa fa-align-center custom"> </ i>
<i class = "fa fa-align-adjust custom"> </ i>
<i class = "fa fa-align-left custom"> </ i>
<i class = "fa fa-align-right custom"> </ i>
<i class = "fa fa-bold custom"> </ i>
<i class = "fa fa-chain custom"> </ i>
<i class = "fa fa-chain-break custom"> </ i>
<i class = "fa fa-clipboard custom"> </ i>
<i class = "fa fa-column custom"> </ i>
<i class = "fa fa-copy custom"> </ i>
<i class = "fa fa-cut custom"> </ i>
<i class = "fa fa-dedent custom"> </ i>
<i class = "fa fa-eraser custom"> </ i>
<i class = "fa fa-file custom"> </ i>
<i class = "fa fa-file-o custom"> </ i>
<i class = "fa fa-file-text custom"> </ i>
<i class = "fa fa-file-text-o custom"> </ i>
<i class = "fa fa-files-o custom"> </ i>
<i class = "fa fa-floppy-o custom"> </ i>
<i class = "fa fa-font custom"> </ i>
<i class = "fa fa-header custom"> </ i>
<i class = "fa fa-indent custom"> </ i>
<i class = "fa fa-italic custom"> </ i>
<i class = "fa fa-link custom"> </ i>
<i class = "fa fa-list custom"> </ i>
<i class = "fa fa-list-alt custom"> </ i>
<i class = "fa fa-list-ol custom"> </ i>
<i class = "fa fa-list-ul custom"> </ i>
<i class = "fa fa-outent custom"> </ i>
<i class = "fa fa-Büroklammer benutzerdefiniert"> </ i>
<i class = "fa fa -agraph custom"> </ i>
<i class = "fa fa-paste custom"> </ i>
<i class = "fa fa-repeat custom"> </ i>
<i class = "fa fa-links drehen custom"> </ i>
<i class = "fa fa-rechts drehen custom"> </ i>
<i class = "fa fa-save custom"> </ i>
<i class = "fa fa-scissors custom"> </ i>
<i class = "fa fa-strikethrough custom"> </ i>
<i class = "fa fa-subscript custom"> </ i>
<i class = "fa fa-table custom"> </ i>
<i class = "fa fa-text-heigh custom"> </ i>
<i class = "fa fa-text-width custom"> </ i>
<i class = "fa fa-th custom"> </ i>
<i class = "fa fa-th-large custom"> </ i>
<i class = "fa fa-th-list custom"> </ i>
<i class = "fa fa-underline custom"> </ i>
<i class = "fa fa-custom rückgängig machen"> </ i>
<i class = "fa fa-unlink custom"> </ i>

In diesem Kapitel wird die Verwendung von Font Awesome Directional-Symbolen erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Die folgende Tabelle zeigt die Verwendung und die Ergebnisse von Font Awesome Directional-Symbolen. Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Ergebnis
<i class = "fa fa-angle-double-down custom"> </ i>
<i class = "fa fa-angle-double-left custom"> </ i>
<i class = "fa fa-angle-double-right custom"> </ i>
<i class = "fa fa-angle-double-up custom"> </ i>
<i class = "fa fa-angle-down custom"> </ i>
<i class = "fa fa-angle-left custom"> </ i>
<i class = "fa fa-angle-right custom"> </ i>
<i class = "fa fa-angle-up custom"> </ i>
<i class = "fa fa-Pfeil-Kreis-nach unten benutzerdefiniert"> </ i>
<i class = "fa fa-Pfeil-Kreis-links benutzerdefiniert"> </ i>
<i class = "fa fa-Pfeil-Kreis-rechts benutzerdefiniert"> </ i>
<i class = "fa fa-Pfeil-Kreis-benutzerdefiniert"> </ i>
<i class = "fa fa-Pfeil-Kreis-o-unten Benutzerdefiniert"> </ i>
<i class = "fa fa-Pfeil-Kreis-o-links benutzerdefiniert"> </ i>
<i class = "fa fa-Pfeil-Kreis-o-rechts Benutzerdefiniert"> </ i>
<i class = "fa fa-Pfeil-Kreis-o-up benutzerdefiniert"> </ i>
<i class = "fa fa-Pfeil nach unten benutzerdefiniert"> </ i>
<i class = "fa fa-pfeil-links custom"> </ i>
<i class = "fa fa-pfeil-rechts custom"> </ i>
<i class = "fa fa-Pfeil nach oben Benutzerdefiniert"> </ i>
<i class = "fa fa-arrows custom"> </ i>
<i class = "fa fa-arrows-alt custom"> </ i>
<i class = "fa fa-arrows-h custom"> </ i>
<i class = "fa fa-arrows-v custom"> </ i>
<i class = "fa fa-caret-down custom"> </ i>
<i class = "fa fa-caret-left custom"> </ i>
<i class = "fa fa-caret-right custom"> </ i>
<i class = "fa fa-caret-up custom"> </ i>
<i class = "fa fa-caret-square-o-down custom"> </ i>
<i class = "fa fa-caret-square-o-left custom"> </ i>
<i class = "fa fa-caret-square-o-right custom"> </ i>
<i class = "fa fa-caret-square-o-up custom"> </ i>
<i class = "fa fa-chevron-circle-down custom"> </ i>
<i class = "fa fa-chevron-circle-left custom"> </ i>
<i class = "fa fa-chevron-circle-right custom"> </ i>
<i class = "fa fa-chevron-circle-up custom"> </ i>
<i class = "fa fa-chevron-down custom"> </ i>
<i class = "fa fa-chevron-left custom"> </ i>
<i class = "fa fa-chevron-right custom"> </ i>
<i class = "fa fa-chevron-up custom"> </ i>
<i class = "fa fa-hand-o-down custom"> </ i>
<i class = "fa fa-hand-o-left custom"> </ i>
<i class = "fa fa-hand-o-right custom"> </ i>
<i class = "fa fa-hand-o-up custom"> </ i>
<i class = "fa fa-langer Pfeil nach unten benutzerdefiniert"> </ i>
<i class = "fa fa-langpfeil-links custom"> </ i>
<i class = "fa fa-langer-pfeil-rechter Brauch"> </ i>
<i class = "fa fa-langpfeil-hoch benutzerdefiniert"> </ i>
<i class = "fa fa-toggle-down custom"> </ i>
<i class = "fa fa-toggle-left custom"> </ i>
<i class = "fa fa-toggle-right custom"> </ i>
<i class = "fa fa-toggle-up custom"> </ i>
<i class = "fa fa-exchange custom"> </ i>

In diesem Kapitel wird die Verwendung von Font Awesome Video Player-Symbolen erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Die folgende Tabelle zeigt die Verwendung und die Ergebnisse der Font Awesome Video Player-Symbole. Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Symbole
<i class = "fa fa-arrows-alt custom"> </ i>
<i class = "fa fa-backward custom"> </ i>
<i class = "fa fa-compress custom"> </ i>
<i class = "fa fa-eject custom"> </ i>
<i class = "fa fa-expand custom"> </ i>
<i class = "fa fa-fast-backward custom"> </ i>
<i class = "fa fa-Schnellvorlauf benutzerdefiniert"> </ i>
<i class = "fa fa-forward custom"> </ i>
<i class = "fa fa-play-circle custom"> </ i>
<i class = "fa fa-play-circle-o custom"> </ i>
<i class = "fa fa-random custom"> </ i>
<i class = "fa fa-step-backward custom"> </ i>
<i class = "fa fa-stop custom"> </ i>
<i class = "fa fa-pause custom"> </ i>
<i class = "fa fa-play custom"> </ i>
<i class = "fa fa-youtube-play custom"> </ i>

In diesem Kapitel wird die Verwendung von Font Awesome Brand-Symbolen erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Die folgende Tabelle zeigt die Verwendung und die Ergebnisse der Font Awesome Brand-Symbole. Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Symbole
<i class = "fa fa-500px custom"> </ i>
<i class = "fa fa-amazon custom"> </ i>
<i class = "fa fa-android custom"> </ i>
<i class = "fa fa-angellist custom"> </ i>
<i class = "fa fa-adn custom"> </ i>
<i class = "fa fa-apple custom"> </ i>
<i class = "fa fa-behance custom"> </ i>
<i class = "fa fa-behance-square custom"> </ i>
<i class = "fa fa-bitbucket custom"> </ i>
<i class = "fa fa-bitbucket-square custom"> </ i>
<i class = "fa fa-btc custom"> </ i>
<i class = "fa fa-black-tie custom"> </ i>
<i class = "fa fa-btc custom"> </ i>
<i class = "fa fa-buysellads custom"> </ i>
<i class = "fa fa-cc-amex custom"> </ i>
<i class = "fa fa-cc-diners-club custom"> </ i>
<i class = "fa fa-cc-remove custom"> </ i>
<i class = "fa fa-cc-jcb custom"> </ i>
<i class = "fa fa-cc-mastercard custom"> </ i>
<i class = "fa fa-cc-paypal custom"> </ i>
<i class = "fa fa-cc-stripe custom"> </ i>
<i class = "fa fa-cc-visum custom"> </ i>
<i class = "fa fa-chrome custom"> </ i>
<i class = "fa fa-codepen custom"> </ i>
<i class = "fa fa-connectdevelop custom"> </ i>
<i class = "fa fa-contao custom"> </ i>
<i class = "fa fa-css3 custom"> </ i>
<i class = "fa fa-dashcube custom"> </ i>
<i class = "fa fa-köstlicher Brauch"> </ i>
<i class = "fa fa-deviantart custom"> </ i>
<i class = "fa fa-digg custom"> </ i>
<i class = "fa fa-dribbble custom"> </ i>
<i class = "fa fa-dropbox custom"> </ i>
<i class = "fa fa-drupal custom"> </ i>
<i class = "fa fa-Empire custom"> </ i>
<i class = "fa fa-expeditedssl custom"> </ i>
<i class = "fa fa-facebook custom"> </ i>
<i class = "fa fa-facebook-f custom"> </ i>
<i class = "fa fa-facebook-offizieller Brauch"> </ i>
<i class = "fa fa-facebook-square custom"> </ i>
<i class = "fa fa-firefox custom"> </ i>
<i class = "fa fa-flickr custom"> </ i>
<i class = "fa fa-fonticons custom"> </ i>
<i class = "fa fa-forumbee custom"> </ i>
<i class = "fa fa-foursquare custom"> </ i>
<i class = "fa fa-ge custom"> </ i>
<i class = "fa fa-get -pocket custom"> </ i>
<i class = "fa fa-gg custom"> </ i>
<i class = "fa fa-gg-circle custom"> </ i>
<i class = "fa fa-git custom"> </ i>
<i class = "fa fa-git-square custom"> </ i>
<i class = "fa fa-github custom"> </ i>
<i class = "fa fa-github-alt custom"> </ i>
<i class = "fa fa-github-square custom"> </ i>
<i class = "fa fa-gratipay custom"> </ i>
<i class = "fa fa-google custom"> </ i>
<i class = "fa fa-google-plus custom"> </ i>
<i class = "fa fa-google-plus-square custom"> </ i>
<i class = "fa fa-youtube-play custom"> </ i>
<i class = "fa fa-gratipay custom"> </ i>
<i class = "fa fa-hacker-news custom"> </ i>
<i class = "fa fa-houzz custom"> </ i>
<i class = "fa fa-html5 custom"> </ i>
<i class = "fa fa-instagram custom"> </ i>
<i class = "fa fa-internet-explorer custom"> </ i>
<i class = "fa fa-ioxhost custom"> </ i>
<i class = "fa fa-joomla custom"> </ i>
<i class = "fa fa-jsfiddle custom"> </ i>
<i class = "fa fa-lastfm custom"> </ i>
<i class = "fa fa-lastfm-square custom"> </ i>
<i class = "fa fa-leanpub custom"> </ i>
<i class = "fa fa-linkedin custom"> </ i>
<i class = "fa fa-linkedin-square custom"> </ i>
<i class = "fa fa-linux custom"> </ i>
<i class = "fa fa-maxcdn custom"> </ i>
<i class = "fa fa-meanpath custom"> </ i>
<i class = "fa fa-medium custom"> </ i>
<i class = "fa fa-odnoklassniki custom"> </ i>
<i class = "fa fa-odnoklassniki-square custom"> </ i>
<i class = "fa fa-opencart custom"> </ i>
<i class = "fa fa-opera custom"> </ i>
<i class = "fa fa-optin-monster custom"> </ i>
<i class = "fa fa-openid custom"> </ i>
<i class = "fa fa-pagelines custom"> </ i>
<i class = "fa fa-youtube custom"> </ i>
<i class = "fa fa-pied-piper custom"> </ i>
<i class = "fa fa-pied-piper-alt custom"> </ i>
<i class = "fa fa-pinterest custom"> </ i>
<i class = "fa fa-pinterest-p custom"> </ i>
<i class = "fa fa-pinterest-square custom"> </ i>
<i class = "fa fa-qq custom"> </ i>
<i class = "fa fa-ra custom"> </ i>
<i class = "fa fa-rebel custom"> </ i>
<i class = "fa fa-reddit custom"> </ i>
<i class = "fa fa-renren custom"> </ i>
<i class = "fa fa-amazon custom"> </ i>
<i class = "fa fa-safari custom"> </ i>
<i class = "fa fa-sellsy custom"> </ i>
<i class = "fa fa-youtube-square custom"> </ i>
<i class = "fa fa-share-alt custom"> </ i>
<i class = "fa fa-share-alt-square custom"> </ i>
<i class = "fa fa-shirtsinbulk custom"> </ i>
<i class = "fa fa-simplybuilt custom"> </ i>
<i class = "fa fa-skyatlas custom"> </ i>
<i class = "fa fa-skype custom"> </ i>
<i class = "fa fa-slack custom"> </ i>
<i class = "fa fa-yc-square custom"> </ i>
<i class = "fa fa-soundcloud custom"> </ i>
<i class = "fa fa-spotify custom"> </ i>
<i class = "fa fa-stack-exchange custom"> </ i>
<i class = "fa fa-stack-overflow custom"> </ i>
<i class = "fa fa-steam custom"> </ i>
<i class = "fa fa-steam-square custom"> </ i>
<i class = "fa fa-stumbleupon custom"> </ i>
<i class = "fa fa-stumbleupon-circle custom"> </ i>
<i class = "fa fa-tencent-weibo custom"> </ i>
<i class = "fa fa-trello custom"> </ i>
<i class = "fa fa-tripadvisor custom"> </ i>
<i class = "fa fa-tumblr custom"> </ i>
<i class = "fa fa-tumblr-square custom"> </ i>
<i class = "fa fa-yahoo custom"> </ i>
<i class = "fa fa-twitter custom"> </ i>
<i class = "fa fa-twitter-square custom"> </ i>
<i class = "fa fa-viacoin custom"> </ i>
<i class = "fa fa-vimeo custom"> </ i>
<i class = "fa fa-vimeo-square custom"> </ i>
<i class = "fa fa-Vine custom"> </ i>
<i class = "fa fa-vk custom"> </ i>
<i class = "fa fa-wechat custom"> </ i>
<i class = "fa fa-weibo custom"> </ i>
<i class = "fa fa-weixin custom"> </ i>
<i class = "fa fa-whatsapp custom"> </ i>
<i class = "fa fa-wikipedia-w custom"> </ i>
<i class = "fa fa-windows custom"> </ i>
<i class = "fa fa-wordpress custom"> </ i>
<i class = "fa fa-xing custom"> </ i>
<i class = "fa fa-xing-square custom"> </ i>
<i class = "fa fa-y-combinator custom"> </ i>
<i class = "fa fa-y-combinator-square custom"> </ i>
<i class = "fa fa-yc custom"> </ i>

In diesem Kapitel wird die Verwendung von Font Awesome Medical-Symbolen erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

Die folgende Tabelle zeigt die Verwendung und die Ergebnisse der Font Awesome Medical-Symbole. Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Symbol
<i class = "fa fa-ambulance custom"> </ i>
<i class = "fa fa-h-square custom"> </ i>
<i class = "fa fa-heart custom"> </ i>
<i class = "fa fa-heart-o custom"> </ i>
<i class = "fa fa-heartbeat custom"> </ i>
<i class = "fa fa-hospital-o custom"> </ i>
<i class = "fa fa-medkit custom"> </ i>
<i class = "fa fa-plus-square custom"> </ i>
<i class = "fa fa-stethoscope custom"> </ i>
<i class = "fa fa-user-md custom"> </ i>
<i class = "fa fa-rollstuhl custom"> </ i>

Google bietet eine Reihe von 750 Symbolen an, die unter "Richtlinien für das Materialdesign" erstellt wurden. Diese werden als bezeichnet Material DesignSymbole. Diese Symbole sind einfach und unterstützen alle modernen Webbrowser. Da diese Symbole vektorbasiert sind, sind sie auch skalierbar. Um diese Symbole zu verwenden, müssen wir die Schriftart (Bibliothek) laden.material-icons.

Laden der Schriftart (Bibliothek)

Um die Material-Icons-Bibliothek zu laden, kopieren Sie die folgende Zeile und fügen Sie sie in den Abschnitt <head> einer Webseite ein.

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

Verwenden des Symbols

Die Materialsymbole von Google bieten eine lange Liste von Symbolen. Wählen Sie eine davon aus und fügen Sie den Namen der Symbolklasse zu einem beliebigen HTML-Element im <body> -Tag hinzu. Im folgenden Beispiel haben wir das Symbol mit dem Namen verwendetaccessibility das gehört zur Aktionskategorie.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
   </head>
	
   <body>
      <i class = "material-icons">accessibility</i>
   </body>
	
</html>

Es wird die folgende Ausgabe erzeugt -

Größe definieren

Sie können die Größe eines Symbols erhöhen oder verringern, indem Sie seine Größe im CSS definieren und zusammen mit dem Klassennamen wie unten gezeigt verwenden. Im folgenden Beispiel haben wir die Größe als 6 em deklariert.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.mysize {font-size: 6em;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons mysize">accessibility</i>
   </body>
	
</html>

Es wird die folgende Ausgabe erzeugt -

Farbe definieren

Mit dem CSS können Sie die Farbe eines Symbols definieren. Das folgende Beispiel zeigt, wie Sie die Farbe eines aufgerufenen Symbols ändern könnenaccessibility.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 6em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Es wird die folgende Ausgabe erzeugt -

Liste der Kategorien

Die Material Icons-Schriftart von Google enthält 519 Symbole in den folgenden Kategorien:

Aktionssymbole
Warnsymbole
AV-Symbole
Kommunikationssymbole
Inhaltssymbole
Gerätesymbole
Editor-Symbole
Dateisymbole
Hardware-Symbole
Bildsymbole
Kartensymbole
Navigationssymbole
Benachrichtigungssymbole
Soziale Ikonen
Symbole umschalten

Um eines dieser Symbole zu verwenden, müssen Sie den Klassennamen in den in diesem Kapitel angegebenen Programmen durch den Klassennamen des gewünschten Symbols ersetzen. In den kommenden Kapiteln dieser Einheit (Materialsymbole) haben wir die Verwendung und die jeweiligen Ausgaben verschiedener Materialsymbole kategorisch erläutert.

In diesem Kapitel wird die Verwendung der Aktionssymbole von Google (Material) erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Die folgende Tabelle enthält die Verwendung und die Ergebnisse der Aktionssymbole von Google (Material). Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Ergebnis
<i class = "material-icons custom"> 3d_rotation </ i>	3d_rotation
<i class = "material-icons custom"> Barrierefreiheit </ i>	Barrierefreiheit
<i class = "material-icons custom"> account_balance </ i>	Kontostand
<i class = "material-icons custom"> account_balance_wallet </ i>	account_balance_wallet
<i class = "material-icons custom"> account_box </ i>	account_box
<i class = "material-icons custom"> account_circle </ i>	account_circle
<i class = "material-icons custom"> add_shopping_cart </ i>	add_shopping_cart
<i class = "material-icons custom"> Alarm </ i>	Alarm
<i class = "material-icons custom"> alarm_add </ i>	alarm_add
<i class = "material-icons custom"> alarm_off </ i>	alarm_off
<i class = "material-icons custom"> alarm_on </ i>	alarm_on
<i class = "material-icons custom"> android </ i>	Android
<i class = "material-icons custom"> Ankündigung </ i>	Ankündigung
<i class = "material-icons custom"> Seitenverhältnis </ i>	Seitenverhältnis
<i class = "material-icons custom"> Bewertung </ i>	Bewertung
<i class = "material-icons custom"> Zuweisung </ i>	Zuordnung
<i class = "material-icons custom"> Zuweisungsind </ i>	Zuordnung_ind
<i class = "material-icons custom"> Zuweisungsliste </ i>	Zuweisungsliste
<i class = "material-icons custom"> Zuweisungsreturn </ i>	Zuweisung_return
<i class = "material-icons custom"> Zuweisung zurückgegeben </ i>	Zuordnung_returned
<i class = "material-icons custom"> Zuweisung_umgedreht_in </ i>	Zuordnung_umgedreht_in
<i class = "material-icons custom"> automatisch erneuern </ i>	Automatische Verlängerung
<i class = "material-icons custom"> backup </ i>	Backup
<i class = "material-icons custom"> Buch </ i>	Buch
<i class = "material-icons custom"> Lesezeichen </ i>	Lesezeichen
<i class = "material-icons custom"> bookmark_border </ i>	bookmark_border
<i class = "material-icons custom"> bug_report </ i>	Fehlerbericht
<i class = "material-icons custom"> build </ i>	bauen
<i class = "material-icons custom"> zwischengespeichert </ i>	zwischengespeichert
<i class = "material-icons custom"> camera_enhance </ i>	camera_enhance
<i class = "material-icons custom"> card_giftcard </ i>	card_giftcard
<i class = "material-icons custom"> card_membership </ i>	card_membership
<i class = "material-icons custom"> card_travel </ i>	card_travel
<i class = "material-icons custom"> change_history </ i>	Geschichte verändern
<i class = "material-icons custom"> check_circle </ i>	check_circle
<i class = "material-icons custom"> chrome_reader_mode </ i>	chrome_reader_mode
<i class = "material-icons custom"> Klasse </ i>	Klasse
<i class = "material-icons custom"> Code </ i>	Code
<i class="material-icons custom">credit_card</i>	credit_card
<i class="material-icons custom">dashboard</i>	dashboard
<i class="material-icons custom">delete</i>	delete
<i class="material-icons custom">description</i>	description
<i class="material-icons custom">dns</i>	dns
<i class="material-icons custom">done</i>	done
<i class="material-icons custom">done_all</i>	done_all
<i class="material-icons custom">eject</i>	eject
<i class="material-icons custom">event</i>	event
<i class="material-icons custom">event_seat</i>	event_seat
<i class="material-icons custom">exit_to_app</i>	exit_to_app
<i class="material-icons custom">explore</i>	explore
<i class="material-icons custom">extension</i>	extension
<i class="material-icons custom">face</i>	face
<i class="material-icons custom">favorite</i>	favorite
<i class="material-icons custom">favorite_border</i>	favorite_border
<i class="material-icons custom">feedback</i>	feedback
<i class="material-icons custom">find_in_page</i>	find_in_page
<i class="material-icons custom">find_replace</i>	find_replace
<i class="material-icons custom">flight_land</i>	flight_land
<i class="material-icons custom">flight_takeoff</i>	flight_takeoff
<i class="material-icons custom">flip_to_back</i>	flip_to_back
<i class="material-icons custom">flip_to_front</i>	flip_to_front
<i class="material-icons custom">get_app</i>	get_app
<i class="material-icons custom">gif</i>	gif
<i class="material-icons custom">grade</i>	grade
<i class="material-icons custom">group_work</i>	group_work
<i class="material-icons custom">help</i>	help
<i class="material-icons custom">help_outline</i>	help_outline
<i class="material-icons custom">highlight_off</i>	highlight_off
<i class="material-icons custom">history</i>	history
<i class="material-icons custom">home</i>	home
<i class="material-icons custom">hourglass_empty</i>	hourglass_empty
<i class="material-icons custom">hourglass_full</i>	hourglass_full
<i class="material-icons custom">http</i>	http
<i class="material-icons custom">https</i>	https
<i class="material-icons custom">info</i>	info
<i class="material-icons custom">info_outline</i>	info_outline
<i class="material-icons custom">input</i>	input
<i class="material-icons custom">invert_colors</i>	invert_colors
<i class="material-icons custom">label</i>	label
<i class="material-icons custom">label_outline</i>	label_outline
<i class="material-icons custom">language</i>	language
<i class="material-icons custom">launch</i>	launch
<i class="material-icons custom">list</i>	list
<i class="material-icons custom">lock</i>	lock
<i class="material-icons custom">lock_open</i>	lock_open
<i class="material-icons custom">lock_outline</i>	lock_outline
<i class="material-icons custom">loyalty</i>	loyalty
<i class="material-icons custom">markunread_mailbox</i>	markunread_mailbox
<i class="material-icons custom">note_add</i>	note_add
<i class="material-icons custom">offline_pin</i>	offline_pin
<i class="material-icons custom">open_in_browser</i>	open_in_browser
<i class="material-icons custom">open_in_new</i>	open_in_new
<i class="material-icons custom">open_with</i>	open_with
<i class="material-icons custom">pageview</i>	pageview
<i class="material-icons custom">payment</i>	payment
<i class="material-icons custom">perm_camera_mic</i>	perm_camera_mic
<i class="material-icons custom">perm_contact_cale</i>	perm_contact_cale
<i class="material-icons custom">perm_data_settings</i>	perm_data_settings
<i class="material-icons custom">perm_device_information</i>	perm_device_information
<i class="material-icons custom">perm_identity</i>	perm_identity
<i class="material-icons custom">perm_media</i>	perm_media
<i class="material-icons custom">perm_phone_msg</i>	perm_phone_msg
<i class="material-icons custom">perm_scan_wifi</i>	perm_scan_wifi
<i class="material-icons custom">picture_in_picture</i>	picture_in_picture
<i class="material-icons custom">play_for_work</i>	play_for_work
<i class="material-icons custom">polymer</i>	polymer
<i class="material-icons custom">power_settings_new</i>	power_settings_new
<i class="material-icons custom">print</i>	print
<i class="material-icons custom">query_builder</i>	query_builder
<i class="material-icons custom">question_answer</i>	question_answer
<i class="material-icons custom">receipt</i>	receipt
<i class="material-icons custom">redeem</i>	redeem
<i class="material-icons custom">reorder</i>	reorder
<i class="material-icons custom">report_problem</i>	report_problem
<i class="material-icons custom">restore</i>	restore
<i class="material-icons custom">room</i>	room
<i class="material-icons custom">schedule</i>	schedule
<i class="material-icons custom">search</i>	search
<i class="material-icons custom">settings</i>	settings
<i class="material-icons custom">settings_applications</i>	settings_applications
<i class="material-icons custom">settings_bluetooth</i>	settings_bluetooth
<i class="material-icons custom">settings_brightness</i>	settings_brightness
<i class="material-icons custom">settings_cell</i>	settings_cell
<i class="material-icons custom">settings_ethernet</i>	settings_ethernet
<i class="material-icons custom">settings_input_antenna</i>	settings_input_antenna
<i class="material-icons custom">settings_input_component</i>	settings_input_component
<i class="material-icons custom">settings_input_hdmi</i>	settings_input_hdmi
<i class="material-icons custom">settings_input_svideo</i>	settings_input_svideo
<i class="material-icons custom">settings_overscan</i>	settings_overscan
<i class="material-icons custom">settings_phone</i>	settings_phone
<i class="material-icons custom">settings_power</i>	settings_power
<i class="material-icons custom">settings_remote</i>	settings_remote
<i class="material-icons custom">settings_voice</i>	settings_voice
<i class="material-icons custom">shop</i>	shop
<i class="material-icons custom">shop_two</i>	shop_two
<i class="material-icons custom">shopping_basket</i>	shopping_basket
<i class="material-icons custom">shopping_cart</i>	shopping_cart
<i class="material-icons custom">speaker_notes</i>	speaker_notes
<i class="material-icons custom">spellcheck</i>	spellcheck
<i class="material-icons custom">star_rate</i>	star_rate
<i class="material-icons custom">stars</i>	stars
<i class="material-icons custom">store</i>	store
<i class="material-icons custom">subject</i>	subject
<i class="material-icons custom">supervisor_account</i>	supervisor_account
<i class="material-icons custom">swap_horiz</i>	swap_horiz
<i class="material-icons custom">swap_vert</i>	swap_vert
<i class="material-icons custom">swap_vertical_circle</i>	swap_vertical_circle
<i class="material-icons custom">system_update_alt</i>	system_update_alt
<i class="material-icons custom">tab</i>	tab
<i class="material-icons custom">tab_unselected</i>	tab_unselected
<i class="material-icons custom">theaters</i>	theaters
<i class="material-icons custom">thumb_down</i>	thumb_down
<i class="material-icons custom">thumb_up</i>	thumb_up
<i class="material-icons custom">thumbs_up_down</i>	thumbs_up_down
<i class="material-icons custom">toc</i>	toc
<i class="material-icons custom">today</i>	today
<i class="material-icons custom">toll</i>	toll
<i class="material-icons custom">track_changes</i>	track_changes
<i class="material-icons custom">translate</i>	translate
<i class="material-icons custom">trending_down</i>	trending_down
<i class="material-icons custom">trending_flat</i>	trending_flat
<i class="material-icons custom">trending_up</i>	trending_up
<i class="material-icons custom">turned_in</i>	turned_in
<i class="material-icons custom">verified_user</i>	verified_user
<i class="material-icons custom">view_agenda</i>	view_agenda
<i class="material-icons custom">view_array</i>	view_array
<i class="material-icons custom">view_carousel</i>	view_carousel
<i class="material-icons custom">view_column</i>	view_column
<i class="material-icons custom">view_day</i>	view_day
<i class="material-icons custom">view_headline</i>	view_headline
<i class="material-icons custom">view_list</i>	view_list
<i class="material-icons custom">view_module</i>	view_module
<i class="material-icons custom">view_quilt</i>	view_quilt
<i class="material-icons custom">view_stream</i>	view_stream
<i class="material-icons custom">view_week</i>	view_week
<i class="material-icons custom">visibility</i>	visibility
<i class="material-icons custom">visibility_off</i>	visibility_off
<i class="material-icons custom">work</i>	work
<i class="material-icons custom">youtube_searched_for</i>	youtube_searched_for
<i class="material-icons custom">zoom_in</i>	zoom_in
<i class="material-icons custom">zoom_out</i>	zoom_out

This chapter explains the usage of Google's (Material) Alert icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Alert icons. Replace the <body> tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">add_alert</i>	add_alert
<i class="material-icons custom">error</i>	error
<i class="material-icons custom">error_outline</i>	error_outline
<i class="material-icons custom">warning</i>	warning

This chapter explains the usage of Google's (Material) AV icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) AV icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">airplay</i>	airplay
<i class="material-icons custom">album</i>	album
<i class="material-icons custom">av_timer</i>	av_timer
<i class="material-icons custom">closed_caption</i>	closed_caption
<i class="material-icons custom">equalizer</i>	equalizer
<i class="material-icons custom">explicit</i>	explicit
<i class="material-icons custom">fast_forward</i>	fast_forward
<i class="material-icons custom">fast_rewind</i>	fast_rewind
<i class="material-icons custom">forward_10</i>	forward_10
<i class="material-icons custom">forward_30</i>	forward_30
<i class="material-icons custom">forward_5</i>	forward_5
<i class="material-icons custom">games</i>	games
<i class="material-icons custom">hd</i>	hd
<i class="material-icons custom">hearing</i>	hearing
<i class="material-icons custom">high_quality</i>	high_quality
<i class="material-icons custom">library_add</i>	library_add
<i class="material-icons custom">library_books</i>	library_books
<i class="material-icons custom">library_music</i>	library_music
<i class="material-icons custom">loop</i>	loop
<i class="material-icons custom">mic</i>	mic
<i class="material-icons custom">mic_none</i>	mic_none
<i class="material-icons custom">mic_off</i>	mic_off
<i class="material-icons custom">movie</i>	movie
<i class="material-icons custom">pause_circle_outline</i>	pause_circle_outline
<i class="material-icons custom">new_releases</i>	new_releases
<i class="material-icons custom">not_interested</i>	not_interested
<i class="material-icons custom">pause</i>	pause
<i class="material-icons custom">pause_circle_filled</i>	pause_circle_filled
<i class="material-icons custom">play_arrow</i>	play_arrow
<i class="material-icons custom">play_circle_filled</i>	play_circle_filled
<i class="material-icons custom">play_circle_outline</i>	play_circle_outline
<i class="material-icons custom">playlist_add</i>	playlist_add
<i class="material-icons custom">queue</i>	queue
<i class="material-icons custom">queue_music</i>	queue_music
<i class="material-icons custom">radio</i>	radio
<i class="material-icons custom">recent_actors</i>	recent_actors
<i class="material-icons custom">repeat</i>	repeat
<i class="material-icons custom">repeat_one</i>	repeat_one
<i class="material-icons custom">replay</i>	replay
<i class="material-icons custom">airplay</i>	replay_10
<i class="material-icons custom">replay_30</i>	replay_30
<i class="material-icons custom">replay_5</i>	replay_5
<i class="material-icons custom">shuffle</i>	shuffle
<i class="material-icons custom">skip_next</i>	skip_next
<i class="material-icons custom">skip_previous</i>	skip_previous
<i class="material-icons custom">snooze</i>	snooze
<i class="material-icons custom">sort_by_alpha</i>	sort_by_alpha
<i class="material-icons custom">stop</i>	stop
<i class="material-icons custom">subtitles</i>	subtitles
<i class="material-icons custom">surround_sound</i>	surround_sound
<i class="material-icons custom">video_library</i>	video_library
<i class="material-icons custom">videocam</i>	videocam
<i class="material-icons custom">videocam_off</i>	videocam_off
<i class="material-icons custom">volume_down</i>	volume_down
<i class="material-icons custom">volume_mute</i>	volume_mute
<i class="material-icons custom">volume_off</i>	volume_off
<i class="material-icons custom">volume_up</i>	volume_up
<i class="material-icons custom">web</i>	web

This chapter explains the usage of Google's (Material) Communication icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Communication icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">business</i>	business
<i class="material-icons custom">call</i>	call
<i class="material-icons custom">call_made</i>	call_made
<i class="material-icons custom">call_merge</i>	call_merge
<i class="material-icons custom">call_missed</i>	call_missed
<i class="material-icons custom">call_received</i>	call_received
<i class="material-icons custom">call_split</i>	call_split
<i class="material-icons custom">chat</i>	chat
<i class="material-icons custom">chat_bubble</i>	chat_bubble
<i class="material-icons custom">chat_bubble_outline</i>	chat_bubble_outline
<i class="material-icons custom">clear_all</i>	clear_all
<i class="material-icons custom">comment</i>	comment
<i class="material-icons custom">contact_phone</i>	contact_phone
<i class="material-icons custom">contacts</i>	contacts
<i class="material-icons custom">dialer_sip</i>	dialer_sip
<i class="material-icons custom">dialpad</i>	dialpad
<i class="material-icons custom">forum</i>	forum
<i class="material-icons custom">import_export</i>	import_export
<i class="material-icons custom">invert_colors_off</i>	invert_colors_off
<i class="material-icons custom">live_help</i>	live_help
<i class="material-icons custom">location_off</i>	location_off
<i class="material-icons custom">location_on</i>	location_on
<i class="material-icons custom">message</i>	message
<i class="material-icons custom">no_sim</i>	no_sim
<i class="material-icons custom">phone</i>	phone
<i class="material-icons custom">phonelink_erase</i>	phonelink_erase
<i class="material-icons custom">phonelink_lock</i>	phonelink_lock
<i class="material-icons custom">phonelink_ring</i>	phonelink_ring
<i class="material-icons custom">phonelink_setup</i>	phonelink_setup
<i class="material-icons custom">portable_wifi_off</i>	portable_wifi_off
<i class="material-icons custom">present_to_all</i>	present_to_all
<i class="material-icons custom">ring_volume</i>	ring_volume
<i class="material-icons custom">speaker_phone</i>	speaker_phone
<i class="material-icons custom">stay_current_landscape</i>	stay_current_landscape
<i class="material-icons custom">stay_current_portrait</i>	stay_current_portrait
<i class="material-icons custom">stay_primary_landscape</i>	stay_primary_landscape
<i class="material-icons custom">stay_primary_portrait</i>	stay_primary_portrait
<i class="material-icons custom">swap_calls</i>	swap_calls
<i class="material-icons custom">textsms</i>	textsms
<i class="material-icons custom">voicemail</i>	voicemail
<i class="material-icons custom">vpn_key</i>	vpn_key
<i class="material-icons custom">email</i>	email
<i class="material-icons custom">call_end</i>	call_end

In diesem Kapitel wird die Verwendung der Google-Symbole für (Material-) Inhalte erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Die folgende Tabelle enthält die Verwendung und die Ergebnisse der Inhaltssymbole von Google (Material). Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Ergebnis
<i class = "material-icons custom"> hinzufügen </ i>	hinzufügen
<i class = "material-icons custom"> add_box </ i>	add_box
<i class = "material-icons custom"> add_circle </ i>	add_circle
<i class = "material-icons custom"> add_circle_outline </ i>	add_circle_outline
<i class = "material-icons custom"> Archiv </ i>	Archiv
<i class = "material-icons custom"> Rücktaste </ i>	Rücktaste
<i class = "material-icons custom"> Block </ i>	Block
<i class = "material-icons custom"> löschen </ i>	klar
<i class = "material-icons custom"> content_copy </ i>	content_copy
<i class = "material-icons custom"> content_cut </ i>	content_cut
<i class = "material-icons custom"> content_paste </ i>	content_paste
<i class = "material-icons custom"> erstellen </ i>	erstellen
<i class = "material-icons custom"> Entwürfe </ i>	Entwürfe
<i class = "material-icons custom"> filter_list </ i>	filter_list
<i class = "material-icons custom"> flag </ i>	Flagge
<i class = "material-icons custom"> font_download </ i>	font_download
<i class = "material-icons custom"> weiterleiten </ i>	nach vorne
<i class = "material-icons custom"> Geste </ i>	Geste
<i class = "material-icons custom"> Posteingang </ i>	Posteingang
<i class = "material-icons custom"> Link </ i>	Verknüpfung
<i class = "material-icons custom"> mail </ i>	Mail
<i class = "material-icons custom"> markunread </ i>	als ungelesen markieren
<i class = "material-icons custom"> wiederholen </ i>	wiederholen
<i class = "material-icons custom"> entfernen </ i>	entfernen
<i class = "material-icons custom"> remove_circle </ i>	remove_circle
<i class = "material-icons custom"> remove_circle_outline </ i>	remove_circle_outline
<i class = "material-icons custom"> antworte </ i>	Antworten
<i class = "material-icons custom"> reply_all </ i>	reply_all
<i class = "material-icons custom"> Bericht </ i>	Bericht
<i class = "material-icons custom"> speichern </ i>	sparen
<i class = "material-icons custom"> select_all </ i>	Wählen Sie Alle
<i class = "material-icons custom"> senden </ i>	senden
<i class = "material-icons custom"> sort </ i>	Sortieren
<i class = "material-icons custom"> text_format </ i>	Textformat
<i class = "material-icons custom"> stay_current_portrait </ i>	stay_current_portrait
<i class = "material-icons custom"> rückgängig machen </ i>	rückgängig machen

In diesem Kapitel erfahren Sie, wie Sie die (materiellen) Gerätesymbole von Google verwenden. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe wie unten gezeigt definiert haben.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Die folgende Tabelle enthält die Verwendung und die Ergebnisse der (Material-) Gerätesymbole von Google.

Verwendung	Ergebnis
<i class = "material-icons custom"> access_alarm </ i>	access_alarm
<i class = "material-icons custom"> access_alarms </ i>	access_alarms
<i class = "material-icons custom"> access_time </ i>	Zugriffszeit
<i class = "material-icons custom"> add_alarm </ i>	add_alarm
<i class = "material-icons custom"> airplanemode_active </ i>	airplanemode_active
<i class = "material-icons custom"> airplanemode_inactive </ i>	airplanemode_inactive
<i class = "material-icons custom"> batterie_alert </ i>	Batterie_Alarm
<i class = "material-icons custom"> batterieladung_voll </ i>	batterieladung voll
<i class = "material-icons custom"> batterievoll </ i>	Batterie voll
<i class = "material-icons custom"> batterie_std </ i>	batterie_std
<i class = "material-icons custom"> batterie_unbekannt </ i>	Batterie_unbekannt
<i class = "material-icons custom"> Bluetooth </ i>	Bluetooth
<i class = "material-icons custom"> bluetooth_connected </ i>	bluetooth_connected
<i class = "material-icons custom"> bluetooth_disabled </ i>	bluetooth_disabled
<i class = "material-icons custom"> bluetooth_searching </ i>	bluetooth_searching
<i class = "material-icons custom"> brightness_auto </ i>	hellheit_auto
<i class = "material-icons custom"> brightness_high </ i>	Helligkeit_hoch
<i class = "material-icons custom"> brightness_low </ i>	Helligkeit_Low
<i class = "material-icons custom"> brightness_medium </ i>	hellheit_medium
<i class = "material-icons custom"> data_usage </ i>	Datenverbrauch
<i class = "material-icons custom"> Entwicklermodus </ i>	Entwicklermodus
<i class = "material-icons custom"> Geräte </ i>	Geräte
<i class = "material-icons custom"> dvr </ i>	dvr
<i class = "material-icons custom"> gps_fixed </ i>	gps_fixed
<i class = "material-icons custom"> gps_not_fixed </ i>	gps_not_fixed
<i class = "material-icons custom"> gps_off </ i>	gps_off
<i class = "material-icons custom"> graphische_eq </ i>	graphic_eq
<i class = "material-icons custom"> location_disabled </ i>	location_disabled
<i class = "material-icons custom"> location_searching </ i>	location_searching
<i class = "material-icons custom"> network_cell </ i>	network_cell
<i class = "material-icons custom"> network_wifi </ i>	network_wifi
<i class = "material-icons custom"> screen_lock_landscape </ i>	screen_lock_landscape
<i class = "material-icons custom"> screen_lock_portrait </ i>	screen_lock_portrait
<i class = "material-icons custom"> screen_lock_rotation </ i>	screen_lock_rotation
<i class = "material-icons custom"> screen_rotation </ i>	Bildschirm Rotation
<i class = "material-icons custom"> sd_storage </ i>	sd_storage
<i class = "material-icons custom"> settings_system_daydream </ i>	settings_system_daydream
<i class = "material-icons custom"> signal_cellular_4_bar </ i>	signal_cellular_4_bar
<i class = "material-icons custom"> wifi_tethering </ i>	wifi_tethering
<i class = "material-icons custom"> signal_cellular_no_sim </ i>	signal_cellular_no_sim
<i class = "material-icons custom"> signal_cellular_null </ i>	signal_cellular_null
<i class = "material-icons custom"> signal_cellular_off </ i>	signal_cellular_off
<i class = "material-icons custom"> signal_wifi_4_bar </ i>	signal_wifi_4_bar
<i class = "material-icons custom"> signal_wifi_4_bar_lock </ i>	signal_wifi_4_bar_lock
<i class = "material-icons custom"> signal_wifi_off </ i>	signal_wifi_off
<i class = "material-icons custom"> Speicher </ i>	Lager
<i class = "material-icons custom"> usb </ i>	USB
<i class = "material-icons custom"> Hintergrundbild </ i>	Hintergrund
<i class = "material-icons custom"> Widgets </ i>	Widgets
<i class = "material-icons custom"> wifi_lock </ i>	wifi_lock
<i class = "material-icons custom"> signal_cellular_connected_no_internet_4_bar </ i>	signal_cellular_connected_no_internet_4_bar

In diesem Kapitel wird die Verwendung der Google-Symbole (Material) Editor erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Die folgende Tabelle enthält die Verwendung und die Ergebnisse der Google-Symbole (Material) Editor. Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Ergebnis
<i class = "material-icons custom"> attach_file </ i>	Datei anhängen
<i class = "material-icons custom"> attach_money </ i>	attach_money
<i class = "material-icons custom"> border_all </ i>	border_all
<i class = "material-icons custom"> border_bottom </ i>	border_bottom
<i class = "material-icons custom"> border_clear </ i>	border_clear
<i class = "material-icons custom"> border_color </ i>	Randfarbe
<i class = "material-icons custom"> border_horizontal </ i>	border_horizontal
<i class = "material-icons custom"> border_inner </ i>	border_inner
<i class = "material-icons custom"> border_left </ i>	border_left
<i class = "material-icons custom"> border_outer </ i>	border_outer
<i class = "material-icons custom"> border_right </ i>	border_right
<i class = "material-icons custom"> border_style </ i>	border_style
<i class = "material-icons custom"> border_top </ i>	border_top
<i class = "material-icons custom"> border_vertical </ i>	border_vertical
<i class = "material-icons custom"> format_align_center </ i>	format_align_center
<i class = "material-icons custom"> format_align_justify </ i>	format_align_justify
<i class = "material-icons custom"> format_align_left </ i>	format_align_left
<i class = "material-icons custom"> format_align_right </ i>	format_align_right
<i class = "material-icons custom"> format_bold </ i>	format_bold
<i class = "material-icons custom"> format_clear </ i>	format_clear
<i class = "material-icons custom"> format_color_fill </ i>	format_color_fill
<i class = "material-icons custom"> format_color_reset </ i>	format_color_reset
<i class = "material-icons custom"> format_color_text </ i>	format_color_text
<i class = "material-icons custom"> format_indent_decrease </ i>	format_indent_decrease
<i class = "material-icons custom"> format_indent_increase </ i>	format_indent_increase
<i class = "material-icons custom"> format_italic </ i>	format_italic
<i class = "material-icons custom"> format_line_spacing </ i>	format_line_spacing
<i class = "material-icons custom"> format_list_bulleted </ i>	format_list_bulleted
<i class = "material-icons custom"> format_list_numbered </ i>	format_list_numbered
<i class = "material-icons custom"> format_paint </ i>	format_paint
<i class = "material-icons custom"> format_quote </ i>	format_quote
<i class = "material-icons custom"> format_size </ i>	format_size
<i class = "material-icons custom"> format_strikethrough </ i>	format_strikethrough
<i class = "material-icons custom"> format_textdirection_l_to_r </ i>	format_textdirection_l_to_r
<i class = "material-icons custom"> format_textdirection_r_to_l </ i>	format_textdirection_r_to_l
<i class = "material-icons custom"> format_underline </ i>	format_underline
<i class = "material-icons custom"> Funktionen </ i>	Funktionen
<i class = "material-icons custom"> insert_chart </ i>	insert_chart
<i class = "material-icons custom"> insert_comment </ i>	insert_comment
<i class = "material-icons custom"> insert_drive_file </ i>	insert_drive_file
<i class = "material-icons custom"> insert_emoticon </ i>	insert_emoticon
<i class = "material-icons custom"> insert_invitation </ i>	insert_invitation
<i class = "material-icons custom"> insert_link </ i>	insert_link
<i class = "material-icons custom"> insert_photo </ i>	insert_photo
<i class = "material-icons custom"> merge_type </ i>	merge_type
<i class = "material-icons custom"> mode_comment </ i>	mode_comment
<i class = "material-icons custom"> mode_edit </ i>	mode_edit
<i class = "material-icons custom"> money_off </ i>	Geld aus
<i class = "material-icons custom"> veröffentlichen </ i>	veröffentlichen
<i class = "material-icons custom"> Leertaste </ i>	Leertaste
<i class = "material-icons custom"> durchgestrichen_s </ i>	durchgestrichen
<i class = "material-icons custom"> vertical_align_bottom </ i>	vertikale_Ausrichtung_Boden
<i class = "material-icons custom"> vertikales_ausrichtungszentrum </ i>	vertikale_Ausrichtung_Zentrum
<i class = "material-icons custom"> vertical_align_top </ i>	vertikale_Ausrichtung_Top
<i class = "material-icons custom"> wrap_text </ i>	Zeilenumbruch

In diesem Kapitel wird die Verwendung der Google-Symbole für (Material-) Dateien erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Die folgende Tabelle enthält die Verwendung und die Ergebnisse der Google-Symbole (Material). Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Ergebnis
<i class = "material-icons custom"> Anhang </ i>	Anhang
<i class = "material-icons custom"> cloud </ i>	Wolke
<i class = "material-icons custom"> cloud_circle </ i>	cloud_circle
<i class = "material-icons custom"> cloud_done </ i>	cloud_done
<i class = "material-icons custom"> cloud_download </ i>	cloud_download
<i class = "material-icons custom"> cloud_off </ i>	cloud_off
<i class = "material-icons custom"> cloud_queue </ i>	cloud_queue
<i class = "material-icons custom"> cloud_upload </ i>	cloud_upload
<i class = "material-icons custom"> file_download </ i>	Datei download
<i class = "material-icons custom"> file_upload </ i>	Datei-Upload
<i class = "material-icons custom"> Ordner </ i>	Mappe
<i class = "material-icons custom"> folder_open </ i>	folder_open
<i class = "material-icons custom"> folder_shared </ i>	folder_shared

In diesem Kapitel wird die Verwendung der (Material-) Hardware-Symbole von Google erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Die folgende Tabelle enthält die Verwendung und die Ergebnisse der Hardware-Symbole von Google (Material). Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Ergebnis
<i class = "material-icons custom"> cast </ i>	Besetzung
<i class = "material-icons custom"> cast_connected </ i>	cast_connected
<i class = "material-icons custom"> Computer </ i>	Computer
<i class = "material-icons custom"> desktop_mac </ i>	desktop_mac
<i class = "material-icons custom"> desktop_windows </ i>	desktop_windows
<i class = "material-icons custom"> developer_board </ i>	developer_board
<i class = "material-icons custom"> device_hub </ i>	device_hub
<i class = "material-icons custom"> Dock </ i>	Dock
<i class = "material-icons custom"> Gamepad </ i>	Gamepad
<i class = "material-icons custom"> Headset </ i>	Headset
<i class = "material-icons custom"> headset_mic </ i>	headset_mic
<i class = "material-icons custom"> Tastatur </ i>	Tastatur
<i class = "material-icons custom"> keyboard_arrow_down </ i>	keyboard_arrow_down
<i class = "material-icons custom"> keyboard_arrow_left </ i>	keyboard_arrow_left
<i class = "material-icons custom"> keyboard_arrow_right </ i>	keyboard_arrow_right
<i class = "material-icons custom"> keyboard_arrow_up </ i>	keyboard_arrow_up
<i class = "material-icons custom"> keyboard_backspace </ i>	keyboard_backspace
<i class = "material-icons custom"> keyboard_capslock </ i>	keyboard_capslock
<i class = "material-icons custom"> keyboard_hide </ i>	keyboard_hide
<i class = "material-icons custom"> keyboard_return </ i>	keyboard_return
<i class = "material-icons custom"> keyboard_tab </ i>	keyboard_tab
<i class = "material-icons custom"> keyboard_voice </ i>	keyboard_voice
<i class = "material-icons custom"> Laptop </ i>	Laptop
<i class = "material-icons custom"> Laptop_chromebook </ i>	Laptop_chromebook
<i class = "material-icons custom"> Laptop_Mac </ i>	Laptop_Mac
<i class = "material-icons custom"> Laptop-Fenster </ i>	Laptop_Fenster
<i class = "material-icons custom"> Speicher </ i>	Erinnerung
<i class = "material-icons custom"> Maus </ i>	Maus
<i class = "material-icons custom"> phone_android </ i>	phone_android
<i class = "material-icons custom"> phone_iphone </ i>	phone_iphone
<i class = "material-icons custom"> phonelink </ i>	Telefonverbindung
<i class = "material-icons custom"> phonelink_off </ i>	phonelink_off
<i class = "material-icons custom"> power_input </ i>	power_input
<i class = "material-icons custom"> Router </ i>	Router
<i class = "material-icons custom"> Scanner </ i>	Scanner
<i class = "material-icons custom"> Sicherheit </ i>	Sicherheit
<i class = "material-icons custom"> sim_card </ i>	SIM Karte
<i class = "material-icons custom"> Smartphone </ i>	Smartphone
<i class = "material-icons custom"> Sprecher </ i>	Lautsprecher
<i class = "material-icons custom"> Sprechergruppe </ i>	Sprechergruppe
<i class = "material-icons custom"> tablet </ i>	Tablette
<i class = "material-icons custom"> tablet_android </ i>	tablet_android
<i class = "material-icons custom"> tablet_mac </ i>	tablet_mac
<i class = "material-icons custom"> Spielzeug </ i>	Spielzeuge
<i class = "material-icons custom"> tv </ i>	Fernseher
<i class = "material-icons custom"> ansehen </ i>	Uhr

In diesem Kapitel wird die Verwendung der Bildsymbole von Google (Material) erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Die folgende Tabelle enthält die Verwendung und die Ergebnisse der Bildsymbole von Google (Material). Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Ergebnis
<i class = "material-icons custom"> add_to_photos </ i>	add_to_photos
<i class = "material-icons custom"> anpassen </ i>	einstellen
<i class = "material-icons custom"> Assistent </ i>	Assistent
<i class = "material-icons custom"> Assistent </ i>	Assistent
<i class = "material-icons custom"> Audiospur </ i>	Audiospur
<i class = "material-icons custom"> blur_circular </ i>	blur_circular
<i class = "material-icons custom"> blur_linear </ i>	blur_linear
<i class = "material-icons custom"> blur_off </ i>	blur_off
<i class = "material-icons custom"> blur_on </ i>	blur_on
<i class = "material-icons custom"> Helligkeit_1 </ i>	Helligkeit_1
<i class = "material-icons custom"> Helligkeit_2 </ i>	Helligkeit_2
<i class = "material-icons custom"> Helligkeit_3 </ i>	Helligkeit_3
<i class = "material-icons custom"> Helligkeit_4 </ i>	Helligkeit_4
<i class = "material-icons custom"> Helligkeit_5 </ i>	Helligkeit_5
<i class = "material-icons custom"> Helligkeit_6 </ i>	Helligkeit_6
<i class = "material-icons custom"> Helligkeit_7 </ i>	Helligkeit_7
<i class = "material-icons custom"> kaputtes_bild </ i>	kaputtes_Bild
<i class = "material-icons custom"> Pinsel </ i>	Bürste
<i class = "material-icons custom"> Kamera </ i>	Kamera
<i class = "material-icons custom"> camera_alt </ i>	camera_alt
<i class = "material-icons custom"> camera_front </ i>	camera_front
<i class = "material-icons custom"> camera_rear </ i>	camera_rear
<i class = "material-icons custom"> camera_roll </ i>	Filmrolle
<i class = "material-icons custom"> center_focus_strong </ i>	center_focus_strong
<i class = "material-icons custom"> center_focus_weak </ i>	center_focus_weak
<i class = "material-icons custom"> Sammlungen </ i>	Sammlungen
<i class = "material-icons custom"> collection_bookmark </ i>	collection_bookmark
<i class = "material-icons custom"> color_lens </ i>	color_lens
<i class = "material-icons custom"> kolorieren </ i>	kolorieren
<i class = "material-icons custom"> vergleiche </ i>	vergleichen Sie
<i class = "material-icons custom"> Kontrollpunkt </ i>	Kontrollpunkt
<i class = "material-icons custom"> control_point_duplicate </ i>	control_point_duplicate
<i class = "material-icons custom"> Zuschneiden </ i>	Ernte
<i class = "material-icons custom"> crop_16_9 </ i>	crop_16_9
<i class = "material-icons custom"> crop_3_2 </ i>	crop_3_2
<i class = "material-icons custom"> crop_5_4 </ i>	crop_5_4
<i class = "material-icons custom"> crop_7_5 </ i>	crop_7_5
<i class = "material-icons custom"> crop_din </ i>	crop_din
<i class = "material-icons custom"> crop_free </ i>	crop_free
<i class = "material-icons custom"> crop_landscape </ i>	crop_landscape
<i class = "material-icons custom"> crop_original </ i>	crop_original
<i class = "material-icons custom"> crop_portrait </ i>	crop_portrait
<i class = "material-icons custom"> crop_square </ i>	crop_square
<i class = "material-icons custom"> Dehaze </ i>	Dehaze
<i class = "material-icons custom"> Details </ i>	Einzelheiten
<i class = "material-icons custom"> bearbeiten </ i>	bearbeiten
<i class = "material-icons custom"> Belichtung </ i>	Exposition
<i class = "material-icons custom"> belichtung_neg_1 </ i>	belichtung_neg_1
<i class = "material-icons custom"> belichtung_plus_1 </ i>	belichtung_plus_1
<i class = "material-icons custom"> belichtung_plus_2 </ i>	belichtung_plus_2
<i class = "material-icons custom"> belichtung_zero </ i>	belichtung_zero
<i class = "material-icons custom"> Filter </ i>	Filter
<i class = "material-icons custom"> filter_1 </ i>	filter_1
<i class = "material-icons custom"> filter_2 </ i>	filter_2
<i class = "material-icons custom"> filter_3 </ i>	filter_3
<i class = "material-icons custom"> filter_4 </ i>	filter_4
<i class = "material-icons custom"> filter_5 </ i>	filter_5
<i class = "material-icons custom"> filter_6 </ i>	filter_6
<i class = "material-icons custom"> filter_7 </ i>	filter_7
<i class = "material-icons custom"> filter_8 </ i>	filter_8
<i class = "material-icons custom"> filter_9 </ i>	filter_9
<i class = "material-icons custom"> filter_9_plus </ i>	filter_9_plus
<i class = "material-icons custom"> filter_b_and_w </ i>	filter_b_and_w
<i class = "material-icons custom"> filter_center_focus </ i>	filter_center_focus
<i class = "material-icons custom"> filter_drama </ i>	filter_drama
<i class = "material-icons custom"> filter_frames </ i>	filter_frames
<i class = "material-icons custom"> filter_hdr </ i>	filter_hdr
<i class = "material-icons custom"> filter_none </ i>	filter_none
<i class = "material-icons custom"> filter_tilt_shift </ i>	filter_tilt_shift
<i class = "material-icons custom"> filter_vintage </ i>	filter_vintage
<i class = "material-icons custom"> Fackel </ i>	Fackel
<i class = "material-icons custom"> flash_auto </ i>	flash_auto
<i class = "material-icons custom"> flash_off </ i>	Blitz aus
<i class = "material-icons custom"> flash_on </ i>	Blitz an
<i class = "material-icons custom"> flip </ i>	Flip
<i class = "material-icons custom"> Verlauf </ i>	Gradient
<i class = "material-icons custom"> Korn </ i>	Korn
<i class = "material-icons custom"> grid_off </ i>	grid_off
<i class = "material-icons custom"> grid_on </ i>	grid_on
<i class = "material-icons custom"> hdr_off </ i>	hdr_off
<i class = "material-icons custom"> hdr_on </ i>	hdr_on
<i class = "material-icons custom"> hdr_strong </ i>	hdr_strong
<i class = "material-icons custom"> hdr_weak </ i>	hdr_weak
<i class = "material-icons custom"> Heilung </ i>	Heilung
<i class = "material-icons custom"> image </ i>	Bild
<i class = "material-icons custom"> image_aspect_ratio </ i>	image_aspect_ratio
<i class = "material-icons custom"> iso </ i>	iso
<i class = "material-icons custom"> Landschaft </ i>	Landschaft
<i class = "material-icons custom"> leak_add </ i>	leck_add
<i class = "material-icons custom"> leak_remove </ i>	leck_entfernung
<i class = "material-icons custom"> Objektiv </ i>	Linse
<i class = "material-icons custom"> sieht </ i> aus	sieht aus
<i class = "material-icons custom"> Looks_3 </ i>	Looks_3
<i class = "material-icons custom"> Looks_4 </ i>	Looks_4
<i class = "material-icons custom"> Looks_5 </ i>	sieht aus_5
<i class = "material-icons custom"> Looks_6 </ i>	sieht aus_6
<i class = "material-icons custom"> Looks_one </ i>	Looks_one
<i class = "material-icons custom"> Looks_two </ i>	Looks_Two
<i class = "material-icons custom"> Lupe </ i>	Lupe
<i class = "material-icons custom"> monochrome_photos </ i>	monochrome_photos
<i class = "material-icons custom"> movie_creation </ i>	movie_creation
<i class = "material-icons custom"> music_note </ i>	Musiknote
<i class = "material-icons custom"> nature </ i>	Natur
<i class="material-icons custom">nature_people</i>	nature_people
<i class="material-icons custom">wb_sunny</i>	wb_sunny
<i class="material-icons custom">navigate_next</i>	navigate_next
<i class="material-icons custom">navigate_before</i>	navigate_before
<i class="material-icons custom">palette</i>	palette
<i class="material-icons custom">panorama</i>	panorama
<i class="material-icons custom">panorama_fish_eye</i>	panorama_fish_eye
<i class="material-icons custom">panorama_horizontal</i>	panorama_horizontal
<i class="material-icons custom">panorama_vertical</i>	panorama_vertical
<i class="material-icons custom">panorama_wide_angle</i>	panorama_wide_angle
<i class="material-icons custom">photo</i>	photo
<i class="material-icons custom">photo_album</i>	photo_album
<i class="material-icons custom">photo_camera</i>	photo_camera
<i class="material-icons custom">photo_library</i>	photo_library
<i class="material-icons custom">photo_size_select_actual</i>	photo_size_select_actual
<i class="material-icons custom">photo_size_select_large</i>	photo_size_select_large
<i class="material-icons custom">photo_size_select_small</i>	photo_size_select_small
<i class="material-icons custom">picture_as_pdf</i>	picture_as_pdf
<i class="material-icons custom">portrait</i>	portrait
<i class="material-icons custom">remove_red_eye</i>	remove_red_eye
<i class="material-icons custom">rotate_90_degrees_ccw</i>	rotate_90_degrees_ccw
<i class="material-icons custom">rotate_left</i>	rotate_left
<i class="material-icons custom">rotate_right</i>	rotate_right
<i class="material-icons custom">slideshow</i>	slideshow
<i class="material-icons custom">straighten</i>	straighten
<i class="material-icons custom">style</i>	style
<i class="material-icons custom">switch_camera</i>	switch_camera
<i class="material-icons custom">switch_video</i>	switch_video
<i class="material-icons custom">tag_faces</i>	tag_faces
<i class="material-icons custom">texture</i>	texture
<i class="material-icons custom">timelapse</i>	timelapse
<i class="material-icons custom">timer</i>	timer
<i class="material-icons custom">timer_10</i>	timer_10
<i class="material-icons custom">timer_3</i>	timer_3
<i class="material-icons custom">timer_off</i>	timer_off
<i class="material-icons custom">tonality</i>	tonality
<i class="material-icons custom">transform</i>	transform
<i class="material-icons custom">tune</i>	tune
<i class="material-icons custom">view_comfy</i>	view_comfy
<i class="material-icons custom">view_compact</i>	view_compact
<i class="material-icons custom">vignette</i>	vignette
<i class="material-icons custom">wb_auto</i>	wb_auto
<i class="material-icons custom">wb_cloudy</i>	wb_cloudy
<i class="material-icons custom">wb_incandescent</i>	wb_incandescent
<i class="material-icons custom">wb_iridescent</i>	wb_iridescent

This chapter explains the usage of Google's (Material) Maps icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Maps icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">beenhere</i>	beenhere
<i class="material-icons custom">directions</i>	directions
<i class="material-icons custom">directions_bike</i>	directions_bike
<i class="material-icons custom">directions_boat</i>	directions_boat
<i class="material-icons custom">directions_bus</i>	directions_bus
<i class="material-icons custom">directions_car</i>	directions_car
<i class="material-icons custom">directions_railway</i>	directions_railway
<i class="material-icons custom">directions_run</i>	directions_run
<i class="material-icons custom">directions_subway</i>	directions_subway
<i class="material-icons custom">directions_transit</i>	directions_transit
<i class="material-icons custom">directions_walk</i>	directions_walk
<i class="material-icons custom">flight</i>	flight
<i class="material-icons custom">hotel</i>	hotel
<i class="material-icons custom">layers</i>	layers
<i class="material-icons custom">layers_clear</i>	layers_clear
<i class="material-icons custom">local_activity</i>	local_activity
<i class="material-icons custom">local_airport</i>	local_airport
<i class="material-icons custom">local_atm</i>	local_atm
<i class="material-icons custom">local_bar</i>	local_bar
<i class="material-icons custom">local_cafe</i>	local_cafe
<i class="material-icons custom">local_car_wash</i>	local_car_wash
<i class="material-icons custom">local_convenience_store</i>	local_convenience_store
<i class="material-icons custom">local_dining</i>	local_dining
<i class="material-icons custom">local_drink</i>	local_drink
<i class="material-icons custom">local_florist</i>	local_florist
<i class="material-icons custom">local_gas_station</i>	local_gas_station
<i class="material-icons custom">local_grocery_store</i>	local_grocery_store
<i class="material-icons custom">local_hospital</i>	local_hospital
<i class="material-icons custom">local_hotel</i>	local_hotel
<i class="material-icons custom">local_laundry_service</i>	local_laundry_service
<i class="material-icons custom">local_library</i>	local_library
<i class="material-icons custom">local_mall</i>	local_mall
<i class="material-icons custom">local_movies</i>	local_movies
<i class="material-icons custom">local_offer</i>	local_offer
<i class="material-icons custom">local_parking</i>	local_parking
<i class="material-icons custom">local_pharmacy</i>	local_pharmacy
<i class="material-icons custom">local_phone</i>	local_phone
<i class="material-icons custom">local_pizza</i>	local_pizza
<i class="material-icons custom">local_play</i>	local_play
<i class="material-icons custom">local_post_office</i>	local_post_office
<i class="material-icons custom">local_printshop</i>	local_printshop
<i class="material-icons custom">local_see</i>	local_see
<i class="material-icons custom">local_shipping</i>	local_shipping
<i class="material-icons custom">local_taxi</i>	local_taxi
<i class="material-icons custom">map</i>	map
<i class="material-icons custom">my_location</i>	my_location
<i class="material-icons custom">navigation</i>	navigation
<i class="material-icons custom">person_pin</i>	person_pin
<i class="material-icons custom">pin_drop</i>	pin_drop
<i class="material-icons custom">place</i>	place
<i class="material-icons custom">rate_review</i>	rate_review
<i class="material-icons custom">restaurant_menu</i>	restaurant_menu
<i class="material-icons custom">satellite</i>	satellite
<i class="material-icons custom">store_mall_directory</i>	store_mall_directory
<i class="material-icons custom">traffic</i>	traffic
<i class="material-icons custom">terrain</i>	terrain

This chapter explains the usage of Google's (Material) Navigation icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Navigation icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">apps</i>	apps
<i class="material-icons custom">arrow_back</i>	arrow_back
<i class="material-icons custom">arrow_drop_down</i>	arrow_drop_down
<i class="material-icons custom">arrow_drop_down_circle</i>	arrow_drop_down_circle
<i class="material-icons custom">arrow_drop_up</i>	arrow_drop_up
<i class="material-icons custom">arrow_forward</i>	arrow_forward
<i class="material-icons custom">cancel</i>	cancel
<i class="material-icons custom">check</i>	check
<i class="material-icons custom">chevron_left</i>	chevron_left
<i class="material-icons custom">chevron_right</i>	chevron_right
<i class="material-icons custom">close</i>	close
<i class="material-icons custom">expand_less</i>	expand_less
<i class="material-icons custom">expand_more</i>	expand_more
<i class="material-icons custom">fullscreen</i>	fullscreen
<i class="material-icons custom">fullscreen_exit</i>	fullscreen_exit
<i class="material-icons custom">menu</i>	menu
<i class="material-icons custom">more_horiz</i>	more_horiz
<i class="material-icons custom">more_vert</i>	more_vert
<i class="material-icons custom">refresh</i>	refresh

This chapter explains the usage of Google's (Material) Notification icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Notification icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">adb</i>	adb
<i class="material-icons custom">airline_seat_flat</i>	airline_seat_flat
<i class="material-icons custom">airline_seat_flat_angled</i>	airline_seat_flat_angled
<i class="material-icons custom">airline_seat_individual_suite</i>	airline_seat_individual_suite
<i class="material-icons custom">airline_seat_legroom_reduced</i>	airline_seat_legroom_reduced
<i class="material-icons custom">airline_seat_recline_extra</i>	airline_seat_recline_extra
<i class="material-icons custom">airline_seat_recline_normal</i>	airline_seat_recline_normal
<i class="material-icons custom">bluetooth_audio</i>	bluetooth_audio
<i class="material-icons custom">confirmation_number</i>	confirmation_number
<i class="material-icons custom">disc_full</i>	disc_full
<i class="material-icons custom">do_not_disturb</i>	do_not_disturb
<i class="material-icons custom">do_not_disturb_alt</i>	do_not_disturb_alt
<i class="material-icons custom">drive_eta</i>	drive_eta
<i class="material-icons custom">event_available</i>	event_available
<i class="material-icons custom">event_busy</i>	event_busy
<i class="material-icons custom">event_note</i>	event_note
<i class="material-icons custom">folder_special</i>	folder_special
<i class="material-icons custom">live_tv</i>	live_tv
<i class="material-icons custom">mms</i>	mms
<i class="material-icons custom">more</i>	more
<i class="material-icons custom">network_locked</i>	network_locked
<i class="material-icons custom">ondemand_video</i>	ondemand_video
<i class="material-icons custom">personal_video</i>	personal_video
<i class="material-icons custom">phone_bluetooth_speaker</i>	phone_bluetooth_speaker
<i class="material-icons custom">phone_forwarded</i>	phone_forwarded
<i class="material-icons custom">phone_in_talk</i>	phone_in_talk
<i class="material-icons custom">phone_locked</i>	phone_locked
<i class="material-icons custom">phone_missed</i>	phone_missed
<i class="material-icons custom">phone_paused</i>	phone_paused
<i class="material-icons custom">power</i>	power
<i class="material-icons custom">sd_card</i>	sd_card
<i class="material-icons custom">sim_card_alert</i>	sim_card_alert
<i class="material-icons custom">sms</i>	sms
<i class="material-icons custom">sms_failed</i>	sms_failed
<i class="material-icons custom">sync</i>	sync
<i class="material-icons custom">sync_disabled</i>	sync_disabled
<i class="material-icons custom">sync_problem</i>	sync_problem
<i class="material-icons custom">system_update</i>	system_update
<i class="material-icons custom">tap_and_play</i>	tap_and_play
<i class="material-icons custom">time_to_leave</i>	time_to_leave
<i class="material-icons custom">vibration</i>	vibration
<i class="material-icons custom">voice_chat</i>	voice_chat
<i class="material-icons custom">vpn_lock</i>	vpn_lock
<i class="material-icons custom">wc</i>	wc
<i class="material-icons custom">wifi</i>	wifi

In diesem Kapitel wird die Verwendung der (materiellen) sozialen Symbole von Google erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Die folgende Tabelle enthält die Verwendung und die Ergebnisse der Google-Symbole (Material) Social. Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Ergebnis
<i class = "material-icons custom"> Kuchen </ i>	Kuchen
<i class = "material-icons custom"> Domain </ i>	Domain
<i class = "material-icons custom"> Gruppe </ i>	Gruppe
<i class = "material-icons custom"> group_add </ i>	group_add
<i class = "material-icons custom"> location_city </ i>	location_city
<i class = "material-icons custom"> Stimmung </ i>	Stimmung
<i class = "material-icons custom"> Mood_bad </ i>	schlechte Laune
<i class = "material-icons custom"> Benachrichtigungen </ i>	Benachrichtigungen
<i class = "material-icons custom"> notifications_active </ i>	notifications_active
<i class = "material-icons custom"> notifications_none </ i>	notifications_none
<i class = "material-icons custom"> notifications_off </ i>	notifications_off
<i class = "material-icons custom"> notifications_paused </ i>	notifications_paused
<i class = "material-icons custom"> Seiten </ i>	Seiten
<i class = "material-icons custom"> party_mode </ i>	Party Modus
<i class = "material-icons custom"> Personen </ i>	Menschen
<i class = "material-icons custom"> people_outline </ i>	people_outline
<i class = "material-icons custom"> Person </ i>	Person
<i class = "material-icons custom"> person_add </ i>	person_add
<i class = "material-icons custom"> person_outline </ i>	person_outline
<i class = "material-icons custom"> plus_one </ i>	Plus eins
<i class = "material-icons custom"> Umfrage </ i>	Umfrage
<i class = "material-icons custom"> public </ i>	Öffentlichkeit
<i class = "material-icons custom"> Schule </ i>	Schule
<i class = "material-icons custom"> teilen </ i>	Aktie
<i class = "material-icons custom"> whatshot </ i>	whatshot

In diesem Kapitel wird die Verwendung der Google-Symbole (Material) zum Umschalten erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel =  "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Die folgende Tabelle enthält die Verwendung und die Ergebnisse der Google-Symbole (Material) zum Umschalten. Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Ergebnis
<i class = "material-icons custom"> Kontrollkästchen </ i>	check_box
<i class = "material-icons custom"> check_box_outline_blank </ i>	check_box_outline_blank
<i class = "material-icons custom"> indeterminate_check_box </ i>	indeterminate_check_box
<i class = "material-icons custom"> radio_button_checked </ i>	radio_button_checked
<i class = "material-icons custom"> radio_button_unchecked </ i>	radio_button_unchecked
<i class = "material-icons custom"> Stern </ i>	Star
<i class = "material-icons custom"> star_border </ i>	star_border
<i class = "material-icons custom"> star_half </ i>	star_half

Dies ist eine Bibliothek monochromatischer Symbole, die in Rasterbildformaten, Vektorbildformaten und als Schriftarten verfügbar sind. Es bietet über 250 Glyphen im Schriftformat. Sie können diese Schriftarten in Ihren Webprojekten verwenden. Diese Glyphen sind jedoch nicht kostenlos, wenn Sie nichts ausgeben müssen, falls Sie sie in Bootstrap-basierten Projekten verwenden.

Laden der Schriftart (Bibliothek)

Kopieren Sie zum Laden der Bootstrap Glyphicons-Bibliothek die folgende Zeile und fügen Sie sie in den Abschnitt <head> der Webseite ein.

<head>
   <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>

Verwenden des Symbols

Bootstrap Glyphicons bietet eine Reihe von Symbolen. Wählen Sie eine davon aus und fügen Sie den Namen der Symbolklasse zu einem beliebigen HTML-Element im <body> -Tag hinzu. Im folgenden Beispiel haben wir das Symbol des Baums verwendet und sein Klassenname lautettree-deciduous.

<html>
   <head>
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
	
   <body>
      <i class = "glyphicon glyphicon-tree-deciduous"> </i>
   </body>
</html>

Es wird die folgende Ausgabe erzeugt -

Größe definieren

<html>
   <head>
      <link rel="stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
      i.mysize {font-size: 6em;}
      </style>
   </head>
 
   <body>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>

Es wird die folgende Ausgabe erzeugt:

Farbe definieren

Sie können die Farbe eines Symbols mithilfe des CSS definieren. Das folgende Beispiel zeigt, wie Sie die Farbe des Baumsymbols ändern.

<html>
   <head>
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
      i.mysize {font-size: 6em; color: blue;}
      </style>
   </head>
 
   <body>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>

Es wird die folgende Ausgabe erzeugt -

In diesem Kapitel wird die Verwendung von Bootstrap-Glyphicons (Komponenten) erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

<html>
   <head>
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      
      <i.custom {font-size: 2em; color: blue;}>
   </head>
	
   <body>
      <i class = "glyphicon glyphicon-tree-deciduous custom"></i>
   </body>
	
</html>

Die folgende Tabelle enthält die Verwendung und die Ergebnisse von Bootstrap-Glyphicons (Komponenten). Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Ergebnis
<i class = "Glyphicon Glyphicon-Sternchen benutzerdefiniert"> </ i>
<i class = "glyphicon glyphicon-plus custom"> </ i>
<i class = "glyphicon glyphicon-euro custom"> </ i>
<i class = "Glyphicon Glyphicon-minus custom"> </ i>
<i class = "Glyphicon Glyphicon-Cloud Custom"> </ i>
<i class = "Glyphicon Glyphicon-Envelope Custom"> </ i>
<i class = "Glyphicon Glyphicon-Pencil custom"> </ i>
<i class = "Glyphicon Glyphicon-Glass Custom"> </ i>
<i class = "glyphicon glyphicon-music custom"> </ i>
<i class = "Glyphicon Glyphicon-Search Custom"> </ i>
<i class = "Glyphicon Glyphicon-Heart Custom"> </ i>
<i class = "Glyphicon Glyphicon-Star Custom"> </ i>
<i class = "Glyphicon Glyphicon-Star-Empty Custom"> </ i>
<i class = "Glyphicon Glyphicon-Benutzer benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Film Custom"> </ i>
<i class = "Glyphicon Glyphicon-th-Large Custom"> </ i>
<i class = "Glyphicon Glyphicon-th custom"> </ i>
<i class = "Glyphicon Glyphicon-th-List custom"> </ i>
<i class = "glyphicon glyphicon-ok custom"> </ i>
<i class = "Glyphicon Glyphicon-Remove Custom"> </ i>
<i class = "Glyphicon Glyphicon-Zoom-In Custom"> </ i>
<i class = "Glyphicon Glyphicon-Zoom-Out Custom"> </ i>
<i class = "Glyphicon Glyphicon-Off Custom"> </ i>
<i class = "Glyphicon Glyphicon-Signal Custom"> </ i>
<i class = "glyphicon glyphicon-cog custom"> </ i>
<i class = "Glyphicon Glyphicon-Trash Custom"> </ i>
<i class = "Glyphicon Glyphicon-Home Custom"> </ i>
<i class = "Glyphicon Glyphicon-Datei benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Time Custom"> </ i>
<i class = "Glyphicon Glyphicon-Road Custom"> </ i>
<i class = "glyphicon glyphicon-download-alt custom"> </ i>
<i class = "Glyphicon Glyphicon-Download benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Upload benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Posteingang benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Play-Circle Custom"> </ i>
<i class = "Glyphicon Glyphicon-Repeat Custom"> </ i>
<i class = "Glyphicon Glyphicon-Refresh Custom"> </ i>
<i class = "glyphicon glyphicon-list-alt custom"> </ i>
<i class = "Glyphicon Glyphicon-Lock benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Flag benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Kopfhörer benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Volume-Off Custom"> </ i>
<i class = "Glyphicon Glyphicon-Volume-Down Custom"> </ i>
<i class = "Glyphicon Glyphicon-Volume-Up Custom"> </ i>
<i class = "glyphicon glyphicon-qrcode custom"> </ i>
<i class = "Glyphicon Glyphicon-Barcode benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Tag benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Tags benutzerdefiniert"> </ i>
<i class = "glyphicon glyphicon-book custom"> </ i>
<i class = "Glyphicon Glyphicon-Lesezeichen benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Print Custom"> </ i>
<i class = "Glyphicon Glyphicon-Kamera benutzerdefiniert"> </ i>
<i class = "glyphicon glyphicon-font custom"> </ i>
<i class = "Glyphicon Glyphicon-Bold Custom"> </ i>
<i class = "Glyphicon Glyphicon-Italic Custom"> </ i>
<i class = "Glyphicon Glyphicon-Texthöhe benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Text-Breite benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Align-Left Custom"> </ i>
<i class = "Glyphicon Glyphicon-Align-Center Custom"> </ i>
<i class = "Glyphicon Glyphicon-Align-Right Custom"> </ i>
<i class = "Glyphicon Glyphicon-Align-Justize Custom"> </ i>
<i class = "Glyphicon Glyphicon-List custom"> </ i>
<i class = "Glyphicon Glyphicon-Indent-Left Custom"> </ i>
<i class = "Glyphicon Glyphicon-Indent-Right Custom"> </ i>
<i class = "Glyphicon Glyphicon-Facetime-Video benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Bild benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Map-Marker benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Adjust Custom"> </ i>
<i class = "Glyphicon Glyphicon-Tint Custom"> </ i>
<i class = "Glyphicon Glyphicon-Edit Custom"> </ i>
<i class = "Glyphicon Glyphicon-Share Custom"> </ i>
<i class = "Glyphicon Glyphicon-Check Custom"> </ i>
<i class = "Glyphicon Glyphicon-Move Custom"> </ i>
<i class = "Glyphicon Glyphicon-Step-Backward Custom"> </ i>
<i class = "Glyphicon Glyphicon-Fast-Backward Custom"> </ i>
<i class = "Glyphicon Glyphicon-Backward Custom"> </ i>
<i class = "Glyphicon Glyphicon-Play Custom"> </ i>
<i class = "Glyphicon Glyphicon-Pause benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Stop Custom"> </ i>
<i class = "Glyphicon Glyphicon-Forward Custom"> </ i>
<i class = "Glyphicon Glyphicon-Fast-Forward Custom"> </ i>
<i class = "Glyphicon Glyphicon-Step-Forward Custom"> </ i>
<i class = "Glyphicon Glyphicon-Eject Custom"> </ i>
<i class = "Glyphicon Glyphicon-Chevron-Left Custom"> </ i>
<i class = "Glyphicon Glyphicon-Chevron-Right Custom"> </ i>
<i class = "Glyphicon Glyphicon-Plus-Zeichen benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Minuszeichen benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Remove-Sign Custom"> </ i>
<i class = "glyphicon glyphicon-ok-sign custom"> </ i>
<i class = "Glyphicon Glyphicon-Frage-Zeichen benutzerdefiniert"> </ i>
<i class = "glyphicon glyphicon-info-sign custom"> </ i>
<i class = "Glyphicon Glyphicon-Screenshot benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Remove-Circle Custom"> </ i>
<i class = "glyphicon glyphicon-ok-circle custom"> </ i>
<i class = "Glyphicon Glyphicon-Ban-Circle Custom"> </ i>
<i class = "Glyphicon Glyphicon-Pfeil-links benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Pfeil-rechts benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Pfeil nach oben benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Pfeil nach unten benutzerdefiniert"> </ i>
<i class = "glyphicon glyphicon-share-alt custom"> </ i>
<i class = "Glyphicon Glyphicon-Resize-Full Custom"> </ i>
<i class = "Glyphicon Glyphicon-Resize-Small Custom"> </ i>
<i class = "Glyphicon Glyphicon-Ausrufezeichen benutzerdefiniert"> </ i>
<i class = "glyphicon glyphicon-gift custom"> </ i>
<i class = "Glyphicon Glyphicon-Leaf Custom"> </ i>
<i class = "Glyphicon Glyphicon-Fire Custom"> </ i>
<i class = "Glyphicon Glyphicon-Eye-Open Custom"> </ i>
<i class = "Glyphicon Glyphicon-Eye-Close Custom"> </ i>
<i class = "Glyphicon Glyphicon-Warnzeichen benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Plane Custom"> </ i>
<i class = "Glyphicon Glyphicon-Kalender benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Random Custom"> </ i>
<i class = "Glyphicon Glyphicon-Kommentar benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Magnet Custom"> </ i>
<i class = "Glyphicon Glyphicon-Chevron-Up Custom"> </ i>
<i class = "Glyphicon Glyphicon-Chevron-Down Custom"> </ i>
<i class = "glyphicon glyphicon-retweet custom"> </ i>
<i class = "Glyphicon Glyphicon-Warenkorb benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Ordner schließen Benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Ordner-Open Custom"> </ i>
<i class = "Glyphicon Glyphicon-Resize-Vertical Custom"> </ i>
<i class = "Glyphicon Glyphicon-Resize-Horizontal Custom"> </ i>
<i class = "glyphicon glyphicon-hdd custom"> </ i>
<i class = "glyphicon glyphicon-bullhorn custom"> </ i>
<i class = "Glyphicon Glyphicon-Bell Custom"> </ i>
<i class = "Glyphicon Glyphicon-Zertifikat benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Thumbs-Up Custom"> </ i>
<i class = "Glyphicon Glyphicon-Thumbs-Down Custom"> </ i>
<i class = "Glyphicon Glyphicon-Hand-Right Custom"> </ i>
<i class = "Glyphicon Glyphicon-Hand-Left Custom"> </ i>
<i class = "Glyphicon Glyphicon-Hand-Up Custom"> </ i>
<i class = "Glyphicon Glyphicon-Hand-Down Custom"> </ i>
<i class = "Glyphicon Glyphicon-Kreis-Pfeil-rechts benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Kreis-Pfeil-links benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Kreis-Pfeil-nach oben Benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Kreis-Pfeil-nach unten benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Globe Custom"> </ i>
<i class = "Glyphicon Glyphicon-Wrench Custom"> </ i>
<i class = "Glyphicon Glyphicon-Aufgaben benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Filter benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Aktentasche benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Vollbild benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Dashboard benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Büroklammer benutzerdefiniert"> </ i>
<i class = "glyphicon glyphicon-heart-empty custom"> </ i>
<i class = "Glyphicon Glyphicon-Link custom"> </ i>
<i class = "Glyphicon Glyphicon-Phone Custom"> </ i>
<i class = "Glyphicon Glyphicon-Pushpin Custom"> </ i>
<i class = "glyphicon glyphicon-usd custom"> </ i>
<i class = "glyphicon glyphicon-gbp custom"> </ i>
<i class = "Glyphicon Glyphicon-Sort Custom"> </ i>
<i class = "Glyphicon Glyphicon-Sort-by-Alphabet alphabet"> </ i>
<i class = "Glyphicon Glyphicon-Sort-by-Alphabet-Alt Custom"> </ i>
<i class = "Glyphicon Glyphicon-Sort-by-Order Custom"> </ i>
<i class = "Glyphicon Glyphicon-Sort-by-Order-Alt Custom"> </ i>
<i class = "Glyphicon Glyphicon-Sort-by-Attribute custom"> </ i>
<i class = "Glyphicon Glyphicon-Sort-by-Attribute-Alt Custom"> </ i>
<i class = "Glyphicon Glyphicon-ungeprüftes Custom"> </ i>
<i class = "Glyphicon Glyphicon-expand custom"> </ i>
<i class = "Glyphicon Glyphicon-Collapse-Down Custom"> </ i>
<i class = "Glyphicon Glyphicon-Collapse-Up Custom"> </ i>
<i class = "Glyphicon Glyphicon-Log-In Custom"> </ i>
<i class = "Glyphicon Glyphicon-Flash Custom"> </ i>
<i class = "Glyphicon Glyphicon-Log-Out Custom"> </ i>
<i class = "Glyphicon Glyphicon-New-Window Custom"> </ i>
<i class = "Glyphicon Glyphicon-Record Custom"> </ i>
<i class = "Glyphicon Glyphicon-Save Custom"> </ i>
<i class = "Glyphicon Glyphicon-Open Custom"> </ i>
<i class = "Glyphicon Glyphicon-gespeicherte benutzerdefinierte"> </ i>
<i class = "Glyphicon Glyphicon-Import benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Export benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-send custom"> </ i>
<i class = "Glyphicon Glyphicon-Floppy-Disk benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Floppy-gespeicherte benutzerdefinierte"> </ i>
<i class = "Glyphicon Glyphicon-Floppy-Remove Custom"> </ i>
<i class = "Glyphicon Glyphicon-Floppy-Save Custom"> </ i>
<i class = "Glyphicon Glyphicon-Floppy-Open Custom"> </ i>
<i class = "Glyphicon Glyphicon-Kreditkarte benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Transfer Custom"> </ i>
<i class = "Glyphicon Glyphicon-Besteck benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Header benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-komprimierte benutzerdefinierte"> </ i>
<i class = "Glyphicon Glyphicon-Kopfhörer benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Phone Custom"> </ i>
<i class = "Glyphicon Glyphicon-Tower benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-stats custom"> </ i>
<i class = "Glyphicon Glyphicon-SD-Video benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-HD-Video benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Untertitel benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Sound-Stereo Custom"> </ i>
<i class = "Glyphicon Glyphicon-Sound-Dolby Custom"> </ i>
<i class = "glyphicon glyphicon-sound-5-1 custom"> </ i>
<i class = "glyphicon glyphicon-sound-6-1 custom"> </ i>
<i class = "glyphicon glyphicon-sound-7-1 custom"> </ i>
<i class = "Glyphicon Glyphicon-Copyright-Mark Custom"> </ i>
<i class = "Glyphicon Glyphicon-Registrierungsmarke benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Cloud-Download benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Cloud-Upload benutzerdefiniert"> </ i>
<i class = "Glyphicon Glyphicon-Tree-Conifer Custom"> </ i>
<i class = "Glyphicon Glyphicon-Tree-Laubbaum-Brauch"> </ i>