Glücklicherweise gibt es eine einfache und solide Möglichkeit, mit GenerateBlocks – neben den vorhandenen – auch eigene Icons einzufügen. GenerateBlocks bietet dir in einigen Blöcken die Funktion Icons einzufügen. Dort findest du zwei Reiter (Allgemein & Social Media) mit den vorinstallierten Icons. Sobald du ein Icon auswählst, siehst du, dass sich etwas weiter oben die Zeile „Icon-SVG-HTML“ gefüllt hat. Dort steht nun der genutzte SVG-Code, welcher effektiv das Icon ist.
Wenn du nun ein eigenes Icon einfügen möchtest, benötigen wir das Icon als SVG Grafik und nutzen den Code, welchen wir dann in das Feld (Icon-SVG-HTML) einfügen. Du kommst ganz einfach an diesen Code, wenn du die gewünschte Icon-Datei mit einem Text- oder Code-Editor öffnest und die enthaltenen SVG-Codezeilen kopierst.
Wenn du gerne Icons nutzen möchtest, welche vielseitig verwendbar sind, kennst du sicher bereits FontAwesome. Wenn nicht, schau es dir mal näher an. Denn mit dieser Icon-Bibliothek bekommst du ein dickes Paket an Icons für deine Gestaltung. Nun möchtest du aber keine neue Schriftart installieren, nur um ein oder zwei individuelle Icons zu deiner Seite hinzuzufügen. Denn das wäre der reguläre Weg, wenn du die Icons auf deiner Website nutzen möchtest. Das hält uns aber nicht davon ab, einfach die SVG-Daten deiner beliebten Bibliothek von FontAwesome zu nutzen. Erkundige dich bitte vorher, ob du diese oder andere Daten lizenzfrei verwenden darfst und vergiss sicherheitshalber nicht, die Quelle oder den Ursprung anzugeben, wenn die Daten nicht aus deiner eigenen Feder stammen.
Suche nun auf der Website von FontAwesome nach deinem gewünschten Icon und öffne die Detail-Seite. Wir schauen uns das anhand vom Xing Icon mal etwas genauer an. Du siehst verschiedene Varianten des Icons und wir „untersuchen“ (via Rechtsklick oder deiner Browser Konsole) das kleinste graue Icon, da es am neutralsten für diese Zwecke ist. Du siehst den zugehörigen Code. Uns interessiert hier alles ab <svg> bis zum schließenden Tag </svg>. Alternativ, klicke auf das Icon „Copy SVG Code“-
Kopiere nun den Code der SVG und füge ihn in das Feld (Icon-SVG-HTML) auf deiner Seite ein. Du kannst den kompletten Bereich der Klassen (class=“…“) löschen, da wir lediglich die Icon-Daten benötigen. Kaum sind die Zeilen eingetragen, siehst du, dass unser Xing Icon angezeigt wird. Den Rest, wie beispielsweise die Icon-Größe kannst du wie gewohnt innerhalb des Block-Editors bearbeiten.
Ein voller Erfolg. Schnell, einfach und super schlank, genau wofür GeneratePress und GenerateBlocks konzipiert wurden. Ich hoffe dieser Icon-Quicktipp mit GenerateBlocks konnte dir weiterhelfen. Wenn du Fragen oder Feedback hast, schreibe es gerne in die Kommentare.