Eigene Icons für Listen

Haushund_2000

Hallo liebes Forum,

ich benötige eure Hilfe.
Wie kann ich in Gutenberg bei der Erstellung einer Liste ein individuelles Icon verwenden?
Wie kann ich den Abstand zwischen dem Icon und dem Text verringern?

(Ich liebe Listen ;))
• Die Seite verwendet Stackable.
• Die Seite hat jemand anderes gebaut.
• Es wird schon ein individuelles Icon verwendet, dass ich in Gutenberg/Stackabel jedoch nicht sehen kann, nur auf der Seite selbst.
• Das Icon ist nicht in den Medien zu finden.
• Ich möchte den Abstand zwischen dem Icon und dem Text verringern, finde jedoch keine Möglichkeit dazu.

==> Daher dachte ich, dass ich das Icon neu erstelle, in die Mediadatenbank lade und dann in die Liste einfüge. Bisher habe ich mit Elementor gearbeitet, da ist das möglich.

Dann habe ich gegoogelt und das Plugin Ultimate Blogs installiert. Aber auch hier sehe ich keine Möglichkeit ein neues Icon einzuladen. Die Premium-Version möchte ich nicht erwerben, bevor ich nicht weiß, ob das dann geht.

Könnt Ihr mir helfen?
(Ich habe gerade erst begonnen HTML und CSS zu lernen. Daher wären mir Antworten sehr lieb, bei denen ich nicht den Code anfassen muss.)

Vielen Dank vorab!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

uha

Ein Link zur Seite wäre nicht schlecht, damit man sich das ansehen kann.

Haushund_2000 · Bildschirmfoto 2024-12-05 um 19.48.00.webp

Hier ist der Link:

https://www.vive-sprachtraining.de
Es handelt sich gleich um die erste Seite.
Ich habe sie schon nachgebaut und etwas gehübscht.
Das ist jedoch noch nicht veröffentlicht, ich bastel daran, weil es ein Vorschlag für die Überarbeitung sein soll. Also, hier sind diese Icons noch etwas näher am Text dran. Das bekomme ich nicht hin, obwohl ich das kopiert habe.
In Gutenberg sieht man diese roten Haken nicht, nur auf der Seite.
Ich lade ein Bildschirmfoto meiner Version hoch.
Danke, für Deine Zeit!

threadi

Code

ul li {
  list-style-image: url(./images/punkt.png);
  text-indent: 4px;
}

Den Wert kannst Du noch deinen Wünschen anpassen.

SEpp55

Zitat von Haushund_2000

Aber auch hier sehe ich keine Möglichkeit ein neues Icon einzuladen.

Also das Icon ist bei dir im Ordner/Bezeichnung [FONT=Courier New]./images/punkt.png[/FONT] - mit 18x24px, zu finden mit dem Browsertool - aufzurufen mit F12 ;) siehe Bild.
Wenn du ein anderes Symbol willst, wäre die einfachste Lösung ein Symbol mit o.g. Abmessungen als [FONT=Courier New]punkt.png[/FONT] zu erstellen und in den selben Ordner einzufügen. Die alte Datei zuvor ggf. als [FONT=Courier New]old_punkt.png[/FONT] umbenennen.

Haushund_2000

Ich melde mich wieder.

Zuerst mal, liebe Community, vielen Dank für Eure Antworten. :)

Ich bin ja noch Neuling in HTML und CSS und konnte daher nicht so viel anfangen. Also hab ich alles erst mal vor mich hergeschoben.
Heute habe ich mir alles noch einmal angesehen - und da kam der zündende Gedanke.

Also:
Ich habe mir zuerst das .svg angesehen, das als Bullet verwendet wird.
Der Abstand kam vom .svg, das breiter mit viel Weißraum angelegt war als benötigt. Daher habe ich das Bild beschnitten und das neue in die Mediathek geladen.
Den Pfad habe ich kopiert.
Dann habe ich den Code angesehen und den Pfad des alten .svg mit dem neuen ersetzt.
So hat es funktioniert. Der Abstand ist jetzt perfekt - und mir ein Stein vom Herzen gefallen.
Juhee!
Ich stolz wie Oskar, die Lösung gefunden zu haben, dafür dass ich noch nicht wirklich programmieren kann und teile mein Glück mit Euch.

Vielen Dank und ein fröhliches Weihnachtsfest!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Eigene Icons für Listen

Jetzt mitmachen!