image-icons als Aufzählungszeichen richtig einbauen

Hallo!
Wer hat die Lösung für mein Problem?

Bin WP Neuling, probiere viel aus und bin dementsprechend wissbegierig.
Habe auf meiner Seite relativ viel Listen als vertikale Aufzählung eingebaut. Die Standard-Aufzählungszeichen finde ich auf Dauer langweilig.
Ich möchte die Sache gestalterisch aufpeppen und stattdessen kleine Icons (aus dem eigenen Logo extrahiert) verwenden.
Die eine oder andere Lösung aus dem Netz habe ich ausprobiert, jedoch ohne Erfolg.
Wie gesagt, ich bin Anfänger und die Sache mit dem CSS habe ich wohl noch nicht so ganz verstanden.

Folgendes habe ich versucht:

im benutzerdefinierten CSS-Bereich folgenden Code-Schnipsel eingefügt:
<style>
.list-style li {
list-style-image: url(http://ellop.de/wp-content/uploads/2016/05/Haus-12-12.png);
}
</style>


Im Texteditor nachfolgenden HTML-Code (Netz-Ressource) eingegeben:

<h1><span style="color: #0086c8;">B-01.02: Beweissicherung</span></h1>
<h2><span style="color: #0086c8;">Unsere Leistungen:</span></h2>
<ul class="list-style">
<li>Vorbereitung, Ausarbeitung, Fortschreibung von Verträgen</li>
<li>Beratung zur Koordination und Dokumentation (entsprechend AHO-Fachkommission Projektsteuerung)</li>
<li>Bauplanung, Ingenieurverträge und Gutachten</li>
<li>Bauausführung, Ausschreibung, Vergabe, Abrechnung und Nachtragsgestaltung</li>
<li>Quantitäts- und Qualitätsprüfung bei Verträgen mit Bauträgern und Schlüsselfertigbau</li>
<li>Vorprozessuale Analyse von Verträgen und vertragsrelevantem Schriftverkehr</li>

Ergebnis (siehe Screenshot im Anhang): die Standard-Aufzählungzeichen werden weiterhin abgebildet....

Frage:
Was ist hier falsch? Habt Ihr einen besseren Vorschlag?

Herzlichen Dank vorab für Eure Unterstützung!

LG
Lorenz

Den Anhang 16862 betrachten

 

...der in meinem Beitrag angehängte Link zum Screenshot funktioniert leider nicht.
Hier der Nachtrag....

 

Ergebnis nach Code-Anpassung

Danke für die Hinweise.
Hab mich gleich mal drangemacht und die Vorschläge im Netz recherchiert, diesen Hinweis gefunden:

"Bei großen Projekten oder für die schnelle Lösung kommen Sie manchmal nicht ohne ein ! important aus. Eleganter ist es aber immer, eine neue Klasse einzuführen, oder eine saubere Cascade zu schreiben."

Link zum Thema "!important":
http://www.css-hack.de/CSS+allgemein/%21+important

Ich würde es ja gerne "elegant richtig" machen wollen. Wie würde denn so eine "Cascade" konkret als Code CSS + HTML aussehen?


zu helix:

Das Prinzip ist mir klar....durch abwählen erreiche ich, dass die Vorgaben vom originalen "Nirvana Theme" sozusagen überschrieben bzw. nicht mehr berücksichtigt werden.
Wäre da nicht das Thema "Child-Theme" anlegen angesagt, indem dann alle Änderungen vorgenommen werden? (auch zur Sicherstellung, dass Änderungen nicht mit einem Thema-Update verloren gehen) anlegen angesagt? Das habe ich bereits versucht, jedoch weil ich halt keine Ahnung habe, ebenfalls erfolglos....

Wie sieht denn dieser Code-Schnipsel "list-style-type: none;" in Verbindung mit dem Code für das "Grafik-Aufzählungszeichen konkret aus?

Habe folgendes probiert:
CSS:
li {
list-style-type: none;
padding-left: 1em;
margin-left: 1em;
background-image:url('http://ellop.de/wp-content/uploads/2016/05/Haus-32-32.png');
background-repeat:no-repeat;
background-position:left center;
}

HTML:
<h1><span style="color: #0086c8;">B-01.02: Beweissicherung</span></h1>
<p>&nbsp;</p>
<h2><span style="color: #0086c8;">Unsere Leistungen:</span></h2>
<ul>
<li>ert</li>
<li>sfgh</li>
<li>dghj</li>
<li>fgxh</li>
</ul>


Was als Ergebnis rauskam, seht Ihr im Anhang....
Bin etwas desillusioniert....vielleicht habe ich mir hier zuviel des Guten vorgenommen....

LG Lo

 

...das ist schon so mit der Doppelanzeige (siehe Screenshot)!
Wenn ich das mal mit dem "!important" ausprobieren möchte, wie sieht da der Code aus und wo packe ich den hin?

 

keine Lösung in Sicht

...wie mir scheint, habe ich mir wohl zuviel des Guten zugemutet.
Viel im Netz recheriert, dennoch lässt sich das Problem auch nach gefühlten 1000 Versuchen nicht lösen.
Entweder wird die Grafik nicht angezeigt oder sie kollidiert mit dem nachfolgenden Text (vgl. Screenshot im Anhang)

CSS:
.list-style ul, .list-style li {
list-style-type: none !important;
}
.list-style ul, .list-style li {
padding-left: 0.4em;
margin-left: 2em;
background-image: url('http://ellop.de/wp-content/uploads/2016/05/Haus-12-12.png');
background-repeat:no-repeat;
background-position:left center;
}

HTML:
<h1><span style="color: #0086c8;">B-01.02: Beweissicherung</span></h1>
<h2><span style="color: #0086c8;">Unsere Leistungen:</span></h2>
<ul class="list-style">
<li>Milk</li>
<li>Eggs</li>
<li>Cheese</li>
<li>Vegetables</li>
<li>Fruit</li>
</ul>

Hiiiiiiilfe... Wo liegt das Problem?