Tutorials

✅ So nutzt du Google Icons in Squarespace | Schritt-für-Schritt Tutorial 2025

Melden

Hier ist ein umfassendes, aktuelles Tutorial für das Jahr 2025, wie du Google Icons (Material Symbols) nahtlos in deine Squarespace-Website integrierst.

Google Icons (jetzt meist Material Symbols genannt) sind eine fantastische Möglichkeit, deine Squarespace-Website professioneller und intuitiver zu gestalten. Sie sind kostenlos, skalierbar und laden extrem schnell.

In dieser Anleitung lernst du, wie du die Bibliothek einbindest und Icons an jeder beliebigen Stelle platzierst.

Schritt 1: Die Google Icons Bibliothek auswählen

Zuerst müssen wir entscheiden, welchen Stil du verwenden möchtest. Google bietet drei Hauptvarianten an: Outlined, Rounded und Sharp.

  1. Gehe auf die Google Fonts Icons Website.
  2. Wähle oben links "Material Symbols" (die modernere Version für 2025).
  3. Klicke rechts im Panel auf den Bereich "Static Icon Font".
  4. Dort findest du einen <link>-Code. Er sieht ungefähr so aus:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

Kopiere diesen Code für den nächsten Schritt.

Schritt 2: Die Bibliothek in Squarespace einbinden (Code Injection)

Damit Squarespace weiß, wie die Icons dargestellt werden sollen, müssen wir die Verbindung zu Google herstellen.

  1. Logge dich in dein Squarespace-Konto ein und öffne deine Website.
  2. Gehe zu Einstellungen (Settings).
  3. Navigiere zu Website-Tools -> Code-Injektion (Code Injection).
  4. Füge den kopierten Link-Code aus Schritt 1 in das Feld Header ein.
  5. Klicke oben links auf Speichern.

Schritt 3: Ein Icon auswählen und den Code kopieren

  1. Suche auf der Google Icons Website nach einem Icon, das du verwenden möchtest (z. B. "home", "shopping_cart" oder "favorite").
  2. Klicke das Icon an.
  3. Im rechten Fenster erscheint ein Bereich namens "Inserting the icon".
  4. Wähle die Option "Web" und kopiere das HTML-Snippet. Es sieht so aus:
<span class="material-symbols-outlined">
search
</span>

Schritt 4: Das Icon auf deiner Squarespace-Seite einfügen

  1. Gehe auf die Seite, auf der das Icon erscheinen soll, und klicke auf Bearbeiten (Edit).
  2. Füge einen neuen Block hinzu und wähle den Code-Block.
  3. Lösche den Standard-Inhalt des Blocks und füge dein kopiertes Icon-Snippet ein.
  4. Das Icon sollte nun im Editor (oder nach dem Speichern) erscheinen.

Schritt 5: Styling der Icons (Größe und Farbe anpassen)

Standardmäßig übernimmt das Icon die Textfarbe und -größe der Umgebung. Du kannst dies jedoch ganz einfach mit CSS anpassen.

Option A: Direkt im Code-Block (Schnelle Lösung)

Du kannst das Styling direkt in den <span>-Tag schreiben:

<span class="material-symbols-outlined" style="font-size: 48px; color: #ff5733;">
favorite
</span>

Option B: Global über Custom CSS (Saubere Lösung)

Wenn du alle Icons einheitlich stylen willst, gehe zu Website-Tools -> Eigenes CSS (Custom CSS) und füge dies hinzu:

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
  color: #333333; /* Deine Wunschfarbe */
  font-size: 24px; /* Deine Wunschgröße */
  vertical-align: middle; /* Richtet das Icon am Text aus */
}

Profi-Tipps für 2025:

  • Barrierefreiheit: Wenn das Icon eine wichtige Funktion hat (z.B. ein Link), füge ein aria-label hinzu: <span class="material-symbols-outlined" aria-label="Suche">search</span>.
  • Performance: Nutze nur einen Stil (z.B. nur Outlined), um die Ladezeiten minimal zu halten.
  • Buttons: Du kannst den Icon-Code auch innerhalb von Text-Links oder in der Nähe von Buttons verwenden, um die Klickrate zu erhöhen.

Zusammenfassung

  1. Code kopieren von Google Fonts.
  2. In Code Injection (Header) einfügen.
  3. Code-Block auf der Seite erstellen.
  4. Icon-Tag einfügen & mit CSS verfeinern.

Viel Erfolg beim Gestalten deiner Squarespace-Seite! ✅

0