Eigene Social Icons in Hugo LoveIt nachrüsten

Warum das Ganze?

Das Hugo-Theme LoveIt bietet eine großartige Out-of-the-Box-Lösung für Social Media Icons. Doch was passiert, wenn man Plattformen nutzt, die nicht im Standard-Repertoire enthalten sind? Wer seine Arbeit über Ko-fi, Liberapay oder spezialisierte Netzwerke finanziert, möchte diese natürlich prominent in der Sidebar oder im Footer verlinken.

Da LoveIt auf Font Awesome basiert, ist die Lösung eigentlich schon an Bord – wir müssen dem Theme nur beibringen, wie es die neuen Links erkennt und die passenden Icons zuordnet.

Die Umsetzung

Um ein neues Icon hinzuzufügen, müssen wir nicht im Core-Code des Themes wühlen. Wir nutzen das Prinzip der Overwrites in Hugo.

Die Konfiguration (config.toml)

Zuerst fügst du deinen Link ganz normal unter [params.social] hinzu. Da LoveIt das Icon anhand des Namens sucht, wählen wir einen Bezeichner, der auch bei Font Awesome existiert.

[params.social]
  # Diese Namen müssen mit den Keys in der social.yml übereinstimmen
  kofi = "dein-name"
  liberapay = "dein-name"

Die Umsetzung über social.yml

Anstatt tief in die HTML-Templates einzugreifen, nutzt LoveIt eine zentrale Definitionsdatei für alle Social-Media-Dienste. Diese befindet sich standardmäßig unter assets/data/social.yml.

Die social.yml überschreiben

Kopiere die Datei zuerst in dein lokales Projektverzeichnis, damit deine Änderungen bei einem Theme-Update nicht verloren gehen: themes/LoveIt/assets/data/social.yml ➔ assets/data/social.yml

Neue Dienste registrieren

Öffne die kopierte Datei und füge am Ende (oder an der gewünschten Position) deine neuen Dienste hinzu. LoveIt unterscheidet hierbei zwischen FontAwesome und Simpleicons (SVG).

# 082: Ko-Fi (Nutzt FontAwesome Brands)
kofi:
  Weight: 39
  Title: Ko-Fi
  Prefix: https://ko-fi.com/
  Icon:
    Class: fa-brands fa-ko-fi

# 083: Liberapay (Nutzt die integrierte SVG-Library)
liberapay:
  Weight: 37
  Title: Liberapay
  Prefix: https://liberapay.com/
  Icon:
    Simpleicons: liberapay

🔍 Wo finde ich die richtigen Icon-Namen?

Damit das Icon korrekt angezeigt wird, musst du den exakten Klassennamen kennen. Je nachdem, welche Quelle du nutzt, gehst du so vor:

1. Für Font Awesome (Klasse) Besuche die offizielle Font Awesome Icon-Suche.

• Suche nach deiner Plattform (z. B. “Ko-fi”).
• Achte darauf, den Filter “Free” zu setzen.
• Kopiere den Klassennamen. In der social.yml musst du meist das Präfix für Brands (fa-brands) oder Solid-Icons (fa-solid) voranstellen.
  • Beispiel: fa-brands fa-ko-fi

2. Für Simple Icons (SVG) Wenn ein Icon bei Font Awesome fehlt (wie oft bei Open-Source-Projekten), schau in das lokale Verzeichnis deines Themes: ./themes/LoveIt/assets/lib/simple-icons/icons/

• Der Name der .svg Datei (ohne die Endung) ist dein Key für die social.yml.
• Wichtig: Der Name muss exakt übereinstimmen (meist alles kleingeschrieben). Wenn die Datei liberapay.svg heißt, trage liberapay ein.

Der Joker: Eigene SVG-Icons einbinden

Was aber, wenn eine ganz neue Plattform oder ein sehr nischiger Dienst weder bei FontAwesome noch in den simple-icons zu finden ist? Kein Problem, du kannst jedes beliebige SVG-Icon selbst hinzufügen.

Schritt 1: Das Icon speichern

Besorge dir das Logo als .svg Datei (viele Brands bieten diese in ihrem Presse-Kit an). Speichere die Datei in deinem lokalen Projektordner unter: assets/lib/simple-icons/icons/mein-neuer-dienst.svg

Schritt 2: In der social.yml registrieren

Nun kannst du dein eigenes Icon genau wie ein Standard-Icon ansprechen. Der Name unter Simpleicons muss exakt dem Dateinamen entsprechen, den du gerade vergeben hast:

# 084: Mein Neuer Dienst
mein-neuer-dienst:
  Weight: 40
  Title: Mein Dienst
  Prefix: https://beispiel.de/
  Icon:
    Simpleicons: mein-neuer-dienst

Fazit

Mit Hugo LoveIt bist du nicht auf die Standard-Vorgaben angewiesen. Ob über FontAwesome, die riesige SimpleIcons-Library oder sogar eigene SVG-Dateien – du hast die volle Kontrolle darüber, wie und wo du deine Profile präsentierst. Durch das Spiegeln der social.yml in dein lokales Verzeichnis bleibt dein Setup sauber, sicher vor Updates und jederzeit erweiterbar.

Viel Erfolg beim Netzwerken!