So verwenden Sie Google -Symbole in HTML & CSS?

Symbole sind visuelle Darstellungen verschiedener Aktionen, Programme oder Dateien und können eine sehr wichtige Rolle im Website -Design spielen. Sie können das allgemeine Aussehen der Website verbessern und sich als eine gute Quelle erweisen, um mehr Publikum auf Ihre Website zu gewinnen. Symbole bieten eine einfache Navigation, wobei die Benutzererfahrung zunimmt. Es gibt eine Vielzahl von Symbolen, die Sie Ihrer Website hinzufügen können. Dieser Artikel soll Sie jedoch zur Verwendung von Google -Symbole in HTML & CSS leiten, die Sie verwenden können.

Die in dieser Beschreibung untersuchten Themen sind:

1. Was sind Google -Symbole?
2. So fügen Sie ein Google -Symbol hinzu?
3. Größen Sie die Größe eines Google -Symbols
4. Ändern Sie die Farbe eines Google -Symbols

Lass uns anfangen.

Was sind Google -Symbole?

Google bietet eine Vielzahl von Symbolen (insgesamt 750), die als Materialdesign -Symbole angesehen werden. Diese Ikonen sind einfach und doch modern und repräsentieren wirksame Handlungen oder häufig verwendete Objekte. Zum Beispiel repräsentiert ein Müllsäure -Symbol die Aktion "Löschen". Diese Ikonen werden von allen heutigen Browsern unterstützt. Der unten angeschlossene Screenshot zeigt einige der Materialdesign -Symbole.

Nachdem wir nun wissen, welche Google -Symbole sind, lernen wir, wie Sie sie zu Webseiten hinzufügen können.

So fügen Sie ein Google -Symbol hinzu?

Für den Zweck des Hinzufügens von Google-Material-Design-Symbole zu Ihren Websites folgen Sie den folgenden Schritten.

Schritt 1
Der erste Schritt besteht darin, den Link der Material-ICons-Schriftbibliothek im Abschnitt Ihrer HTML-Datei hinzuzufügen. So machst du es.

Schritt 2
Sobald Sie den Link der Material-ICons-Bibliothek hinzugefügt haben, besteht der nächste Schritt darin, die Klasse „Material-ICons“ in die hinzuzufügen oder Tag des Abschnitts und fügen Sie auch den Namen des Symbols hinzu.

W-lan

Beispiel 1
In diesem Beispiel wird auf der Webseite ein Einstellungssymbol hinzugefügt.

Einstellungen

Ausgang

Einstellungssymbol erfolgreich hinzugefügt.

Beispiel 2
Im folgenden Beispiel wird auf der Webseite ein Abmeldesymbol hinzugefügt.

Ausloggen

Ausgang

Logout -Symbol erfolgreich eingefügt.

Sie können auch die Größe dieser Materialdesign -Symbole mit CSS ändern. Lassen Sie es uns im Detail erkunden.

Größen Sie die Größe eines Google -Symbols

Sie können die Größe von Google -Materialdesign -Symbole nach Ihrem Wunsch mit CSS ändern. Befolgen Sie die in diesem Abschnitt genannten Schritte, um die Größe Ihres Google -Materialdesign -Symbols zu ändern.

Schritt 1
Definieren Sie im Tag unter Verwendung der Material-ICons-Klasse die Größe des Symbols beispielsweise die Größe des Symbols.

Schritt 2
Verwenden Sie dieselbe Klasse in der Tag zusammen mit dem Symbolnamen.

Einstellungen

Ausgang

Die Größe des Einstellungssymbols hat sich erfolgreich verändert.

Neben der Größe können Sie auch die Farbe der Google -Symbole ändern. Mal sehen, wie es gemacht wird.

Ändern der Farbe A Google -Symbol

Um die Farbe von Google-Material-Design-Symbolen zu ändern, folgen Sie den gleichen Schritten, wie im obigen Abschnitt erwähnt, mit einem geringen Unterschied, dass Sie zusammen mit der Schriftgröße die Farbe mit der Farbeigenschaft von CSS definieren müssen.

Beispiel
Nehmen wir an, Sie möchten die Farbe des Einstellungssymbols in Blau ändern.

Einstellungen

Ausgang

Die Farbe des Einstellungssymbols änderte sich erfolgreich.

Abschluss

Um Google-Symbole in Ihre HTML-Webseiten einzubetten oder Tag des Abschnitts zusammen mit dem Namen des Symbols. Sie können auch die Größe und Farbe der Symbole durch CSS ändern, indem Sie sie im Tag mit der Material-ICON-Klasse im Tag definieren. In diesem Artikel wird erläutert.