JPKCom DB
Auf GitHub ansehen

JPKCom FA inline SVG shortcode — Anleitung & Tipps

Inline-SVGs aus Font Awesome (Pro) v5.15.4 per Shortcode in WordPress ausgeben — Installation, Font-Awesome-Setup und Praxis-Tipps zum [jsvg]-Shortcode.

JPKCom FA inline SVG shortcode lädt Icons aus Font Awesome (Pro) v5.15.4 als Inline-SVG und gibt sie über einen Shortcode aus — schnell und ressourcenschonend, ohne Webfont oder JavaScript-Loader. Gedacht für alle, die das SVG-with-JS-Paket von Font Awesome unbürokratisch in ihre WordPress-Seite einbinden wollen.

Das ist kein offizielles Plugin von Font Awesome und steht in keiner direkten Verbindung zum Anbieter. Eine Font-Awesome- bzw. Font-Awesome-Pro-Lizenz bekommst du unter https://fontawesome.com/.

Anleitung

Voraussetzungen

  • WordPress 6.9 oder neuer (getestet bis 7.0)
  • PHP 8.3 oder neuer
  • Eine eigene Kopie von Font Awesome (Pro) v5.15.4 (über deine Font-Awesome-Lizenz)
  • Multisite wird unterstützt (das Plugin ist netzwerkfähig)

Installation

  1. Gehe im Admin-Bereich zu Plugins → Installieren und klicke auf Plugin hochladen.
  2. Wähle die ZIP-Datei des Plugins und klicke auf Jetzt installieren.
  3. Lade deine Version von Font Awesome (Pro) v5.15.4 unter https://fontawesome.com/ herunter.
  4. Entpacke den Inhalt des Font-Awesome-Archivs direkt in einen Ordner namens jpkcom_fasvg/ unterhalb von wp-content/uploads.
  5. Stelle sicher, dass folgende Dateien/Verzeichnisse vorhanden sind: wp-content/uploads/jpkcom_fasvg/css/svg-with-js.min.css und wp-content/uploads/jpkcom_fasvg/svgs/*.
  6. Klicke auf Aktivieren.

Verwendung

Setze den Shortcode in deinen Inhalt oder in einen Menüpunkt-Titel:

[jsvg type="" name="" style="" class="" title=""]

Beispiel:

[jsvg type="fal" name="jedi" style="margin:2rem" class="fa-10x" title="Obi-Wan Kenobi"]
  • type — die Font-Awesome-Stil-Familie (z. B. fas, fal)
  • name — der Icon-Name (z. B. jedi)
  • style — optionale Inline-CSS-Angaben
  • class — zusätzliche CSS-Klassen (z. B. fa-10x, fa-rotate-270)
  • title — barrierefreier Titel des Icons

Der Shortcode lässt sich auch programmatisch über do_shortcode() verwenden:

<?php
echo do_shortcode( '[jsvg type="fas" name="snowboarding" class="fa-4x fa-rotate-270" title="Snowboarding"]' );

Mehr zu do_shortcode() findest du in der WordPress-Funktionsreferenz.

Tipps & Tricks

  • Icon-Namen entsprechen den SVG-Dateinamen: Der name-Wert verweist auf die Datei im jeweiligen Stil-Verzeichnis unter svgs/. Stimmt der Name nicht mit einer vorhandenen SVG-Datei überein, wird nichts ausgegeben.
  • Sicherheit beim name-Attribut: Seit Version 2.0.9 wird der name-Wert mit sanitize_file_name()/basename() bereinigt, um Path-Traversal zu verhindern — Slashes und Pfadangaben im Namen greifen also nicht.
  • In Menü-Titeln nutzbar: Da der Shortcode auch in Menüpunkt-Titeln funktioniert, kannst du Navigationspunkte mit Icons anreichern.
  • Transformations-Klassen von Font Awesome: Größen- und Rotations-Utilities wie fa-4x oder fa-rotate-270 lassen sich über das class-Attribut mitgeben.
  • Reproduzierbare Updates: Ab Version 2.0.9 nutzt das Plugin sichere, selbst gehostete Updates über GitHub mit SHA256-Prüfsummen und arbeitet mit declare(strict_types=1).

Weiterführende Informationen